一、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