基于JavaScript實(shí)現(xiàn)五子棋游戲
本文實(shí)例為大家分享了js實(shí)現(xiàn)五子棋的具體代碼,供大家參考,具體內(nèi)容如下
思路:
1、先用canvas畫五子棋的棋盤
2、獲取鼠標(biāo)點(diǎn)擊的位置
3、根據(jù)鼠標(biāo)點(diǎn)擊的位置判斷,并畫棋子
4、根據(jù)下的棋子判斷是否贏了
代碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } canvas { margin: 10px; border: 2px solid #000; } #box { display: inline-block; position: absolute; margin-top: 200px; margin-left: 100px; } span { font: 24px "微軟雅黑"; display: inline-block; height: 50px; } input { margin-top: 30px; display: block; width: 100px; height: 50px; font: 16px "微軟雅黑"; color: #fff; background-color: #0099cc; } </style> </head> <body> <canvas width="640" height="640" id="cas"> 您的瀏覽器不支持canvas,請升級到最新的瀏覽器 </canvas> <div id="box"> <span id="txt"></span> <input type="button" id="btn" value="重新開始"/> </div> <script> var flag = true; //true代表白棋下的棋子,false代表黑棋下的棋子 var isWin = false; //判斷是否結(jié)束,true結(jié)束,false沒有結(jié)束 var step = 40; //設(shè)置每個格子的寬高都是40 var txt = document.getElementById("txt"); var btn = document.getElementById("btn"); var cas = document.getElementById("cas");// 獲取畫布對象 var ctx = cas.getContext("2d"); //畫布上下文 // 創(chuàng)建圖片對象 var img_b = new Image(); img_b.src = "imgs/b.png";//設(shè)置黑棋圖片路徑 var img_w = new Image(); img_w.src = "imgs/w.png";//設(shè)置白棋圖片路徑 // 用二維數(shù)組來保存棋盤,0代表沒有走過,1為白棋走過,2為黑棋走過 var arr = new Array(15); //聲明一個一維數(shù)組 for (var i = 0; i < 15; i++) { arr[i] = new Array(15); //每個值再聲明一個一維數(shù)組,這樣就組成了一個二維數(shù)組 for (var j = 0; j < 15; j++) { arr[i][j] = 0; } } //繪制棋盤 function drawLine() { for (var i = 0; i < cas.width / step; i++) { // 畫豎線 ctx.moveTo((i + 1) * step, 0); ctx.lineTo((i + 1) * step, cas.height); // 畫橫線 ctx.moveTo(0, (i + 1) * step); ctx.lineTo(cas.width, (i + 1) * step); ctx.stroke(); } } //獲取鼠標(biāo)點(diǎn)擊的位置 cas.onclick = function (e) { // 先判斷游戲是否結(jié)束 if (isWin) { alert("游戲已經(jīng)結(jié)束,請刷新重新開始!"); return 0; } //判斷棋子顯示的地方,四條邊上不顯示棋子, //鼠標(biāo)點(diǎn)擊的位置減去邊框距離頁面的上和左的距離(10),減去一個格子寬高的一半(20) var x = (e.clientX - 10 - 20) / 40; var y = (e.clientY - 10 - 20) / 40; //進(jìn)行取整來確定棋子最終顯示的區(qū)域 x = parseInt(x); y = parseInt(y); //如果超出棋盤或者在棋盤邊界直接返回,邊界上不能畫棋子 if(x < 0 || x >= 15 || y < 0 || y >= 15) { return; } //進(jìn)行判斷該位置是否已經(jīng)顯示過棋子 if (arr[x][y] != 0) { alert("你不能在這個位置下棋"); return; } // 判斷是顯示黑子還是白子 if (flag) {//白子 flag = false; //將標(biāo)志置為false,表示下次為黑子 drawChess(1, x, y); //調(diào)用函數(shù)來畫棋子 } else {//黑子 flag = true; //將標(biāo)志置為true,表示下次為白子 drawChess(2, x, y); //調(diào)用函數(shù)來畫棋子 } } //畫棋子 function drawChess(num, x, y) { //根據(jù)x和y確定圖片顯示位置,讓圖片顯示在十字線中間,因?yàn)橐粋€格子為40,圖片大小為30,所以40-30/2等于25,所以需要加上25 var x0 = x * step + 25; var y0 = y * step + 25; if (num == 1) { //繪制白棋 ctx.drawImage(img_w, x0, y0); arr[x][y] = 1; //白子 } else if (num == 2) { // 繪制黑棋 ctx.drawImage(img_b, x0, y0); arr[x][y] = 2; //黑子 } //調(diào)用函數(shù)判斷輸贏 judge(num, x, y); } //判斷輸贏 function judge(num, x, y) { var n1 = 0, //左右方向 n2 = 0, //上下方向 n3 = 0, //左上到右下方向 n4 = 0; // 右上到左下方向 //***************左右方向************* //先從點(diǎn)擊的位置向左尋找,相同顏色的棋子n1自加,直到不是相同顏色的棋子,則跳出循環(huán) for (var i = x; i >= 0; i--) { if (arr[i][y] != num) { break; } n1++; } //然后從點(diǎn)擊的位置向右下一個位置尋找,相同顏色的棋子n1自加,直到不是相同顏色的棋子,則跳出循環(huán) for (var i = x + 1; i < 15; i++) { if (arr[i][y] != num) { break; } n1++; } //****************上下方向************ for (var i = y; i >= 0; i--) { if (arr[x][i] != num) { break; } n2++; } for (var i = y + 1; i < 15; i++) { if (arr[x][i] != num) { break; } n2++; } //****************左上到右下斜方向*********** for(var i = x, j = y; i >=0, j >= 0; i--, j--) { if (i < 0 || j < 0 || arr[i][j] != num) { break; } n3++; } for(var i = x+1, j = y+1; i < 15, j < 15; i++, j++) { if (i >= 15 || j >= 15 || arr[i][j] != num) { break; } n3++; } //****************右上到左下斜方向************* for(var i = x, j = y; i >= 0, j < 15; i--, j++) { if (i < 0 || j >= 15 || arr[i][j] != num) { break; } n4++; } for(var i = x+1, j = y-1; i < 15, j >= 0; i++, j--) { if (i >= 15 || j < 0 || arr[i][j] != num) { break; } n4++; } //用一個定時器來延時,否則會先彈出對話框,然后才顯示棋子 var str; if (n1 >= 5 || n2 >= 5 || n3 >= 5 || n4 >= 5) { if (num == 1) {//白棋 str = "白棋贏了,游戲結(jié)束!" } else if (num == 2) {//黑棋 str = "黑棋贏了,游戲結(jié)束!" } txt.innerHTML = str; isWin = true; } } //重新開始 btn.onclick = function() { flag = true; isWin = false; for (var i = 0; i < 15; i++) { for (var j = 0; j < 15; j++) { arr[i][j] = 0; } } ctx.clearRect(0, 0, 640, 640); txt.innerHTML = ""; drawLine(); } drawLine(); </script> </body> </html>
代碼鏈接地址:五子棋demo
更多有趣的經(jīng)典小游戲?qū)崿F(xiàn)專題,分享給大家:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 純JS實(shí)現(xiàn)五子棋游戲兼容各瀏覽器(附源碼)
- Javascript和HTML5利用canvas構(gòu)建Web五子棋游戲?qū)崿F(xiàn)算法
- JS canvas繪制五子棋的棋盤
- H5+C3+JS實(shí)現(xiàn)五子棋游戲(AI篇)
- H5+C3+JS實(shí)現(xiàn)雙人對戰(zhàn)五子棋游戲(UI篇)
- js實(shí)現(xiàn)簡單五子棋游戲
- 原生JS+Canvas實(shí)現(xiàn)五子棋游戲?qū)嵗?/a>
- JS+canvas實(shí)現(xiàn)的五子棋游戲【人機(jī)大戰(zhàn)版】
- javascript 初學(xué)教程及五子棋小程序的簡單實(shí)現(xiàn)
- 教你用Js寫一個簡單的五子棋小游戲
相關(guān)文章
JavaScript使用lodash實(shí)現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝
Lodash?是一個?JavaScript?的工具庫,它提供了一系列的函數(shù)來簡化代碼編寫,本文主要為大家介紹了如何使用lodash實(shí)現(xiàn)命名轉(zhuǎn)換和函數(shù)封裝,感興趣的小伙伴可以了解下2023-11-11查看圖片(前進(jìn)后退)功能實(shí)現(xiàn)js代碼
前進(jìn)后退實(shí)現(xiàn)的前提是:images文件夾下圖片的命名是從1~5.jpg有規(guī)律的,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04用JavaScript計(jì)算在UTF-8下存儲字符串占用字節(jié)數(shù)
想辦法在JavaScript中判斷在UTF-8下存儲的String的字節(jié)數(shù),在網(wǎng)上找到很多關(guān)于Unicode介紹的文檔,最重要的是字符編碼數(shù)值對應(yīng)的存儲長度2013-08-08JavaScript箭頭函數(shù)_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript箭頭函數(shù)的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)
這篇文章主要介紹了JavaScript正則表達(dá)式小結(jié)(test|match|search|replace|split|exec)的相關(guān)資料,非常不錯,具有參考借鑒價(jià)值,需要的朋友參考下吧2016-12-12JavaScript中極易出錯的操作符運(yùn)算總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中極易出錯的操作符運(yùn)算的相關(guān)資料,包括了算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符、一元運(yùn)算符以及運(yùn)算優(yōu)先級等問題,需要的朋友可以參考下2021-08-08JavaScript實(shí)現(xiàn)簡單的音樂播放器
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單的音樂播放器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08