Javascript 使用Phaser制作迷宫的平铺地图编辑器
我正在尝试使用平铺地图编辑器和相位器创建一个迷宫游戏。我使用本教程作为基础： 但是我的地图没有显示在我的浏览器中。我创建了一个tilemap并将其导出为json文件。代码中有一个错误，表示Javascript 使用Phaser制作迷宫的平铺地图编辑器,javascript,json,phaser-framework,tiled,Javascript,Json,Phaser Framework,Tiled,我正在尝试使用平铺地图编辑器和相位器创建一个迷宫游戏。我使用本教程作为基础： 但是我的地图没有显示在我的浏览器中。我创建了一个tilemap并将其导出为json文件。代码中有一个错误，表示未捕获参考错误：未定义相量”。我遗漏了什么或做得不正确 代码如下： <!DOCTYPE HTML> <html> <head> <title>Maze Game</title> <meta charset=
未捕获参考错误：未定义相量 <!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>
迷宫游戏
var game=新的Phaser.game（640480，Phaser.AUTO，“game”）；
var PhaserGame=功能（游戏）{
this.map=null；
this.layer=null；
this.car=null；
这个.safetile=1；
这个.gridsize=32；
这个速度=150；
这个阈值=3；
这是旋转速度=150；
this.marker=新相量点（）；
this.turnPoint=新相量点（）；
this.directions=[null，null，null，null，null]；
this.opposities=[Phaser.NONE，Phaser.RIGHT，Phaser.LEFT，Phaser.DOWN，Phaser.UP]；
该电流=移相器上升；
this.turning=Phaser.NONE；
};
PhaserGame.prototype={
init：函数（）{
这个.physics.startSystem（Phaser.physics.ARCADE）；
},
预加载：函数（）{
//我们需要这个，因为资产在AmazonS3上
//如果在本地运行，请删除接下来的两行
this.load.baseURL='0http://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'）；
//注：图形版权归2015光子风暴有限公司所有。
},
创建：函数（）{
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'）；
本.车.锚.套（0.5）；
这个。物理。街机。使能（这个。汽车）；
this.cursors=this.input.keyboard.CreateCursorWorkeys（）；
这个。移动（移相器向下）；
},
检查键：函数（）{
if（this.cursors.left.isDown&&this.current！==Phaser.left）
{
检查方向（移相器左）；
}
else if（this.cursors.right.isDown&&this.current！==Phaser.right）
{
此。检查方向（相位器右侧）；
}
else if（this.cursors.up.isDown和this.current！==Phaser.up）
{
检查方向（移相器向上）；
}
else if（this.cursors.down.isDown&&this.current！==Phaser.down）
{
检查方向（移相器下降）；
}
其他的
{
//这迫使他们按住钥匙转弯
this.turning=Phaser.NONE；
}
},
检查方向：功能（转到）{
如果（this.turning==turnTo | | this.directions[turnTo]==null | | | this.directions[turnTo].index！==this.safetile）
{
//方向无效，如果它们已设置为向该方向转动
//或者那里没有瓷砖，或者瓷砖不是地砖
返回；
}
//检查他们是否想要转身，并且可以
if（this.current==this.antiphers[turnTo]）
{
这个。移动（转向）；
}
其他的
{
this.turning=转向；
this.turnPoint.x=（this.marker.x*this.gridsize）+（this.gridsize/2）；
this.turnPoint.y=（this.marker.y*this.gridsize）+（this.gridsize/2）；
}
},
转向：功能（）{
var cx=数学地板（this.car.x）；
var cy=数学地板（this.car.y）；
//这需要一个阈值，因为在高速时，由于坐标跳过，你无法转弯
如果（！this.math.fuzzyEqual（cx，this.turnPoint.x，this.threshold）| |！this.math.fuzzyEqual（cy，this.turnPoint.y，this.threshold））
{
返回false；
}
this.car.x=this.turnPoint.x；
this.car.y=this.turnPoint.y；
这个.汽车.车身.复位（这个.转折点.x，这个.转折点.y）；
这个。移动（这个。转动）；
this.turning=Phaser.NONE；
返回true；
},
移动：功能（方向）{
var速度=此速度；
如果（方向===移相器左| |方向===移相器上）
{
速度=-速度；
}
如果（方向===Phaser.LEFT | |方向===Phaser.RIGHT）
{
这个.car.body.velocity.x=速度；
}
其他的
{
这个.car.body.velocity.y=速度；
}
this.add.tween（this.car）.to（{angle:this.getAngle（direction）}，this.turnSpeed，“Linear”，true）；
电流=方向；
},
getAngle:函数（到）{
//关于脸？
if（this.current==this.antiphers[to]）
{
返回“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））
{
返回“-90”；
}
返回“90”；
},
更新：函数（）{
这个。物理。街机。碰撞（这个。车，这个。层）；
这个