設計如下的簡單小游戲，
在面板（畫布）中放置10行10列共100個小方塊，每個小方塊隨機在5種顏色中選一種顏色進行著色，在面板的下方，放置對應的5種顏色色塊，如圖1所示，
圖1 “統一著色”游戲界面
游戲要求通過每次對包含最左上角方塊的相鄰同色區域方塊改變著色的方式，最終使得面板中的100個小方塊著色統一，
例如，圖1中包含最左上角方塊的相鄰同色區域方塊只有1個，此時對其有效改變著色應該是選擇“綠色”（下方相鄰的方塊顏色）或“棕色”（左邊相鄰的方塊顏色），這樣擴大了包含最左上角方塊的相鄰同色區域；否則，不擴大包含最左上角方塊的相鄰同色區域，應是無效的著色選擇，
單擊面板下方5個色塊中的某個色塊，就可以將包含最左上角方塊的相鄰同色區域的所有方塊顏色改為所單擊色塊的顏色，一次游戲程序如圖2所示，
圖2 “統一著色”游戲程序示例
定義一個陣列
var colors = ["Aquamarine","Blue","BlueViolet","Brown","Chartreuse","Chocolate","Cyan",
"DeepPink","Fuchsia","Green","Orange","Purple","Red","SkyBlue","Yellow"];
保存游戲可供選擇的顏色，
每局游戲選擇5個色塊，定義陣列 var options=[];保存在colors陣列中選擇的5種顏色所對應的下標，為了達到隨機選擇5種顏色，采用對顏色陣列進行簡單洗牌的方法來完成，
定義陣列var blocks=[];保存面板中100個小方塊的著色，第i行第j列小方塊的著色保存在陣列元素blocks[10*i+j]中，初始時，每個小方塊的著色在選定的5種顏色中隨機選擇一種，一個簡單的回圈可完成，
for (var i=0;i<100;i++)
blocks[i]=options[Math.floor(Math.random()*5)];
單擊面板下方5個小色塊中某個色塊后，呼叫函式setColor()完成改變著色的程序，
改變著色的區域是包含最左上角方塊的相鄰同色區域的所有方塊，因此關鍵問題是怎么找到這個相鄰同色區域中的所有方塊，可采用廣度優先搜索演算法的思想來完成，演算法描述為：
記下最左上角方塊的初始著色srcColor；
佇列初始化；
最左上角方塊編號 0入隊；
while （佇列非空）
{
隊頭元素出隊，賦給k；
改變方塊k的著色（修改blocks[k]的值為所單擊色塊的顏色編號destColor）；
if （方塊k右邊的方塊k+1存在且顏色為srcColor）
方塊編號k+1入隊；
if （方塊k下邊的方塊k+10存在且顏色為srcColor）
方塊編號k+10入隊；
}
實際上，一個方塊相鄰的方塊有上下左右四個，但演算法中只需考慮右邊和下邊，無需考慮左邊和上邊，這是因為本游戲的著色改變總是改變包含最左上角方塊的相鄰區域，即搜索總是從最左上角方塊開始，而最左上角方塊只能向右邊和下邊擴展，之后每個方塊也只需向右邊和下邊擴展即可，無需向左邊和上邊擴展（因為左邊和上邊的方塊已被擴展處理過），
獲勝判斷就更簡單了，因為獲勝的條件是所有方塊的著色統一，即陣列blocks的元素值全部相同，因此用回圈檢查元素blocks[1]~blocks[99]，若它們的值全部與blocks[0]相同，則獲勝，否則只要有一個元素與blocks[0]不同，就沒有達到著色統一的獲勝要求，撰寫為一個簡單的函式，
function checkWin()
{
for (var i=1;i<blocks.length;i++)
if (blocks[i]!=blocks[0]) return false;
return true;
}
另外，為避免游戲程序中的無效色塊單擊，記錄游戲的步數（色塊單擊次數），若35步內不能完成統一著色，判定游戲失敗，
完整的HTML代碼如下，
<!DOCTYPE html> <html> <head> <title>統一著色</title> <style> .num { padding: 28px 0; border: 1px solid ; cursor: pointer; } .new-game { cursor: pointer; text-decoration: underline; color: #00bcd4; font:bold 24px Georgia, serif; } #mess { width:480px; padding:5px; border:2px solid gray; margin:0px; font:bold 24px Georgia, serif; color: #FF6600; } </style> </head> <body> <div onclick="newGame();">New Game</div><br/> <canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;"> </canvas><br/> <table cellpadding="0" cellspacing="20"> <tbody><tr> <td width="60"><div id="c0" onclick="setColor(this);"></div></td> <td width="60"><div id="c1" onclick="setColor(this);"></div></td> <td width="60"><div id="c2" onclick="setColor(this);"></div></td> <td width="60"><div id="c3" onclick="setColor(this);"></div></td> <td width="60"><div id="c4" onclick="setColor(this);"></div></td> </tr> </tbody> </table><br/> <div id="mess"> </div><br/> <script type="text/javascript"> var canvas=document.getElementById('myCanvas'); ctx= canvas.getContext('2d'); var colors = ["Aquamarine","Blue","BlueViolet","Brown","Chartreuse","Chocolate","Cyan","DeepPink","Fuchsia ","Green","Orange","Purple","Red","SkyBlue","Yellow"]; var running = false; var steps=0; function shuffle(arr) // 陣列arr洗牌 { for (var i = arr.length-1; i>=0; i--) { var j = Math.floor(Math.random() * i); var t=arr[i]; arr[i]=arr[j]; arr[j]=t; } } var colorNum=[]; for (var i=0;i<colors.length;i++) colorNum[i]=i; var options=[]; var blocks=[]; function newGame() { shuffle(colorNum); options=colorNum.slice(0,5); for (var i=0;i<100;i++) blocks[i]=options[Math.floor(Math.random()*5)]; running=true; steps=0; draw(); document.getElementById("c0").style.backgroundColor =colors[options[0]]; document.getElementById("c1").style.backgroundColor =colors[options[1]]; document.getElementById("c2").style.backgroundColor =colors[options[2]]; document.getElementById("c3").style.backgroundColor =colors[options[3]]; document.getElementById("c4").style.backgroundColor =colors[options[4]]; document.getElementById("mess").innerHTML ="Steps:"+steps+"/35"; } function draw() { for (var i=0;i<10;i++) { for (var j=0;j<10;j++) { ctx.fillStyle = colors[blocks[i*10+j]]; ctx.fillRect(j*50,i*50,50,50); } } ctx.fillStyle ="rgba(255,255,255,0.85)"; ctx.fillRect(20,20,10,10); } function setColor(d) { if (!running) { document.getElementById("mess").innerHTML ="請單擊 New Game 開始新游戲！"; return; } var index= parseInt(d.id.charAt(1)); var srcColor=blocks[0]; var destColor=options[index]; if (srcColor==destColor) { document.getElementById("mess").innerHTML ="Steps:"+steps+"/35 未進行顏色改變，無效單擊！"; return; } var queue=[]; var front=0; var rear=0; queue[rear++]=0; while (front<rear) { var k=queue[front++]; blocks[k]=destColor; if (k%10!=9 && blocks[k+1]==srcColor) // 右邊的方格 queue[rear++]=k+1; if (k<90 && blocks[k+10]==srcColor) // 下邊的方格 queue[rear++]=k+10; } draw(); steps++; document.getElementById("mess").innerHTML ="Steps:"+steps+"/35"; if (checkWin()) { running=false; ctx.font = '50px PingFang SC'; ctx.fillStyle = "red"; ctx.textAlign = 'center'; ctx.baseline = 'middle'; ctx.fillText('You Win！',canvas.width/2, canvas.height/2); } else { if (steps==35) { running=false; ctx.font = '50px PingFang SC'; ctx.fillStyle = "black"; ctx.textAlign = 'center'; ctx.baseline = 'middle'; ctx.fillText('You failed！',canvas.width/2, canvas.height/2); } } } function checkWin() { for (var i=1;i<blocks.length;i++) if (blocks[i]!=blocks[0]) return false; return true; } newGame(); </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/14854.html
標籤：JavaScript