使用 Phaser 制作迷宫的平铺地图编辑器

Question

我正在尝试使用 Tiled 地图编辑器和 Phaser 创建迷宫游戏。我使用本教程作为基础：http://phaser.io/tutorials/coding-tips-005

但是我的地图没有显示在我的浏览器中。我创建了一个 tilemap 并将其导出为 json 文件。代码中有一个错误 Uncaught ReferenceError: Phaser is not defined”。我错过了什么或做错了什么？

这是代码：

    <!DOCTYPE HTML>
    <html>
    <head>
    <title>Maze Game</title>
    <meta charset="utf-8">
    <script src="//cdn.jsdelivr.net/phaser/2.2.2/phaser.min.js"></script>
    </head>
    <body>

    <div id="game"></div>

    <script type="text/javascript">
    var game = new Phaser.Game(640, 480, Phaser.AUTO, 'game');
    var PhaserGame = function (game) {
        this.map = null;
        this.layer = null;
        this.car = null;
        this.safetile = 1;
        this.gridsize = 32;
        this.speed = 150;
        this.threshold = 3;
        this.turnSpeed = 150;
        this.marker = new Phaser.Point();
        this.turnPoint = new Phaser.Point();
        this.directions = [ null, null, null, null, null ];
        this.opposites = [ Phaser.NONE, Phaser.RIGHT, Phaser.LEFT, Phaser.DOWN, Phaser.UP ];
        this.current = Phaser.UP;
        this.turning = Phaser.NONE;
    };
    PhaserGame.prototype = {
        init: function () {
            this.physics.startSystem(Phaser.Physics.ARCADE);
        },
        preload: function () {
            //  We need this because the assets are on Amazon S3
            //  Remove the next 2 lines if running locally
            this.load.baseURL = 'http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/';
            this.load.crossOrigin = 'anonymous';
            this.load.tilemap('map', 'assets/samplemaze.json', null, Phaser.Tilemap.TILED_JSON);
            this.load.image('tiles', 'assets/tiles.png');
            this.load.image('car', 'assets/car.png');
            //  Note: Graphics are Copyright 2015 Photon Storm Ltd.
        },
        create: function () {
            this.map = this.add.tilemap('map');
            this.map.addTilesetImage('tiles', 'tiles');
            this.layer = this.map.createLayer('Tile Layer 1');
            this.map.setCollision(20, true, this.layer);
            this.car = this.add.sprite(48, 48, 'car');
            this.car.anchor.set(0.5);
            this.physics.arcade.enable(this.car);
            this.cursors = this.input.keyboard.createCursorKeys();
            this.move(Phaser.DOWN);
        },
        checkKeys: function () {
            if (this.cursors.left.isDown && this.current !== Phaser.LEFT)
            {
                this.checkDirection(Phaser.LEFT);
            }
            else if (this.cursors.right.isDown && this.current !== Phaser.RIGHT)
            {
                this.checkDirection(Phaser.RIGHT);
            }
            else if (this.cursors.up.isDown && this.current !== Phaser.UP)
            {
                this.checkDirection(Phaser.UP);
            }
            else if (this.cursors.down.isDown && this.current !== Phaser.DOWN)
            {
                this.checkDirection(Phaser.DOWN);
            }
            else
            {
                //  This forces them to hold the key down to turn the corner
                this.turning = Phaser.NONE;
            }
        },
        checkDirection: function (turnTo) {
            if (this.turning === turnTo || this.directions[turnTo] === null || this.directions[turnTo].index !== this.safetile)
            {
                //  Invalid direction if they're already set to turn that way
                //  Or there is no tile there, or the tile isn't index a floor tile
                return;
            }
            //  Check if they want to turn around and can
            if (this.current === this.opposites[turnTo])
            {
                this.move(turnTo);
            }
            else
            {
                this.turning = turnTo;
                this.turnPoint.x = (this.marker.x * this.gridsize) + (this.gridsize / 2);
                this.turnPoint.y = (this.marker.y * this.gridsize) + (this.gridsize / 2);
            }
        },
        turn: function () {
            var cx = Math.floor(this.car.x);
            var cy = Math.floor(this.car.y);
            //  This needs a threshold, because at high speeds you can't turn because the coordinates skip past
            if (!this.math.fuzzyEqual(cx, this.turnPoint.x, this.threshold) || !this.math.fuzzyEqual(cy, this.turnPoint.y, this.threshold))
            {
                return false;
            }
            this.car.x = this.turnPoint.x;
            this.car.y = this.turnPoint.y;
            this.car.body.reset(this.turnPoint.x, this.turnPoint.y);
            this.move(this.turning);
            this.turning = Phaser.NONE;
            return true;
        },
        move: function (direction) {
            var speed = this.speed;
            if (direction === Phaser.LEFT || direction === Phaser.UP)
            {
                speed = -speed;
            }
            if (direction === Phaser.LEFT || direction === Phaser.RIGHT)
            {
                this.car.body.velocity.x = speed;
            }
            else
            {
                this.car.body.velocity.y = speed;
            }
            this.add.tween(this.car).to( { angle: this.getAngle(direction) }, this.turnSpeed, "Linear", true);
            this.current = direction;
        },
        getAngle: function (to) {
            //  About-face?
            if (this.current === this.opposites[to])
            {
                return "180";
            }
            if ((this.current === Phaser.UP && to === Phaser.LEFT) ||
                (this.current === Phaser.DOWN && to === Phaser.RIGHT) ||
                (this.current === Phaser.LEFT && to === Phaser.DOWN) ||
                (this.current === Phaser.RIGHT && to === Phaser.UP))
            {
                return "-90";
            }
            return "90";
        },
        update: function () {

            this.physics.arcade.collide(this.car, this.layer);
            this.marker.x = this.math.snapToFloor(Math.floor(this.car.x), this.gridsize) / this.gridsize;
            this.marker.y = this.math.snapToFloor(Math.floor(this.car.y), this.gridsize) / this.gridsize;
            //  Update our grid sensors
            this.directions[1] = this.map.getTileLeft(this.layer.index, this.marker.x, this.marker.y);
            this.directions[2] = this.map.getTileRight(this.layer.index, this.marker.x, this.marker.y);
            this.directions[3] = this.map.getTileAbove(this.layer.index, this.marker.x, this.marker.y);
            this.directions[4] = this.map.getTileBelow(this.layer.index, this.marker.x, this.marker.y);
            this.checkKeys();
            if (this.turning !== Phaser.NONE)
            {
                this.turn();
            }
        },
        render: function () {
            //  Un-comment this to see the debug drawing
            for (var t = 1; t < 5; t++)
            {
                if (this.directions[t] === null)
                {
                    continue;
                }
                var color = 'rgba(0,255,0,0.3)';
                if (this.directions[t].index !== this.safetile)
                {
                    color = 'rgba(255,0,0,0.3)';
                }
                if (t === this.current)
                {
                    color = 'rgba(255,255,255,0.3)';
                }
                this.game.debug.geom(new Phaser.Rectangle(this.directions[t].worldX, this.directions[t].worldY, 32, 32), color, true);
            }
            this.game.debug.geom(this.turnPoint, '#ffff00');
        }
    };
    game.state.add('Game', PhaserGame, true);
    </script>

    <a href="http://phaser.io"><img src="http://files.phaser.io.s3.amazonaws.com/codingtips/issue005/phaser-tips-header1.png" title="Phaser Coding Tips Weekly" style="margin-top: 8px" /></a>

</body>
</html>

非常感谢！我是编程新手，所以任何反馈都会非常有用！

Answer 1

您的脚本标记的 src 属性中可能缺少 "http:" 或 "https:"。如果是这样，则 phaser.min.js 文件未包含在您的页面中，可能会导致未定义的引用。

使用 Phaser 制作迷宫的平铺地图编辑器

Tiled Map Editor using Phaser to make a Maze

javascript

json

tiled

phaser-framework