基于HTML5的拼图游戏的设计与实现

目录

1界面设计

1.1整体布局设计

1.2游戏布局设计

2实现游戏逻辑

2.1准备工作

2.2初始化拼图画面

2.3通过鼠标单击移动拼图

2.4游戏计时功能的实现

3游戏成功与重新开始

3.1游戏成功的判定与显示效果的实现

3.2重新开始功能的实现

4游戏计步器的实现

5背景音乐的添加

5.1媒体文件的载入

具体代码如下：

基于HTML5的拼图游戏的设计与实现

1界面设计

1.1整体布局设计

首先直接使用一个区域元素<div>在页面背景上创建游戏界面，在其内部添加标题、水平线并预留游戏空间。相关HTML5代码片段如下：

<body>

<h3>HTML5画布综合项目之拼图游戏</h3>

<hr />

</div>

</body>

该段代码为<div>元素定义了id="container",以便可以使用CSS的ID选择器进行样式设置。

本例使用CSS外部样式表规定页面样式。在本地css文件夹中创建pintu.css 文件,并在<head>首尾标签中声明对CSS文件的引用。相关HTML5代码片段如下:

<head>

在CSS文件中为id="container"的<div>标签设置样式,具体样式要求如下。

颜色:背景颜色为白色;

尺寸:宽度为600像素;

边距:各边的内边距为20像素,各边的外边距定义为auto, 以便可以居中显示;

文本:居中显示,采用默认字体;

特殊:使用CSS3技术为其定义边框阴影效果,在其右下角有黑色投影。

1.2游戏布局设计

下面主要介绍如何在页面上创建完整的游戏内容,包括游戏计时、共计步数、游戏画布和“重新开始”按钮4个部分。

首先在<div>元素的预留区域添加一个id="timeBox"的<div>元素,用于显示游戏计时。在其中先初始化总时间为00:00:00,并将时间文本嵌套在一个id="time"的<span>元素中,以便后续可以使用JavaScript代码动态变更时间内容。相关HTML5代码片段如下:

<body>

<hr />

其中<div>和<span>标签的id名称均可以根据实际情况进行自定义。

在CSS文件中为id="timeBox"的<div>进行样式设置。

边距:上、下外边距为10像素,左、右外边距为0像素;

字体:字体大小为18像素,采用默认字体风格。

2实现游戏逻辑

本节主要介绍如何实现游戏逻辑,包括以下内容:

（1）声明画布对象和加载图片素材;

（2）将图片素材分割并打乱排序;

（3）实现鼠标单击移动拼图方块;

（4）实现游戏计时功能。

2.1准备工作

首先获取画布和2D的context对象,以便可以进行画布的绘制工作。本例采用了内部JS代码,相关JavaScript代码如下:

//获取画布对象

var c = document.getElementById("myCanvas");

//获取2D的context对象

var ctx = c.getContext("2d");

接下来加载拼图所需的素材图片。当前使用的图片来源于本地 image 文件夹中的pintu.jpg。相关JavaScript代码如下:

//声明拼图的图片素材来源

var img = new Image();

img.src = "images/pintu.jpg";

//当图片加载完毕时

img.onload = function () {

//打乱拼图的位置

generateNum();

//在画布上绘制拼图

drawCanvas();

};

为了保证游戏在图片正常加载完毕后才执行,需要将其写在onload事件的回调函数中。

2.2初始化拼图画面

本例需要将素材图片分割成3行3列的9个小方块,并打乱顺序放置在画布上。为了在游戏过程中便于查找当前区域该显示图片中的哪一个方块,首先为原图片上的9个小方块区域进行编号采用了两位数字为原图片素材上的方块进行标识,其中十位数表示第几行,个位数表示第几列,均从0开始计数。在JavaScript中声明一个二维数组用于记录这些方块图片的标识。相关代码如下:

//定义初始方块位置

var num = [

[0, 1, 2, 3],

[10, 11, 12, 13],

[20, 21, 22, 23],

[30, 31, 32, 33],

];

每3个元素为一组表示其中一行的方块标识。其中,二维数组的下标表示画布上的行与列,二维数组的数值代表原始图片上的切割位置,同样都是从O开始计数的。

在初始情况下尚未打乱拼图方块,因此当前该二维数组对应的标识为最后所有拼图都处于正确位置时的效果。例如num[0][0]指的是画布上第一行第一个方块的位置,其对应的值当前是00,表示该位置的方块图片是从素材图片上第一行第一个方块的位置切割下来的。在JavaScript中声明自定义名称的generateNum0方法用于打乱拼图顺序。思路是在这16个数值中随机抽取两个数据,然后对调它们的位置。在进行足够多次数的对调后基本可以实现随机打乱的效果。

JavaScript中generateNum()方法的完整代码如下:

img.onload = function () {

//打乱拼图的位置

generateNum();

//在画布上绘制拼图

drawCanvas();

};

//打乱拼图的位置

function generateNum() {

for (var i = 0; i < 50; i++) {

var i1 = Math.round(Math.random() * 3);

var j1 = Math.round(Math.random() * 3);

var i2 = Math.round(Math.random() * 3);

var j2 = Math.round(Math.random() * 3);

var temp = num[i1][j1];

num[i1][j1] = num[i2][j2];

num[i2][j2] = temp;

}

当前使用for循环进行了50次打乱效果,可以根据实际情况更改循环次数。每次使用 Math.random(方法随机产生两个数值的下标,然后对其进行处理,使得最终的随机结果必须在[0,2]区间,接着将二维数组中的这两个位置上的值进行交换。

在JavaScript 中声明自定义名称的drawCanvas(方法用于在画布上绘制打乱顺序后的图片。使用本章介绍的drawImage0方法对图片进行切割,并放置在画布的指定位置上。相关JavaScript代码如下:

//定义拼图小方块的边长

var w = 100;

//绘制拼图

function drawCanvas() {

//清空画布

ctx.clearRect(0, 0, 400, 400);

//使用双重for循环绘制4*4的拼图

for (var i = 0; i < 4; i++) {

for (var j = 0; j < 4; j++) {

if (num[i][j] != 33) {

var row = parseInt(num[i][j] / 10);

var col = num[i][j] % 10;

ctx.drawImage(img, col * w, row * w, w, w, j * w, i * w, w, w);

}

上述代码首先定义了切割后小方块的边长为100像素,在后面多处会用到。接着使用 clearRect(方法清空画布,以免有重叠现象。然后使用双重for循环绘制4×4的拼图,其中i表示行、j表示列。遍历二维数组num, 然后根据当前位置上数值的十位数和个位数分析该切割原素材图片上的区域。为了保留一个空白区域用于移动图片,对数值为22的所在区域不绘制图片。

其中drawImage(方法中的参数1表示需要切割的图片素材;参数2和3表示的是切割的起始点位置坐标;参数4和5表示的是切割的小方块的宽度和高度,这里均为w; 参数 6和7表示的是在画布绘制的起始位置坐标;参数8和9指的是切割下来的图片在画布中缩放的宽度和高度。这里由于素材图片和画布均为400像素的宽高,所以仍然为w, 表示原图大小。

将generateNum(和drawCanvas(方法添加到图片img的onload事件回调函数中即可实现拼图画面。相关JavaScript代码如下:

//当图片加载完毕时

img.onload = function () {

//打乱拼图的位置

generateNum();

//在画布上绘制拼图

drawCanvas();

};

运行效果如图4.2.2 1所示：

图4.2.2 1拼图游戏的初始画面

由上图可知，图游戏的初始画面已经初步实现。由于每次开局的拼图方块的顺序为随机打乱,所以运行时可能会产生和截图不一样的效果。

2.3通过鼠标单击移动拼图

游戏的规则是使用鼠标单击的方式来移动拼图方块。当鼠标单击了需要移动的方块时,如果该方块相邻的地方存在空白区域,则该方块移动到空白区域的位置。如果鼠标直接单击了画布中的空白区域或单击的区域已经超出了画布范围则无效。

首先为画布对象声明鼠标单击事件onmousedown 的回调函数,一旦单击了鼠标,则立刻获取鼠标在画布上的坐标。

2.4游戏计时功能的实现

在JavaScript中声明自定义函数getCurrentTimeQ用于进行游戏计时。当开始游戏时,计时功能自动开启并每秒执行一次该函数,将秒数增加1。

JavaScript中getCurrentTime0方法的完整代码如下:

var time = document.getElementById("time");

//初始化计时器的时、分、秒

var h = 0,

m = 0,

s = 0;

function getCurrentTime() {

//将时、分、秒转换为整数以便进行自增或赋值

s = parseInt(s);

m = parseInt(m);

h = parseInt(h);

//每秒变量s先自增1

s++;

if (s == 60) {

//如果秒已经达到60,则归0

s = 0;

//分钟自增1

m++;

}

if (m == 60) {

//如果分钟也达到60，则归0

m = 0;

//小时自增1

h++;

}

//修改时、分、秒的显示效果，使其保持两位数

if (s < 10) s = "0" + s;

if (m < 10) m = "0" + m;

if (h < 10) h = "0" + h;

//将当前计时的时间显示在页面上

time.innerHTML = h + ":" + m + ":" + s;

}

首先初始化当前计时的时、分、秒均为0,然后使用parseInt(方法将其转换为数值以便进行计算和赋值。计时的思路是每次执行该函数方法首先将秒数自增1,然后判断当前秒数是否已达到了60,如果是则归0,并将分钟自增1。以此类推,直到小时被增加。最后将文字内容处理后显示在游戏界面的计时区域。

此时还不能进行自动计时,需要在JavaScript中使用setInterval()方法每隔1秒钟调用getCurrentTime0方法一次,以实现更新效果。写法如下:

//每隔1000毫秒(1秒)刷新一次时间

var timer = setInterval("getCurrentTime()", 1000);

这里使用了自定义名称的变量 timer 保存当前的计时器,以便可以在指定的时间使用clearInterval(timer)方法停止该计时器。运行效果如图2.4 1所示：

图2.4 1拼图游戏的计时效果

由上图可知，当前计时功能已实现。每当刷新当前页面,计时都会伴随游戏一起重新开始。

3游戏成功与重新开始

本节主要介绍如何判定游戏结束,包括以下内容:

（1）游戏成功的判定与显示效果的实现;

（2）重新开始功能的实现。

3.1游戏成功的判定与显示效果的实现

在JavaScript中声明自定义函数checkWin(用于进行游戏成功的判断。使用双重for循环遍历所有方块,对比方块的标记值和位置是否能对应。当游戏成功时,应该所有方块的行和列对应其数值中的十位数和个位数。

JavaScript中checkWinQ函数的相关代码如下:

//胜利的判断

function checkWin() {

//使用双重for循环遍历整个数组

for (var i = 0; i < 4; i++) {

for (var j = 0; j < 4; j++) {

//如果有其中一块方块的位置不对

if (num[i][j] != i * 10 + j) {

//返回假

return false;

}

//返回真

return true;

}

checkWinQ函数会根据判断结果返回一个布尔值。如果所有拼图方块的位置正确,返回真(true),否则返回假(false)。

将checkWinQ函数使用到鼠标单击事件的监听回调函数中。相关代码片段修改后如下:

//监听鼠标单击事件

c.onmousedown = function (e) {

//获取画布边界

var bound = c.getBoundingClientRect();

//获取鼠标在画布上的坐标位置(x,y)

var x = e.pageX - bound.left;

var y = e.pageY - bound.top;

//将x和y换算成几行几列

var row = parseInt(y / 100);

var col = parseInt(x / 100);

//如果当前单击的不是空白区域

if (num[row][col] != 33) {

//移动单击的方块

detectBox(row, col);

//重新绘制画布

drawCanvas();

//检查游戏是否成功

var isWin = checkWin();

//如果游戏成功

if (isWin) {

//清除计时器

clearInterval(timer);

//绘制完整图片

ctx.drawImage(img, 0, 0);

//设置字体为serif,加粗、68号字

ctx.font = "bold 68px serif";

//设置填充颜色为红色

ctx.fillStyle = "red";

//显示提示语句

ctx.fillText("游戏成功!", 20, 150);

}

};

每次重新绘制画布后调用 checkWin0方法检查游戏是否已成功,如果成功则使用 clearInterval(方法清除计时器。然后在画布上绘制完整图片,并使用 fillText0方法绘制出 “游戏成功”的字样。

3.2重新开始功能的实现

为“重新开始”按钮提供单击事件οnclick="restartGameQ",其中 restartGame0方法名称可自定义,该函数需要在JavaScript中声明。

“重新开始”按钮添加单击事件后的相关HTM5代码片段如下:

在JavaScript中声明restartGame(方法,用于重新开始游戏,包括计时器重启、重新打乱拼图顺序和重新绘制画布内容3个部分。相关JavaScript代码片段如下:

//重新开始游戏

function restartGame() {

//清除计时器

clearInterval(timer);

//时间清零

s = 0;

m = 0;

h = 0;

//次数清零

nb = 0;

//重新显示时间

getCurrentTime();

timer = setInterval("getCurrentTime()", 1000);

//重新打乱拼图顺序

generateNum();

//绘制拼图

drawCanvas();

}

其中重新打乱拼图顺序和重新绘制拼图均可分别调用之前已实现的函数 generateNumQ和drawCanvasQ。运行效果如图3.2 1所示：

图3.2 1游戏重新开始功能

当游戏成功时单击“重新开始”按钮可以得到一个新的打乱顺序的拼图布局,并且计时器、计步器也重新从0开始计时。至此,拼图游戏的全部功能均已实现。

4游戏计步器的实现

在html的<div class=timeBox>盒子后面添加number盒子：

在js中添加鼠标点击事件，计数器的初始值为0，,拼图的游戏过程中每点击一次拼图的画布，计数器的次数便累加一次，以此达到游戏步数计步器的作用：

//计次

var nb = 0;

计数器初始化为0

//显示次数

function getNumber() {

var N = document.getElementById("n");

N.innerHTML = nb;

}

//每隔10毫秒刷新一次数

var t = setInterval("getNumber()", 10);

具体效果如图5 1所示：

图5 1 计步器实现效果图

5背景音乐的添加

5.1媒体文件的载入

音乐文件的载入使用HTML5音频的<audio>标签，因为需要使用自定义的播放器按钮控件，所以不要添加controls属性，以禁用浏览器自带的音乐播放器。相关HTML5代码片段如下：

<audio id="audio"

src="images/单依纯-爱的回归线(Live).mp3"

Preload controls loop>

对不起,您的浏览器不支持HTML5音频播放。

</audio>

</div>

在<audio>标签的src属性中规定了默认初始载入的媒体文件路径一一本地music文件夹中的单依纯-爱的回归线(Live).mp3文件。为方便后续的JavaScript调用，为<audio>标签定义了id名称为audio，该id名称可自定义。在<audio>首尾标签之间加入了提示语句，当浏览器版本过低不支持HTML5音频时会显示该内容。具体效果如图.6.所示：

图6 音乐播放器实现效果

具体代码如下：

HTML页代码：

<!DOCTYPE html>

<head>

</head>

<body>

<hr />

对不起，您的浏览器不支持HTML5画布API。</canvas

<div>

</div>

<audio

id="audio"

src="images/单依纯-爱的回归线(Live).mp3"

preload

controls

loop

对不起,您的浏览器不支持HTML5音频播放。

</audio>

</div>

//获取画布对象

var c = document.getElementById("myCanvas");

//获取2D的context对象

var ctx = c.getContext("2d");

//定义拼图小方块的边长

var w = 100;

//计次

var nb = 0;

//定义初始方块位置

var num = [

[0, 1, 2, 3],

[10, 11, 12, 13],

[20, 21, 22, 23],

[30, 31, 32, 33],

];

//声明拼图的图片素材来源

var img = new Image();

img.src = "images/pintu.jpg";

//当图片加载完毕时

img.onload = function () {

//打乱拼图的位置

generateNum();

//在画布上绘制拼图

drawCanvas();

};

//打乱拼图的位置

function generateNum() {

for (var i = 0; i < 50; i++) {

var i1 = Math.round(Math.random() * 3);

var j1 = Math.round(Math.random() * 3);

var i2 = Math.round(Math.random() * 3);

var j2 = Math.round(Math.random() * 3);

var temp = num[i1][j1];

num[i1][j1] = num[i2][j2];

num[i2][j2] = temp;

}

//绘制拼图

function drawCanvas() {

//清空画布

ctx.clearRect(0, 0, 400, 400);

//使用双重for循环绘制4*4的拼图

for (var i = 0; i < 4; i++) {

for (var j = 0; j < 4; j++) {

if (num[i][j] != 33) {

var row = parseInt(num[i][j] / 10);

var col = num[i][j] % 10;

ctx.drawImage(img, col * w, row * w, w, w, j * w, i * w, w, w);

}

//监听鼠标单击事件

c.onmousedown = function (e) {

//获取画布边界

var bound = c.getBoundingClientRect();

//获取鼠标在画布上的坐标位置(x,y)

var x = e.pageX - bound.left;

var y = e.pageY - bound.top;

//将x和y换算成几行几列

var row = parseInt(y / 100);

var col = parseInt(x / 100);

//如果当前单击的不是空白区域

if (num[row][col] != 33) {

//移动单击的方块

detectBox(row, col);

//重新绘制画布

drawCanvas();

//检查游戏是否成功

var isWin = checkWin();

//如果游戏成功

if (isWin) {

//清除计时器

clearInterval(timer);

//绘制完整图片

ctx.drawImage(img, 0, 0);

//设置字体为serif,加粗、68号字

ctx.font = "bold 68px serif";

//设置填充颜色为红色

ctx.fillStyle = "red";

//显示提示语句

ctx.fillText("游戏成功!", 20, 150);

}

};

//移动单击的方块

function detectBox(i, j) {

//如果单击的方块不在最上面行

if (i > 0) {

//检测空白区域是否在当前方块的正上方

if (num[i - 1][j] == 33) {

//交换空白区域与当前方块的位置

num[i - 1][j] = num[i][j];

num[i][j] = 33;

nb++;

return;

}

//如果单击的方块不在最下面一行

if (i < 3) {

//检测空白区域是否在当前方块的正下方

if (num[i + 1][j] == 33) {

//交换空白区域与当前方块的位置

num[i + 1][j] = num[i][j];

num[i][j] = 33;

nb++;

return;

}

//如果单击的方块不在最左边一列

if (j > 0) {

//检测空白区域是否在当前方块的左边

if (num[i][j - 1] == 33) {

//交换空白区域与当前方块的位置

num[i][j - 1] = num[i][j];

num[i][j] = 33;

nb++;

return;

}

//如果单击的方块不在最右边一列

if (j < 3) {

//检测空白区域是否在当前方块的右边

if (num[i][j + 1] == 33) {

//交换空白区域与当前方块的位置

num[i][j + 1] = num[i][j];

num[i][j] = 33;

nb++;

return;

}

//胜利的判断

function checkWin() {

//使用双重for循环遍历整个数组

for (var i = 0; i < 4; i++) {

for (var j = 0; j < 4; j++) {

//如果有其中一块方块的位置不对

if (num[i][j] != i * 10 + j) {

//返回假

return false;

}

//返回真

return true;

}

var time = document.getElementById("time");

//初始化计时器的时、分、秒

var h = 0,

m = 0,

s = 0;

function getCurrentTime() {

//将时、分、秒转换为整数以便进行自增或赋值

s = parseInt(s);

m = parseInt(m);

h = parseInt(h);

//每秒变量s先自增1

s++;

if (s == 60) {

//如果秒已经达到60,则归0

s = 0;

//分钟自增1

m++;

}

if (m == 60) {

//如果分钟也达到60，则归0

m = 0;

//小时自增1

h++;

}

//修改时、分、秒的显示效果，使其保持两位数

if (s < 10) s = "0" + s;

if (m < 10) m = "0" + m;

if (h < 10) h = "0" + h;

//将当前计时的时间显示在页面上

time.innerHTML = h + ":" + m + ":" + s;

}

//重新开始游戏

function restartGame() {

//清除计时器

clearInterval(timer);

//时间清零

s = 0;

m = 0;

h = 0;

//次数清零

nb = 0;

//重新显示时间

getCurrentTime();

timer = setInterval("getCurrentTime()", 1000);

//重新打乱拼图顺序

generateNum();

//绘制拼图

drawCanvas();

}

//显示次数

function getNumber() {

var N = document.getElementById("n");

N.innerHTML = nb;

}

//每隔1000毫秒(1秒)刷新一次时间

var timer = setInterval("getCurrentTime()", 1000);

//每隔10毫秒刷新一次数

var t = setInterval("getNumber()", 10);

</script>

</body>

</html>

css样式代码：

body{

background-color: silver;

}

#container{

text-align: center;

margin: auto;

padding: 0;

background-color: white;

width: 800px;

padding: 20px;

box-shadow: 10px 10px 15px black;

}

.timeBox{

margin: 10px 0;

font-size: 18px;

}

button{

width: 200px;

height: 50px;

margin: 10px 0;

border: 0;

font-size: 25px;

font-weight: bold;

color: white;

outline: none;

background-color: lightcoral;

}

button:hover{

background-color: coral;

}

#BGM {

display: inline-block;

margin: 10px auto;

}

#BGM .yinyue text {

font-family: "华文行楷";

font-size: 28px;

margin-left: 10px;

}

最终效果图：