html 拼图游戏,HTML5人物拼图游戏

7.1  人物拼图游戏介绍

拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图(游戏结束)。

在“游戏”中，单击滑块选择游戏难易，“容易”为3行3列拼图游戏，中间为一个4行4列拼图游戏，“难”为5行5列拼图游戏。拼块以随机顺序排列，玩家用鼠标单击空白块四周的来交换它们位置，直到所有拼块都回到原位置。拼图游戏运行结果如图7-1。

7.2  程序设计的思路

HTML5可以把图片整合到网页中。使用canvas元素可以在这个空白的画布上填充线条，载入图片文件，甚至动画效果。这里制作拼图游戏用来展示HTML5 canvas的图片处理能力。

游戏程序首先显示以正确顺序排列的图片缩略图，根据玩家设置的分割数，将图片分割成相应tileCount行列数的拼块，并按顺序编号。动态生成一个大小tileCount*tileCount的数组boardParts，存放用0，1，2到tileCount*tileCount-1的数，每个数字代表一个拼块(例如4*4的游戏拼块编号如图7-2所示)。

游戏开始时，随机打乱这个数组boardParts，假如boardParts[0]是5则在左上角显示编号是5的拼块。根据玩家用鼠标点击的拼块和空白块所在位置，来交换该boardParts数组对应元素，最后判断元素排列顺序来判断是否已经完成游戏。

7.3  程序设计的步骤

1. 游戏页面

拼图游戏

.picture {

border:1px solid black;

}

拼图游戏

容易

难

在网页中使用canvas标记用来创建画板。

canvas的宽和高使用像素为单位。如果这两个属于没有被指定，它们的默认的宽度为：300px，高度为：150px。

网页中

包括了另一个HTML5标记：range input，这个标记可以让用户拖放滑块选择一个数值。这里设置滑块最小值为3，最大值为5。滑块值为3表明拼图游戏是3行3列的，滑块值为4表明拼图游戏是4行4列的，滑块值为5表明拼图游戏是5行5列的。

显示原图defa.jpg的缩小图供玩家参照移动拼块。

2. sliding.js文件

在页面上画图需要使用canvas的上下文环境ÿ