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