我们小时候常玩的魔板拼图游戏，在一个M*N的魔板中共有(M*N-1)张小块图片，和一个空白块；我们要利用这个空白块来移动这(M*N-1)张小块图片，使之拼成一张原始的完整的图片。

接下来就要详细讲解如何利用html5中的canvas来开发这样一个益智小游戏，下面我来简单地讲解一下游戏的开发思路。

1.首先我们来定义游戏中需要用到的一些全局配置变量

//全局配置变量var kBoardWidth = 4; //横向块数var kBoardHeight = 5; //纵向块数var kPieceWidth = 100; //每块的宽度var kPieceHeight = 100; //每块的高度var kPixelWidth = 1 + kBoardWidth * kPieceWidth; //游戏视野的宽度var kPixelHeight = 1 + kBoardHeight * kPieceHeight; //游戏视野的高度var exchangeTimes = 100; //随机对换次数

var gCanvasElement; //canvas元素节点var gDrawingContext; //canvas元素的context内容var gMoveCountElem; //移动步数元素节点var gMoveCount; //移动次数var gPieces; //小块图片数组var gNumPieces; //小块图片的张数

2.利用OOP(面向对象)的方法，创建一个Cell类，Cell类当中包含了每个小块图片的行列和内容信息：

//定义一个cell类，cell类包含了小块图片的信息function Cell(row,column,index)

{

this.row = row; //行信息 this.column = column; //列信息 this.index = index; //内容信息}

3.接下来可以开始初始化游戏了。

//初始化游戏function initGame(canvasElement,moveCountElement)

{

//若canvas元素节点不存在则创建canvas元素节点 if(!canvasElement)

{

canvasElement = document.createElement("canvas");

canvasElement.id = "puzzle";

document.body.appendChild(canvasElement);

}

//若记录步数记录节点不存在则创建步数记录节点 if(!moveCountElement)

{

moveCountElement = document.createElement("p");

document.body.appendChild(moveCountElement);

document.body.appendChild(moveCountElement);

}

//初始化参数 gCanvasElement = canvasElement;

gDrawingContext = gCanvasElement.getContext("2d");

gCanvasElement.width = kPixelWidth;

gCanvasElement.height = kPixelHeight;

gMoveCountElem = moveCountElement;

gMoveCount = 0;

newGame(); //载入新的游戏 //监听按键事件 document.οnkeydοwn=function(e)

{

//key接受到的键盘码，以下写法有更好的跨浏览器兼容性 var key=e.keyCode||e.which||e.charCode;

if(key==38 || key==87) movePiece("up"); //上 或者 W 被按下 if(key==40 || key==83) movePiece("down"); //下 或者 S 被按下 if(key==37 || key==65 ) movePiece("left"); //左 或者 A 被按下 if(key==39 || key==68 ) movePiece("right"); //右 或者 D 被按下 }

}

4.其他函数介绍

//开始新游戏function newGame()

{

gMoveCount = 0;

gMoveCountElem.innerHTML = gMoveCount;

gPieces = new Array(kBoardWidth*kBoardHeight-1);

for(var i=0; i

{

var row = parseInt(i/kBoardWidth);

var column = i-row*kBoardWidth;

gPieces[i]=new Cell(row,column,i); //创建小块方格元素 }

//创建最后一个空白图片块，index为-1 gPieces[kBoardWidth*kBoardHeight-1] = new Cell(kBoardHeight-1,kBoardWidth-1,-1); //空白的图片 gNumPieces = gPieces.length;

randExchange(); //随机打乱图片 gDrawingContext.clearRect(0, 0, kPixelWidth, kPixelHeight); //清除canvas原有内容 for(var i=0; i

drawBoard(); //绘制网格线}

//随机对换,用于打小块图片的次序function randExchange()

{

var temp1,temp2,temp3;

for(var i=0; i

{

temp1 = parseInt(kBoardWidth*kBoardHeight*Math.random());

temp2 = parseInt(kBoardWidth*kBoardHeight*Math.random());

//交换两个gPieces[temp1]，gPieces[temp2]的位置 temp3 = gPieces[temp1].column;

gPieces[temp1].column = gPieces[temp2].column;

gPieces[temp2].column = temp3;

temp3 = gPieces[temp1].row;

gPieces[temp1].row = gPieces[temp2].row;

gPieces[temp2].row = temp3;

}

}

//绘制网格线function drawBoard()

{

gDrawingContext.beginPath();

//绘制竖直网格线 for (var x = 0; x <= kPixelWidth; x += kPieceWidth) {

gDrawingContext.moveTo(0.5 + x, 0);

gDrawingContext.lineTo(0.5 + x, kPixelHeight);

}

//绘制水平网格线 for (var y = 0; y <= kPixelHeight; y += kPieceHeight) {

gDrawingContext.moveTo(0, 0.5 + y);

gDrawingContext.lineTo(kPixelWidth, 0.5 + y);

}

//设定样式并且绘制到屏幕上 gDrawingContext.strokeStyle = "#f00";

gDrawingContext.stroke();

}

//绘制图片function drawPiece(p)

{

var column = p.column;

var row = p.row;

var index = p.index;

var _row = parseInt(index/kBoardWidth);

var _column = index-_row*kBoardWidth;

var sy = _row*kPieceWidth;

var sx = _column*kPieceHeight ;

var dx = column * kPieceWidth;

var dy = row * kPieceHeight;

var pic = document.getElementById("pic");　　　　　　　//获取原图片资源gDrawingContext.drawImage(pic,sx,sy,kPieceWidth,kPieceHeight,dx,dy,kPieceWidth,kPieceHeight); //截取对应的小块图片，并且绘制到canvas中

}

//根据键盘事件来移动图片function movePiece(direction)

{

var emptyPieceNum = kBoardWidth*kBoardHeight-1; //得到空白图片的内容 var validMove = false; //是否为一次有效的移动

//向上移动 if(direction=='up')

if(gPieces[emptyPieceNum].row+1

for(var i=0; i

if(gPieces[i].column==gPieces[emptyPieceNum].column && gPieces[i].row==gPieces[emptyPieceNum].row+1)

{

gPieces[i].row-=1;

gPieces[emptyPieceNum].row+=1;

validMove = true;

break;

}

//向下移动 if(direction=='down')

if(gPieces[emptyPieceNum].row-1>=0)

for(var i=0; i

if(gPieces[i].column==gPieces[emptyPieceNum].column && gPieces[i].row==gPieces[emptyPieceNum].row-1)

{

gPieces[i].row += 1;

gPieces[emptyPieceNum].row -= 1;

validMove = true;

break;

}

//向左移动 if(direction=='left')

if(gPieces[emptyPieceNum].column+1

for(var i=0; i

if(gPieces[i].column==gPieces[emptyPieceNum].column+1 && gPieces[i].row==gPieces[emptyPieceNum].row)

{

gPieces[i].column -=1;

gPieces[emptyPieceNum].column += 1;

validMove = true;

break;

}

//向右移动 if(direction=='right')

if(gPieces[emptyPieceNum].column-1>=0)

for(var i=0; i

if(gPieces[i].column==gPieces[emptyPieceNum].column-1 && gPieces[i].row==gPieces[emptyPieceNum].row)

{

gPieces[i].column += 1;

gPieces[emptyPieceNum].column -= 1;

validMove = true;

break;

}

//如果是一次有效的移动，开始真正地移动 if(validMove)

{

//清楚canvas所有内容，开始重新绘制 gDrawingContext.clearRect(0, 0, kPixelWidth, kPixelHeight);

for(var i=0; i

drawPiece(gPieces[i]);

drawBoard();

gMoveCount++; //移动步数加1 gMoveCountElem.innerHTML = gMoveCount; //修改显示移动步数 }

}

整个游戏的js代码就是这么多了，一共只有不到200多行的代码，我们就实现了一个有趣的益智小游戏。游戏在chrome中运行效果：

当然了，你还可以发挥你的聪明才智把这个游戏做的更好，比如可以增加难度设置，关卡设置等一系列的内容，在这里我只是演示游戏的工作原理，从而来说明html5中的canvas属性是多么的方便和强大。