利用Html开发简单游戏,HTML5与Canvas做一个简单的Sokoban游戏

【IT168技术】在简要说明如何使用HTML5 canvas元素和JavaScript创建简单的游戏之后，我们现在需要写一个简单的Sokoban游戏。游戏的玩法是：将所有的箱子移动到指定标识的区域，游戏就结束了。

游戏规则是：

箱子只能推，不能拉

一次只能移动一个箱子

我们需要创建以下JavaScript类：

•    主要 “Game” 类

•    “Map” 表示

•    Player

•    Map 统计 – 显示过关数量，移动/推动数量。

•    Classforevery “drawable” element :

o    Wall

o    Box

o    BoxonGoal

o    Floor

oEmptyspaceo    Goal

o    Image Repository – 次类将存储游戏中所有的图片。

Map表示法

在下列代码中，所有地图都被存储在XML文件中，如下：

<?xml version='1.0'?>######     ##$   ####   $###   $ $ #### # ## #===#######     # ## #####   ..## $   $                   ..###### ### #@##   ..##         ################....

特殊字符的解释如下：

•    ‘#’ – wall

•    ‘$’ – box

•    ‘ ‘or‘=’ –emptyspace•    ‘ ‘ – Floor

•    ‘@’ – player

•    ‘.’ – goal

•    ‘*’ – boxongoal

•    ‘+’ – playerongoal

我们为所有绘图元素创建一个基类：

functionDrawableElement() {

this.GetImage=function() {//implement this method in yoursub-classifyour elementisrepresented by image//this should return an Imageobjectreturnnull;

}

this.GetFillStyle=function() {//implement this method in yoursub-classifyour elementisrepresented by filled rectangle//this should return canvas"fillStyle"stringreturnnull;

}

this.ImageRepository=null;

}

子类的样例如下：

functionFloor(){

this.GetImage=function() {

return this.ImageRepository.Floor;

}

}

JavaScript写法如下：

Floor.prototype=newDrawableElement();

Floor.prototype.constructor=Floor;

我们使用非常简单的WCF来返回游戏对应的某个级别。你也可以将每一级存为一个单独的XML文件，将AJAX URL的参数改为你自己的XML文件对应的URL路径，如下：

“http:///level_” + levelNumber + “.xml”,

使用jQuery既可以通过Web Service，也可以直接访问该XML。

$.ajax({

type:"GET",

url:"http://localhost/SokobanWCF/SokobanService.svc/GetMap/"+levelNumber,

dataType:"xml",

success: this.ParseXmlMap,

context: this

});

jQuery对于解析XML文档非常有用，以下代码展示如何构造一个地图(ParseXmlMap方法的一部分)

$(xml).find("Row").each(function() {

var wall=false;

var row=$(this).text();for(var x=0; x=row.length) {

mapRef[x][y]=newEmpty();

}else{

switch (row[x]) {case""://ifwe had wall already that mean we needtoinsert a Floor element,//forEmptyelements that are between wallsonsome maps we are using'=' characterif(wall) {

mapRef[x][y]=newFloor();

}else{

mapRef[x][y]=newEmpty();

}

break;case"#":

mapRef[x][y]=newWall();

wall=true;

break;case"$":

mapRef[x][y]=newBox();

break;

(...)

我们这里使用二位数组来表示Map(地图)与Level(游戏等级)的映射关系。首先，我们迭代XML元素，然后再迭代Row元素中的每一个字符。

鉴于XML文档的下载与解析是费时的，这里我们给Map对象一个Loaded标记，这样来判断XML文档是否解析完毕以及地图是否准备就绪。在Game类的LoadContent方法，我们设置一个计时器，来检查地图是否就绪(每50ms检查一次)：

this.InitialUpdateDraw=setInterval(this.InitialUpdateRun, this.CheckInterval);

InitialUpdateRun 方法如下 :

this.InitialUpdateRun=function(ev) {if(_map.Loaded&&_imageRepository.Loaded()) {

document.sokobanGame.Update(ev);

document.sokobanGame.Draw();//we don't need timer anymoreclearInterval(document.sokobanGame.InitialUpdateDraw);

}

}

之所以这样做，是因为但某一游戏等级被加载时，我们需要更新游戏变量，并显示游戏级别。之后，用户可以根据需要选择调用游戏的Update与Draw等方法。

Map对象的Updated方法非常简单。我们只需要检查游戏结束的条件，然后更新Move与Push操作的数量即可。

this.Update=function() {//checkforendgame conditionsif(this._goals>0&&this._goalsAchived==this._goals) {

this.Finished=true;

}

_levelStatistics.Update();

}

最后是MapDraw方法。由于有了DrawableElement基类，通过继承，我们只需要迭代二位数组，既可以为每一个元素正确绘制图片。这也是正式JavaScript对于多态的实现。

this.Draw=function(canvasContext) {

var xCanvasPos=20;

var yCanvasPos=20;

var tileSize=30;for(var y=0; y

xCanvasPos=20;for(var x=0; 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;

}//thisisusedtoproperly position level statistics accordingtothe level

this.OnScreenWidht=xCanvasPos;

this.OnScreenHeight=yCanvasPos;

_levelStatistics.Draw(canvasContext);

}

Player movement

Player movement操作由事件keyup处理。这里我使用WASD按钮处理用户移动事件。W = up, S = Down, A = Left, D = Right.

this.KeyCheck=function(event) {

var KeyID=event.keyCode;

switch (KeyID) {case87://W

this.Move(this.MoveDirection.Up);

break;case65://A

this.Move(this.MoveDirection.Left);

break;case68://D

this.Move(this.MoveDirection.Right);

break;case83://S

this.Move(this.MoveDirection.Down);

break;

}

}

很显然，用户不可能移动两个箱子，或者穿墙。我们需要一个方法来保证用户移动的规则是正确的。

this.ValidateMove=function(targetCell, nextCell) {

var posToMove=targetCell.constructor;if(posToMove==Wall) {//wallisnext, player cannot move there

returnfalse;

}

var nextObject=nextCell.constructor;if((posToMove==Box || posToMove==BoxOnGoal)&&(nextObject==Wall || nextObject==Box || nextObject==BoxOnGoal)) {//player attemptstopush box,ifthenextelement after the boxiswalloranother box – player cannot move

returnfalse;

}

returntrue;

}

这里比较有意思的是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个经典级别。用户通过一次就能打通关的几率应该不大。

好了，大功告成。