手把手教你使用CanvasAPI打造一款拼图游戏

一、canvas简介

canvas是HTML5提供的一种新标签,双标签;

HTML5 canvas标签元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成;

canvas标签只是图形容器，必须使用脚本来绘制图形;

Canvas是一个矩形区域的画布，可以用JavaScript在上面绘画;

二、案例目标

我们今天的目标是使用HTML5画布技术制作一款拼图小游戏，要求将图像划分为3*3的9块方块并打乱排序，用户可以移动方块拼成完整图片。

效果如下所示:

三、程序流程

3.1 HTML静态页面布局

1. "container">
2. --页面标题-->

3. HTML5画布综合项目之拼图游戏

4. --水平线-->

5. ---

6. --游戏内容-->
7. --游戏时间-->
8. "timeBox">
9. 共计时间："time">00:00:00
11. --游戏画布-->
12. "myCanvas"width="300"height="300"style="border:1pxsolid">
13. 对不起，您的浏览器不支持HTML5画布API。
15. --游戏按钮-->
17. "restartGame()">
18. 重新开始

效果如下所示:

我们可以看到页面的大致结构是已经显现出来了,就是骨架已经搭建好了,现在我们要使用css强化样式;

3.2 CSS打造页面样式

整体背景设置

1. body{
2. background-color:silver;/*设置页面背景颜色为银色*/
3. }

游戏界面样式设置

1. #container{
2. background-color:white;
3. width:600px;
4. margin:auto;
5. padding:20px;
6. text-align:center;
7. box-shadow:10px10px15pxblack;
8. }

游戏时间面板样式设置

1. #timeBox{
2. margin:10px0;
3. font-size:18px;
4. }

游戏按钮样式设置

1. button{
2. width:200px;
3. height:50px;
4. margin:10px0;
5. border:0;
6. outline:none;
7. font-size:25px;
8. font-weight:bold;
9. color:white;
10. background-color:lightcoral;
11. }

鼠标悬浮时的按钮样式设置

1. button:hover{
2. background-color:coral;
3. }

设置好界面整体样式之后我们得到完整的界面,如下所示:

可以看到整体的静态界面已经搭建出来了

3.3 js构建交互效果

3.3.1 对象的获取以及图片的设置

目标对象的获取

1. varc=document.getElementById('myCanvas');//获取画布对象
2. varctx=c.getContext('2d');//获取2D的context对象

声明拼图的图片素材来源

1. varimg=newImage();
2. img.src="image/pintu.jpg";
4. img.onload=function(){//当图片加载完毕时
5. generateNum();//打乱拼图的位置
6. drawCanvas();//在画布上绘制拼图
7. }

3.3.2 初始化拼图

需要将素材图片分割成3行3列的9个小方块，并打乱顺序放置在画布上;

为了在游戏过程中便于查找当前的区域该显示图片中的哪一个方块，首先为原图片上的9个小方块区域进行编号;

定义初始方块位置

1. varnum=[[00,01,02],[10,11,12],[20,21,22]];

打乱拼图的位置

1. functiongenerateNum(){//循环50次进行拼图打乱
2. for(vari=0;i<50;i++){
3. //随机抽取其中一个数据
4. vari1=Math.round(Math.random()*2);
5. varj1=Math.round(Math.random()*2);
6. //再随机抽取其中一个数据
7. vari2=Math.round(Math.random()*2);
8. varj2=Math.round(Math.random()*2);
9. //对调它们的位置
10. vartemp=num[i1][j1];
11. num[i1][j1]=num[i2][j2];
12. num[i2][j2]=temp;
13. }
14. }

绘制拼图

自定义名称的drawCanvas()方法用于在画布上绘制乱序后的图片;

1. functiondrawCanvas(){
2. //清空画布
3. ctx.clearRect(0,0,300,300);
4. //使用双重for循环绘制3x3的拼图
5. for(vari=0;i<3;i++){
6. for(varj=0;j<3;j++){
7. if(num[i][j]!=22){
8. //获取数值的十位数，即第几行
9. varrow=parseInt(num[i][j]/10);
10. //获取数组的个位数，即第几列
11. varcol=num[i][j]%10;
12. //在画布的相关位置上绘图
13. ctx.drawImage(img,col*w,row*w,w,w,j*w,i*w,w,w);//w:300/3=100(小图宽度)
14. }
15. }
16. }
17. }

如下所示:

3.3.3 事件绑定

监听鼠标监听事件

1. c.onmousedown=function(e){
2. varbound=c.getBoundingClientRect();//获取画布边界
4. varx=e.pageX-bound.left;//获取鼠标在画布上的坐标位置(x,y)
5. vary=e.pageY-bound.top;
7. varrow=parseInt(y/w);//将x和y换算成几行几列
8. varcol=parseInt(x/w);
11. if(num[row][col]!=22){//如果当前点击的不是空白区域
12. detectBox(row,col);//移动点击的方块
13. drawCanvas();//重新绘制画布
14. varisWin=checkWin();//检查游戏是否成功
16. if(isWin){//如果游戏成功
17. clearInterval(timer);//清除计时器
18. ctx.drawImage(img,0,0);//绘制完整图片
19. ctx.font="bold68pxserif";//设置字体为加粗、68号字，serif
20. ctx.fillStyle="red";//设置填充色为红色
21. ctx.fillText("游戏成功！",20,150);//显示提示语句
22. }
23. }
24. }

点击方块移动

1. functiondetectBox(i,j){
2. //如果点击的方块不在最上面一行
3. if(i>0){
4. //检测空白区域是否在当前方块的正上方
5. if(num[i-1][j]==22){
6. //交换空白区域与当前方块的位置
7. num[i-1][j]=num[i][j];
8. num[i][j]=22;
9. return;
10. }
11. }
12. //如果点击的方块不在最下面一行
13. if(i<2){
14. //检测空白区域是否在当前方块的正下方
15. if(num[i+1][j]==22){
16. //交换空白区域与当前方块的位置
17. num[i+1][j]=num[i][j];
18. num[i][j]=22;
19. return;
20. }
21. }
22. //如果点击的方块不在最左边一列
23. if(j>0){
24. //检测空白区域是否在当前方块的左边
25. if(num[i][j-1]==22){
26. //交换空白区域与当前方块的位置
27. num[i][j-1]=num[i][j];
28. num[i][j]=22;
29. return;
30. }
31. }
32. //如果点击的方块不在最右边一列
33. if(j<2){
34. //检测空白区域是否在当前方块的右边
35. if(num[i][j+1]==22){
36. //交换空白区域与当前方块的位置
37. num[i][j+1]=num[i][j];
38. num[i][j]=22;
39. return;
40. }
41. }
42. }

3.3.4 游戏计时

自定义函数getCurrentTime()用于进行游戏计时;

1. functiongetCurrentTime(){
2. s=parseInt(s);//将时分秒转换为整数以便进行自增或赋值
3. m=parseInt(m);
4. h=parseInt(h);
5. s++;//每秒变量s先自增1
7. if(s==60){
8. s=0;//如果秒已经达到60，则归0
9. m++;//分钟自增1
10. }
11. if(m==60){
12. m=0;//如果分钟也达到60，则归0
13. h++;//小时自增1
14. }
16. //修改时分秒的显示效果，使其保持两位数
17. if(s<10)
18. s="0"+s;
19. if(m<10)
20. m="0"+m;
21. if(h<10)
22. h="0"+h;
23. time.innerHTML=h+":"+m+":"+s;//将当前计时的时间显示在页面上
24. }

在JavaScript中使用setInterval()方法每隔1秒钟调用getCurrentTime()方法一次，以实现更新效果;

1. vartimer=setInterval("getCurrentTime()",1000)

3.3.5 游戏成功与重新开始

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

自定义函数checkWin()用于进行游戏成功判断;

1. functionrestartGame(){
2. clearInterval(timer);//清除计时器
3. s=0;//时间清零
4. m=0;
5. h=0;
6. getCurrentTime();//重新显示时间
7. timer=setInterval("getCurrentTime()",1000);
9. generateNum();//重新打乱拼图顺序
10. drawCanvas();//绘制拼图
12. }

如果成功则使用clearInterval()方法清除计时器。然后在画布上绘制完整图片，并使用fillText()方法绘制出“游戏成功”的文字图样;

1. if(isWin){//如果游戏成功
2. clearInterval(timer);//清除计时器
3. ctx.drawImage(img,0,0);//绘制完整图片
4. ctx.font="bold68pxserif";//设置字体为加粗、68号字，serif
5. ctx.fillStyle="red";//设置填充色为红色
6. ctx.fillText("游戏成功！",20,150);//显示提示语句
7. }

3.4 最终效果演示

静态效果如上所示,至于游戏成功这里伙计们可以自行操作;

四、总结

本次案例我们使用HTML5的新特性canvas画布标签打造了简单的9宫格拼图游戏,总体来说没有特别的复杂,主要是图片的分割方块移动事件的绑定,以及重新游戏的初始化操作,明确了游戏逻辑之后其实代码的编写其实不难。感兴趣的小伙伴可以去尝试一下。

原文链接：https://mp.weixin.qq.com/s/lK2iUsmKx5bi8k9EtnaYsQ