phaser实现一个二维迷宫游戏-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：phaser实现一个二维迷宫游戏，移动键盘上下左右键来移动。

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">


  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");
* {
  font-family: "VT323", monospace;
}

body {
  background-color: #000000;
}
</style>



</head>

<body  >
  

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/phaser.3.55.2.js"></script>
      <script  >
'use strict';

console.clear();

class Settings {
	static MAP = [
		[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
		[1, 0, 2, 2, 2, 2, 2, 2, 0, 1],
		[1, 0, 2, 0, 0, 0, 0, 2, 2, 1],
		[1, 0, 2, 0, 2, 2, 0, 2, 0, 1],
		[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
		[1, 1, 1, 1, 1, 1, 1, 1, 0, 1],
		[1, 0, 0, 1, 0, 0, 0, 1, 0, 1],
		[1, 0, 0, 0, 0, 0, 0, 0, 0, 1],
		[1, 0, 1, 1, 1, 0, 1, 1, 0, 1],
		[1, 0, 0, 1, 1, 0, 1, 1, 1, 1],
		[1, 1, 0, 0, 1, 0, 0, 0, 0, 1],
		[1, 0, 0, 1, 1, 1, 1, 1, 0, 1],
		[1, 0, 1, 0, 0, 0, 0, 1, 0, 1],
		[1, 0, 0, 0, 3, 3, 0, 0, 0, 1],
		[3, 3, 3, 3, 4, 4, 3, 3, 3, 3],
	];
	
	static TRAPS_MAP = [
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 1, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 1, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 1, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 1, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
		[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
	];
	
	static BLOCK_SIZE = 32;
	
	static CHARACTER_X = this.BLOCK_SIZE * 8;
	static CHARACTER_Y = this.BLOCK_SIZE * 1;
	
	static FINISH_X = this.BLOCK_SIZE * 8;
	static FINISH_Y = this.BLOCK_SIZE * 13;
	
	static FONT_SETTINGS = {
		fontFamily: 'VT323',
		fontSize: 24,
		stroke: '#000000',
		strokeThickness: 4,
	};
	
	static IS_DEBUG = false;
}

class PreloadScene extends Phaser.Scene {
	constructor() {
		super('Preload');
	}
	
	preload() {
		const path = 'https://assets.codepen.io/430361';
		
		this.load.image('character', `${path}/bit-maze-character.png`);
		this.load.image('block', `${path}/bit-maze-block.png`);
		this.load.image('grass', `${path}/bit-maze-grass.png`);
		this.load.image('land', `${path}/bit-maze-land.png`);
		this.load.image('cloud', `${path}/bit-maze-cloud.png`);
		this.load.image('background', `${path}/bit-maze-background.png`);
		this.load.image('tilemap', `${path}/bit-maze-tilemap.png`);
		
		this.load.spritesheet('character-run', `${path}/bit-maze-character-run.png`, {
			frameWidth: 24,
			frameHeight: 24,
		});
		this.load.spritesheet('character-jump', `${path}/bit-maze-character-jump.png`, {
			frameWidth: 24,
			frameHeight: 24,
		});
		this.load.spritesheet('character-idle', `${path}/bit-maze-character-idle.png`, {
			frameWidth: 24,
			frameHeight: 24,
		});
		this.load.spritesheet('character-trap', `${path}/bit-maze-character-trap.png`, {
			frameWidth: 24,
			frameHeight: 24,
		});
		this.load.spritesheet('buttons', `${path}/bit-maze-buttons.png`, {
			frameWidth: 48,
			frameHeight: 48,
		});
		this.load.spritesheet('trap', `${path}/bit-maze-trap.png`, {
			frameWidth: Settings.BLOCK_SIZE,
			frameHeight: Settings.BLOCK_SIZE,
		});
		this.load.spritesheet('finish', `${path}/bit-maze-finish.png`, {
			frameWidth: Settings.BLOCK_SIZE,
			frameHeight: Settings.BLOCK_SIZE,
		});
		
		this.load.on("complete", (evt) => {
			this.cameras.main.fadeOut(128);
			
			this.cameras.main.once("camerafadeoutcomplete", () => {
				this.scene.start('Main');
			}, this);
		});
	}
}

class MainScene extends Phaser.Scene {
	mapLayer = null;
	finish = null;
	traps = null;
	leftKey = false;
	rightKey = false;
	jumpKey = false;

	constructor() {
		super('Main');
	}
	
	createMap() {
		let width = this.game.config.width;
		let height = this.game.config.height;
		
		this.add.image(width / 2, height / 2, 'background').setScrollFactor(0);
		
		const map = this.make.tilemap({
			data: Settings.MAP,
			tileWidth: Settings.BLOCK_SIZE,
			tileHeight: Sett.........完整代码请登录后点击上方下载按钮下载查看