一、canvas簡(jiǎn)介

canvas是HTML5提供的一種新標(biāo)簽,雙標(biāo)簽;

HTML5 canvas標(biāo)簽元素用于圖形的繪制，通過腳本 (通常是JavaScript)來(lái)完成;

canvas標(biāo)簽只是圖形容器，必須使用腳本來(lái)繪制圖形;

Canvas是一個(gè)矩形區(qū)域的畫布，可以用JavaScript在上面繪畫;

二、案例目標(biāo)

我們今天的目標(biāo)是使用HTML5畫布技術(shù)制作一款拼圖小游戲，要求將圖像劃分為3*3的9塊方塊并打亂排序，用戶可以移動(dòng)方塊拼成完整圖片。

效果如下所示:

三、程序流程

3.1 HTML靜態(tài)頁(yè)面布局

1. "container">
2. --頁(yè)面標(biāo)題-->

3. HTML5畫布綜合項(xiàng)目之拼圖游戲

4. --水平線-->

5. ---

6. --游戲內(nèi)容-->
7. --游戲時(shí)間-->
8. "timeBox">
9. 共計(jì)時(shí)間："time">00:00:00
11. --游戲畫布-->
12. "myCanvas"width="300"height="300"style="border:1pxsolid">
13. 對(duì)不起，您的瀏覽器不支持HTML5畫布API。
15. --游戲按鈕-->
17. "restartGame()">
18. 重新開始

效果如下所示:

我們可以看到頁(yè)面的大致結(jié)構(gòu)是已經(jīng)顯現(xiàn)出來(lái)了,就是骨架已經(jīng)搭建好了,現(xiàn)在我們要使用css強(qiáng)化樣式;

3.2 CSS打造頁(yè)面樣式

整體背景設(shè)置

1. body{
2. background-color:silver;/*設(shè)置頁(yè)面背景顏色為銀色*/
3. }

游戲界面樣式設(shè)置

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

游戲時(shí)間面板樣式設(shè)置

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

游戲按鈕樣式設(shè)置

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

鼠標(biāo)懸浮時(shí)的按鈕樣式設(shè)置

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

設(shè)置好界面整體樣式之后我們得到完整的界面,如下所示:

可以看到整體的靜態(tài)界面已經(jīng)搭建出來(lái)了

3.3 js構(gòu)建交互效果

3.3.1 對(duì)象的獲取以及圖片的設(shè)置

目標(biāo)對(duì)象的獲取

1. varc=document.getElementById('myCanvas');//獲取畫布對(duì)象
2. varctx=c.getContext('2d');//獲取2D的context對(duì)象

聲明拼圖的圖片素材來(lái)源

1. varimg=newImage();
2. img.src="image/pintu.jpg";
4. img.onload=function(){//當(dāng)圖片加載完畢時(shí)
5. generateNum();//打亂拼圖的位置
6. drawCanvas();//在畫布上繪制拼圖
7. }

3.3.2 初始化拼圖

需要將素材圖片分割成3行3列的9個(gè)小方塊，并打亂順序放置在畫布上;

為了在游戲過程中便于查找當(dāng)前的區(qū)域該顯示圖片中的哪一個(gè)方塊，首先為原圖片上的9個(gè)小方塊區(qū)域進(jìn)行編號(hào);

定義初始方塊位置

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

打亂拼圖的位置

1. functiongenerateNum(){//循環(huán)50次進(jìn)行拼圖打亂
2. for(vari=0;i<50;i++){
3. //隨機(jī)抽取其中一個(gè)數(shù)據(jù)
4. vari1=Math.round(Math.random()*2);
5. varj1=Math.round(Math.random()*2);
6. //再隨機(jī)抽取其中一個(gè)數(shù)據(jù)
7. vari2=Math.round(Math.random()*2);
8. varj2=Math.round(Math.random()*2);
9. //對(duì)調(diào)它們的位置
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循環(huán)繪制3x3的拼圖
5. for(vari=0;i<3;i++){
6. for(varj=0;j<3;j++){
7. if(num[i][j]!=22){
8. //獲取數(shù)值的十位數(shù)，即第幾行
9. varrow=parseInt(num[i][j]/10);
10. //獲取數(shù)組的個(gè)位數(shù)，即第幾列
11. varcol=num[i][j]%10;
12. //在畫布的相關(guān)位置上繪圖
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 事件綁定

監(jiān)聽鼠標(biāo)監(jiān)聽事件

1. c.onmousedown=function(e){
2. varbound=c.getBoundingClientRect();//獲取畫布邊界
4. varx=e.pageX-bound.left;//獲取鼠標(biāo)在畫布上的坐標(biāo)位置(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){//如果當(dāng)前點(diǎn)擊的不是空白區(qū)域
12. detectBox(row,col);//移動(dòng)點(diǎn)擊的方塊
13. drawCanvas();//重新繪制畫布
14. varisWin=checkWin();//檢查游戲是否成功
16. if(isWin){//如果游戲成功
17. clearInterval(timer);//清除計(jì)時(shí)器
18. ctx.drawImage(img,0,0);//繪制完整圖片
19. ctx.font="bold68pxserif";//設(shè)置字體為加粗、68號(hào)字，serif
20. ctx.fillStyle="red";//設(shè)置填充色為紅色
21. ctx.fillText("游戲成功！",20,150);//顯示提示語(yǔ)句
22. }
23. }
24. }

點(diǎn)擊方塊移動(dòng)

1. functiondetectBox(i,j){
2. //如果點(diǎn)擊的方塊不在最上面一行
3. if(i>0){
4. //檢測(cè)空白區(qū)域是否在當(dāng)前方塊的正上方
5. if(num[i-1][j]==22){
6. //交換空白區(qū)域與當(dāng)前方塊的位置
7. num[i-1][j]=num[i][j];
8. num[i][j]=22;
9. return;
10. }
11. }
12. //如果點(diǎn)擊的方塊不在最下面一行
13. if(i<2){
14. //檢測(cè)空白區(qū)域是否在當(dāng)前方塊的正下方
15. if(num[i+1][j]==22){
16. //交換空白區(qū)域與當(dāng)前方塊的位置
17. num[i+1][j]=num[i][j];
18. num[i][j]=22;
19. return;
20. }
21. }
22. //如果點(diǎn)擊的方塊不在最左邊一列
23. if(j>0){
24. //檢測(cè)空白區(qū)域是否在當(dāng)前方塊的左邊
25. if(num[i][j-1]==22){
26. //交換空白區(qū)域與當(dāng)前方塊的位置
27. num[i][j-1]=num[i][j];
28. num[i][j]=22;
29. return;
30. }
31. }
32. //如果點(diǎn)擊的方塊不在最右邊一列
33. if(j<2){
34. //檢測(cè)空白區(qū)域是否在當(dāng)前方塊的右邊
35. if(num[i][j+1]==22){
36. //交換空白區(qū)域與當(dāng)前方塊的位置
37. num[i][j+1]=num[i][j];
38. num[i][j]=22;
39. return;
40. }
41. }
42. }

3.3.4 游戲計(jì)時(shí)

自定義函數(shù)getCurrentTime()用于進(jìn)行游戲計(jì)時(shí);

1. functiongetCurrentTime(){
2. s=parseInt(s);//將時(shí)分秒轉(zhuǎn)換為整數(shù)以便進(jìn)行自增或賦值
3. m=parseInt(m);
4. h=parseInt(h);
5. s++;//每秒變量s先自增1
7. if(s==60){
8. s=0;//如果秒已經(jīng)達(dá)到60，則歸0
9. m++;//分鐘自增1
10. }
11. if(m==60){
12. m=0;//如果分鐘也達(dá)到60，則歸0
13. h++;//小時(shí)自增1
14. }
16. //修改時(shí)分秒的顯示效果，使其保持兩位數(shù)
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;//將當(dāng)前計(jì)時(shí)的時(shí)間顯示在頁(yè)面上
24. }

在JavaScript中使用setInterval()方法每隔1秒鐘調(diào)用getCurrentTime()方法一次，以實(shí)現(xiàn)更新效果;

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

3.3.5 游戲成功與重新開始

游戲成功判定與顯示效果的實(shí)現(xiàn)

自定義函數(shù)checkWin()用于進(jìn)行游戲成功判斷;

1. functionrestartGame(){
2. clearInterval(timer);//清除計(jì)時(shí)器
3. s=0;//時(shí)間清零
4. m=0;
5. h=0;
6. getCurrentTime();//重新顯示時(shí)間
7. timer=setInterval("getCurrentTime()",1000);
9. generateNum();//重新打亂拼圖順序
10. drawCanvas();//繪制拼圖
12. }

如果成功則使用clearInterval()方法清除計(jì)時(shí)器。然后在畫布上繪制完整圖片，并使用fillText()方法繪制出“游戲成功”的文字圖樣;

1. if(isWin){//如果游戲成功
2. clearInterval(timer);//清除計(jì)時(shí)器
3. ctx.drawImage(img,0,0);//繪制完整圖片
4. ctx.font="bold68pxserif";//設(shè)置字體為加粗、68號(hào)字，serif
5. ctx.fillStyle="red";//設(shè)置填充色為紅色
6. ctx.fillText("游戲成功！",20,150);//顯示提示語(yǔ)句
7. }

3.4 最終效果演示

靜態(tài)效果如上所示,至于游戲成功這里伙計(jì)們可以自行操作;

四、總結(jié)

本次案例我們使用HTML5的新特性canvas畫布標(biāo)簽打造了簡(jiǎn)單的9宮格拼圖游戲,總體來(lái)說(shuō)沒有特別的復(fù)雜,主要是圖片的分割方塊移動(dòng)事件的綁定,以及重新游戲的初始化操作,明確了游戲邏輯之后其實(shí)代碼的編寫其實(shí)不難。感興趣的小伙伴可以去嘗試一下。

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