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

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

代码语言：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 ini.........完整代码请登录后点击上方下载按钮下载查看