您好,登錄后才能下訂單哦!
js+canvas如何實(shí)現(xiàn)五子棋小游戲?很多新手對(duì)此不是很清楚,為了幫助大家解決這個(gè)難題,下面小編將為大家詳細(xì)講解,有這方面需求的人可以來(lái)學(xué)習(xí)下,希望你能有所收獲。
源碼展示:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>五子棋</title> <style> * { margin: 0; padding: 0; } body { margin-top: 20px; margin-left: 20px; } canvas { background-image: url("img/bak.jpg"); border: 1px solid #000; } </style> </head> <body> <canvas width="600" height="600" onclick="play(event)"></canvas> <script> /*準(zhǔn)備工作: 1獲取畫(huà)布,獲取畫(huà)筆對(duì)象 */ var mcanvas = document.querySelector("canvas"); var ctx = mcanvas.getContext("2d"); /*準(zhǔn)備工作:2創(chuàng)建一個(gè)二維數(shù)組 用來(lái)定義繪制棋盤(pán)線*/ var count = 15;//用來(lái)定義棋盤(pán)的行數(shù)和列數(shù) var map = new Array(count); for (var i = 0; i < map.length; i++) { map[i] = new Array(count); for (var j = 0; j < map[i].length; j++) { map[i][j] = 0; } } /*準(zhǔn)備工作:3初始化棋子*/ var black = new Image(); var white = new Image(); black.src = "img/black.png"; white.src = "img/white.png"; //開(kāi)始繪制 1繪制棋盤(pán)線 ctx.strokeStyle = "#fff"; var rectWH = 40; //設(shè)置繪制矩形的大小 for (var i = 0; i < map.length; i++) { for (var j = 0; j < map[i].length; j++) { ctx.strokeRect(j * rectWH, i * rectWH, rectWH, rectWH); } } // 用來(lái)進(jìn)行黑白子的切換 var isBlack = true; //開(kāi)始繪制 2下子 function play(e) { //獲取點(diǎn)擊canvas的位置值默認(rèn),canvas的左上角為(0,0) 點(diǎn) var leftOffset = 20;//body 的margin var x = e.clientX - leftOffset; var y = e.clientY - leftOffset; // console.log(x+" "+y); // 設(shè)置點(diǎn)擊點(diǎn)后棋子下在哪里,獲取點(diǎn)擊的位置進(jìn)行判斷如果超過(guò)格子的一半則繪制到下一個(gè)點(diǎn)如果小于 則繪制在上一個(gè)點(diǎn)上 var xv = (x - rectWH / 2) / rectWH; var yv = (y - rectWH / 2) / rectWH; var col = parseInt(xv) + 1; var row = parseInt(yv) + 1; console.log(xv + " " + yv + " , " + col + " " + row); //嚴(yán)格點(diǎn)需要驗(yàn)證 ,驗(yàn)證所輸入的點(diǎn)是否在數(shù)組中已經(jīng)存在 ,如果存在 則返回 if (map[row][col] != 0) { alert("咋的,還想往我身上下??!瞎啊!沒(méi)看見(jiàn)已經(jīng)有棋子了!??!"); return; } // 切換繪制黑白子 if (isBlack) { ctx.drawImage(black, col * 40 - 20, row * 40 - 20); isBlack = false; map[row][col] = 1; Yes(1, row, col); } else { ctx.drawImage(white, col * 40 - 20, row * 40 - 20); isBlack = true; map[row][col] = 2; Yes(2, row, col); } } //算法驗(yàn)證,查看誰(shuí)贏 tag :1 :黑子 2 :白子 function Yes(t, row, col) { console.log(1); var orgrow = row; var orgcol = col; var total = 1; // 判斷依據(jù),以當(dāng)前下的棋子為圓心,水平方向左右尋找和自己想通的值 ,最后判斷如果大于5個(gè)則表示勝利 // 1水平方向判斷 while (col - 1 > 0 && map[row][col - 1] == t) { //判斷下一個(gè)值 注意一定是:col-1 total++; col--; } row = orgrow; col = orgcol; while (col + 1 < 15 && map[row][col + 1] == t) { col++; total++; } if (total >= 5) { if (t == 1){ alert("黑子贏"); } else{ alert("白子贏"); } return;//判斷出輸贏結(jié)束后續(xù)判斷 } // 2垂直方向判斷 row = orgrow; col = orgcol; total = 1; while (row - 1 > 0 && map[row - 1][col] == t) { row--; total++; } row = orgrow; col = orgcol; while (row + 1 < 15 && map[row + 1][col] == t) { row++; total++; } if (total >= 5) { if (t == 1){ alert("黑子贏"); } else{ alert("白子贏"); } return;//判斷出輸贏結(jié)束后續(xù)判斷 } //左下 右上 row = orgrow; col = orgcol; total = 1; while (row + 1 < 15 && col - 1 > 0 && map[row + 1][col - 1] == t) { row++; col--; total++; } row = orgrow; col = orgcol; while (row - 1 > 0 && col + 1 < 15 && map[row - 1][col + 1] == t) { row--; col++; total++; } if (total >= 5) { if (t == 1){ alert("黑子贏"); } else{ alert("白子贏"); } return;//判斷出輸贏結(jié)束后續(xù)判斷 } //左上右下 row = orgrow; col = orgcol; total = 1; while (row - 1 > 0 && col - 1 > 0 && map[row - 1][col - 1] == t) { row--; col--; total++; } row = orgrow; col = orgcol; while (row + 1 < 15 && col + 1 < 15 && map[row + 1][col + 1] == t) { row++; col++; total++; } if (total >= 5) { if (t == 1){ alert("黑子贏"); } else{ alert("白子贏"); } return;//判斷出輸贏結(jié)束后續(xù)判斷 } } /*功能擴(kuò)充: 1當(dāng)勝利后 彈框:a是否在來(lái)一局 b 精彩回復(fù) a 如果點(diǎn)擊在來(lái)一句 清空數(shù)據(jù)重新開(kāi)始 b 精彩回放將棋盤(pán)黑白子按照下棋的順序進(jìn)行棋子編號(hào)2悔棋功能 3對(duì)算法的擴(kuò)充 a如果是雙三 則直接彈出勝利 b若是桶四 則直接彈出勝利 */ </script> </body> </html>
圖片資源:
背景圖片:
看完上述內(nèi)容是否對(duì)您有幫助呢?如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝您對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。