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

时间：2022-01-06 03:22:55

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

一、canvas简介

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

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

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

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

二、案例目标

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

效果如下所示:

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

三、程序流程

3.1 HTML静态页面布局

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

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

  4. --水平线-->
  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. 重新开始

效果如下所示:

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

我们可以看到页面的大致结构是已经显现出来了,就是骨架已经搭建好了,现在我们要使用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. }

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

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

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

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. }

如下所示:

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

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 最终效果演示

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

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

四、总结

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

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

标签：

相关文章