phaser实现一个简单的杀虫子游戏效果代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：phaser实现一个简单的杀虫子游戏效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html lang="en"><head>

  <meta charset="UTF-8">


  <title>CodePen - Insect Catch : Sample Tutorial Game</title>
  
  <style>html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style>

  
  
<style>
body {
  background-color: #000000;
  display: grid;
  place-items: center;
}
</style>




</head>

<body style="height: 100%;">
  
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/phaser.min.js"></script>
      <script>
"use strict";

// Assets prefix
const ASSET_PREFIX = "//repo.bfw.wiki/bfwrepo/images/phaser/insect-catch-";

// Size of each tiles
const TILES_SIZE = 16;

// Count of X tiles of the screen
const SCREEN_X = 4 * 4;

// Count of Y tiles of the screen
const SCREEN_Y = 3 * 4;

// Width of the screen
const SCREEN_WIDTH = TILES_SIZE * SCREEN_X;

// Height of the screen
const SCREEN_HEIGHT = TILES_SIZE * SCREEN_Y;

// Count of background tile set
const BACKGROUND_COUNT = 5;

// Count of objects on the game
const OBJECT_COUNT = 21;

// Movement speed of the character
const MOVE_SPEED = 32;

// Directions of the character
const DIRECTIONS = ["front", "rear", "left", "right"];

// Count of bugs will appear on the game screen
const BUGS_COUNT = 5;

// Respa
const BUGS_RESPAWN_TIME = 10000;

/**
 * Get coordinate of x or y from the screen
 */
function getCoordinate(value) {
	return (value * TILES_SIZE) + (TILES_SIZE / 2);
}

/**
 * Generate random path variable
 */
function getRandomPath() {
	return {
		x: getCoordinate(Phaser.Math.Between(1, SCREEN_X - 2)),
		y: getCoordinate(Phaser.Math.Between(1, SCREEN_Y - 2)),
	}
}

// Main class
class BugCatchGame extends Phaser.Scene {
	/**
	 * Class constructor
	 */
	constructor() {
		super();
	}
	
	/**
	 * Load all the required assets
	 */
	preload() {
		// Background tile set
		for (let i = 1; i <= BACKGROUND_COUNT; i++) {
			this.load.image(`background-${i}`, `${ASSET_PREFIX}background-${i}.png`);
		}
		
		// Tree
		this.load.image("tree", `${ASSET_PREFIX}tree.png`);
		
		// House
		this.load.image("house", `${ASSET_PREFIX}house.png`);
		
		// Character sprite
		this.load.spritesheet("character-sprite", `${ASSET_PREFIX}character-sprite.png`, {
			frameWidth: TILES_SIZE,
			frameHeight: TILES_SIZE,
		});
		
		// Bug
		this.load.image("bug", `${ASSET_PREFIX}bug.png`);
	}

	/**
	 * Create and initialize the game data
	 */
	create() {
		// List of obstacles
		this.obstacleList = [];
		
		for (let x = 0; x < SCREEN_X; x++) {
			for (let y = 0; y < SCREEN_Y; y++) {
				const n = Phaser.Math.Between(1, BACKGROUND_COUNT);
				const background = `background-${n}`;
				
				// Add background
				this.add.image(x * TILES_SIZE, y * TILES_SIZE, background).setOrigin(0);
				
				if (y === 0 || y === SCREEN_Y - 1 || x === 0 || x === TILES_SIZE - 1) {
					let tempX = getCoordinate(x);
					let tempY = getCoordinate(y);

					this.obstacleList = [...this.obstacleList, {
						x: tempX,
						y: tempY,
					}];
				}
			}
		}
		
		// Add 10 obstacles on random areas
		for (let i = 0; i < OBJECT_COUNT; ) {
			const path = getRandomPath();
			
			if (this.getPathIndex(path) < 0) {
				this.obstacleList = [...this.obstacleList, path];
				
				i++;
			}
		}
		
		// Object of the obstacle, used for collision
		this.obstacles = this.physics.add.staticGroup();
		
		for (let i = 0; i < this.obstacleList.length; i++) {
			const obstacle = this.obstacleList[i];
			
			if (i === this.obstacleList.length - 1) {
				// Append the physics object to the array
				this.obstacles.create(obstacle.x, obstacle.y, "house");
				
				continue;
			}
			
			// Append the physics object to the array
			this.obstacles.create(obstacle.x, obstacle.y, "tree");
		}
		
		// Place the character randomly on the screen
		while (true) {
			const path = getRandomPath();
			
			if (this.getPathIndex(path) >= 0) {
				continue;
			}
			
			this.character = this.physics.add.sprite(path.x, path.y, "c.........完整代码请登录后点击上方下载按钮下载查看