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: Settings.BLOCK_SIZE,
		});
		
		const tileset = map.addTilesetImage('tilemap');
		
		this.mapLayer = map.createLayer(0, tileset, 0, 0);
		this.mapLayer.setCollision([1, 2, 3, 4]);
	}
	
	placeCharacter() {
		const x = Settings.CHARACTER_X;
		const y = Settings.CHARACTER_Y;
		
		this.physics.add.sprite(x, y, 'character')
			.setName('character')
			.setOrigin(0)
			.refreshBody()
			.setBounce(0.3)
			.setDepth(1);
		
		let character = this.children.getByName('character');
		
		character.setCollideWorldBounds(true);
		
		const b = Settings.BLOCK_SIZE;
		const width = Settings.MAP[0].length * b;
		const height = Settings.MAP.length * b;
		
		this.setCharacterCamera(width, height);
	}
	
	setGameOver(otherText) {
		this.physics.world.pause();
		
		let width = this.game.config.width;
		
		this.add.text(
			width / 2, 168, otherText, Settings.FONT_SETTINGS)
			.setOrigin(0.5)
			.setScrollFactor(0)
			.setDepth(2);
		this.add.text(
			width / 2, 192, 'PRESS ANYWHERE TO RETRY', Settings.FONT_SETTINGS)
			.setOrigin(0.5)
			.setScrollFactor(0)
			.setDepth(2);
		
		this.tweens.add({
			targets: [
				this.children.getByName('btn-left'),
				this.children.getByName('btn-right'),
				this.children.getByName('btn-up'),
			],
			alpha: 0,
			tease: 'Sine.easeOut',
			duration: 256,
		});
		
		this.input.once('pointerdown', () => {
			this.scene.restart();
		});
		
		this.input.keyboard.once('keydown', () => {
			this.scene.restart();
		});
	}
	
	setCharacterCamera(width, height) {
		let boundary = new Phaser.Geom.Rectangle(0, 0, width, height);
		let character = this.children.getByName('character');
		
		character.body.setBoundsRectangle(boundary);
		
		this.cameras.main.setBounds(0, 0, width, height);
		this.cameras.main.startFollow(character, true, 1, 1);
	}
	
	setCharacterAnimation() {
		this.anims.create({
			key: 'character-run',
			frames: this.anims.generateFrameNumbers('character-run', {
				start: 0,
				end: 7,
			}),
			frameRate: 10,
			repeat: -1,
		});
		this.anims.create({
			key: 'character-jump',
			frames: this.anims.generateFrameNumbers(.........完整代码请登录后点击上方下载按钮下载查看