【IT168技术】在简要说明如何使用HTML5 canvas元素和JavaScript创建简单的游戏之后，我们现在需要写一个简单的Sokoban游戏。游戏的玩法是：将所有的箱子移动到指定标识的区域，游戏就结束了。
游戏规则是：
箱子只能推，不能拉
一次只能移动一个箱子
更多关于Sokoban的信息，请参见http://en.wikipedia.org/wiki/Sokoban
我们需要创建以下JavaScript类：
• “Map” 表示
• Player
• Map 统计 – 显示过关数量，移动/推动数量。
• Class for every “drawable” element :
o Wall
o Box
o Box on Goal
o Floor
o Empty space
o Goal
o Image Repository – 次类将存储游戏中所有的图片。
Map表示法
在下列代码中，所有地图都被存储在XML文件中，如下：
<Levels>
<Level No="1" Width="19" Height="11">
<Row> #####</Row>
<Row> # #</Row>
<Row> #$ #</Row>
<Row> ### $##</Row>
<Row> # $ $ #</Row>
<Row>### # ## #===######</Row>
<Row># # ## ##### ..#</Row>
<Row># $ $ ..#</Row>
<Row>##### ### #@## ..#</Row>
<Row> # #########</Row>
<Row> #######</Row>
</Level>
....
</Levels>
特殊字符的解释如下：
• ‘$’ – box
• ‘ ‘ or ‘=’ – empty space
• ‘ ‘ – Floor
• ‘@’ – player
• ‘.’ – goal
• ‘*’ – box on goal
• ‘+’ – player on goal
我们为所有绘图元素创建一个基类：
this.GetImage = function () {
//implement this method in your sub-class if your element is represented by image
//this should return an Image object
return null;
}
this.GetFillStyle = function () {
//implement this method in your sub-class if your element is represented by filled rectangle
//this should return canvas "fillStyle" string
return null;
}
this.ImageRepository = null;
}
子类的样例如下：
this.GetImage = function () {
return this.ImageRepository.Floor;
}
}
JavaScript写法如下：
Floor.prototype = new DrawableElement();
Floor.prototype.constructor = Floor;
我们使用非常简单的WCF来返回游戏对应的某个级别。你也可以将每一级存为一个单独的XML文件，将AJAX URL的参数改为你自己的XML文件对应的URL路径，如下：
“http:///level_” + levelNumber + “.xml”,
使用jQuery既可以通过Web Service，也可以直接访问该XML。
type: "GET",
url: "http://localhost/SokobanWCF/SokobanService.svc/GetMap/" + levelNumber,
dataType: "xml",
success: this.ParseXmlMap,
context: this
});
jQuery对于解析XML文档非常有用，以下代码展示如何构造一个地图(ParseXmlMap方法的一部分)
var wall = false;
var row = $(this).text();
for (var x = 0; x < mapWidth; x++) {
// some rows are shorter than map width - fill rest with Empty elements
if (x >= row.length) {
mapRef[x][y] = new Empty();
} else {
switch (row[x]) {
case " ":
// if we had wall already that mean we need to insert a Floor element,
// for Empty elements that are between walls on some maps we are using '=' character
if (wall) {
mapRef[x][y] = new Floor();
}
else {
mapRef[x][y] = new Empty();
}
break;
case "#":
mapRef[x][y] = new Wall();
wall = true;
break;
case "$":
mapRef[x][y] = new Box();
break;
(...)
我们这里使用二位数组来表示Map(地图)与Level(游戏等级)的映射关系。首先，我们迭代XML元素，然后再迭代Row元素中的每一个字符。
鉴于XML文档的下载与解析是费时的，这里我们给Map对象一个Loaded标记，这样来判断XML文档是否解析完毕以及地图是否准备就绪。在Game类的LoadContent方法，我们设置一个计时器，来检查地图是否就绪(每50ms检查一次)：
InitialUpdateRun 方法如下 :
this.InitialUpdateRun = function (ev) {
if (_map.Loaded && _imageRepository.Loaded()) {
document.sokobanGame.Update(ev);
document.sokobanGame.Draw();
//we don't need timer anymore
clearInterval(document.sokobanGame.InitialUpdateDraw);
}
}
之所以这样做，是因为但某一游戏等级被加载时，我们需要更新游戏变量，并显示游戏级别。之后，用户可以根据需要选择调用游戏的Update与Draw等方法。
Map对象的Updated方法非常简单。我们只需要检查游戏结束的条件，然后更新Move与Push操作的数量即可。
//check for end game conditions
if (this._goals > 0 && this._goalsAchived == this._goals) {
this.Finished = true;
}
_levelStatistics.Update();
}
最后是MapDraw方法。由于有了DrawableElement基类，通过继承，我们只需要迭代二位数组，既可以为每一个元素正确绘制图片。这也是正式JavaScript对于多态的实现。
var xCanvasPos = 20;
var yCanvasPos = 20;
var tileSize = 30;
for (var y = 0; y < this._height; y++) {
xCanvasPos = 20;
for (var x = 0; x < this._width; x++) {
var img = this._map[x][y].GetImage();
if (img != null) {
// draw image
canvasContext.drawImage(img, xCanvasPos, yCanvasPos);
} else {
// draw rectangle
canvasContext.fillStyle = this._map[x][y].GetFillStyle();
canvasContext.fillRect(xCanvasPos, yCanvasPos, tileSize, tileSize);
}
xCanvasPos += tileSize;
}
yCanvasPos += tileSize;
}
// this is used to properly position level statistics according to the level
this.OnScreenWidht = xCanvasPos;
this.OnScreenHeight = yCanvasPos;
_levelStatistics.Draw(canvasContext);
}
Player movement
Player movement操作由事件keyup处理。这里我使用WASD按钮处理用户移动事件。W = up, S = Down, A = Left, D = Right.
var KeyID = event.keyCode;
switch (KeyID) {
case 87: // W
this.Move(this.MoveDirection.Up);
break;
case 65: // A
this.Move(this.MoveDirection.Left);
break;
case 68: // D
this.Move(this.MoveDirection.Right);
break;
case 83: // S
this.Move(this.MoveDirection.Down);
break;
}
}
很显然，用户不可能移动两个箱子，或者穿墙。我们需要一个方法来保证用户移动的规则是正确的。
var posToMove = targetCell.constructor;
if (posToMove == Wall) {
// wall is next, player cannot move there
return false;
}
var nextObject = nextCell.constructor;
if ((posToMove == Box || posToMove == BoxOnGoal) && (nextObject == Wall || nextObject == Box || nextObject == BoxOnGoal)) {
//player attempts to push box, if the next element after the box is wall or another box – player cannot move
return false;
}
return true;
}
这里比较有意思的是constructor属性。该属性表示的是一个用于创建对象的函数。那样，我们可以轻易地检查围绕Player都有哪些类型的元素。
在前面的章节中，我们创建Wall, Floor以及DrawableElement基类的同时，我也采取了下列继承的方式。
Floor.prototype = new DrawableElement();
Floor.prototype.constructor = Floor;
第二行非常重要。没有这一行，Floor对象的返回函数为DrawableElement。这样我们就不能调用以上所述的ValidateMove方法了。
这里我们忽略了改变玩家位置的所有的代码。实际上，代码仅仅简单的改变Player对象的位置，采取的方式的改变数组元素，通过demo页面我们可以查看相关源代码。
游戏通关后进入下一关
我们使用cook加载与保存前面所述的用户状态。完成通关后，我们插入cookie指定需要加载的游戏级别。LoadContent从cookie中读取数据，加载正确的地图。如此依赖，用户可以关闭浏览器，再打开时还原到上次通过状态。Cookie的加载与保存是又一个cookie插件完成的，它对应的网址http://plugins.jquery.com/project/cookie
这里我已经加入了“恭喜通过”字样的弹出窗口，表示用户已经完成了上一关。接着给出一个按钮，提示“进入下一关”。自动地图加载功能对我而言似乎不太友好。
我的sokoban版本包括40个经典级别。用户通过一次就能打通关的几率应该不大。
好了，大功告成。
