JavaScript實現(xiàn)網(wǎng)頁版五子棋游戲
本文實例為大家分享了JavaScript實現(xiàn)網(wǎng)頁版五子棋游戲的具體代碼，供大家參考，具體內(nèi)容如下
學(xué)習(xí)js的第三天，跟著老師完成的五子棋小游戲，記錄學(xué)習(xí)成果歡迎大佬們一起分享經(jīng)驗，批評指正。
本程序主要通過三部分實現(xiàn)：
1.棋盤繪制2.鼠標(biāo)交互3.輸贏判斷
<!DOCTYPE html><html><head> <title> canvastest </title></head><body> <h1> canvas</h1> <canvas id='canvas'width='400'height='400'> </canvas> <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js'></script> <script> var canv=document.getElementById('canvas'); var ctx=canv.getContext('2d'); ctx.strokeStyle='black'; var bow=0;//畫出棋盤；var matrix=[ [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], ];ctx.beginPath();for(var i=0;i<19;i++){ ctx.moveTo(10+20*i,10); ctx.lineTo(10+i*20,370); ctx.moveTo(10,20*i+10); ctx.lineTo(370,i*20+10);} ctx.stroke(); //鼠標(biāo)交互； $('#canvas').click(function(event) { console.log(event.offsetX) console.log(bow); var arcPosX,arcPosY; var mtxPosX,mtxPosY; for(var x=0;x<19;x++) { if((Math.abs(event.offsetX-(10+x*20)))<10){ arcPosX=10+x*20; mtxPosX=x;} if((Math.abs(event.offsetY-(10+x*20)))<10) {arcPosY=10+x*20;mtxPosY=x; } } if(matrix[mtxPosX][mtxPosY] == 0) { bow=!bow; ctx.beginPath(); if(bow){ ctx.fillStyle='Black'; ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false); matrix[mtxPosX][mtxPosY]=1; } else{ ctx.fillStyle='White'; ctx.arc(arcPosX,arcPosY,10,0,Math.PI*2,false); ctx.stroke(); matrix[mtxPosX][mtxPosY]=2; } ctx.fill(); } //實現(xiàn)輸贏判斷 var winFlag=0;if(winFlag==0){if(matrix[mtxPosX-1][mtxPosY] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-2][mtxPosY] == matrix[mtxPosX][mtxPosY]) {if(matrix[mtxPosX-3][mtxPosY] == matrix[mtxPosX][mtxPosY]){ if(matrix[mtxPosX-4][mtxPosY] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX+1][mtxPosY] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { winFlag = 0; } }}else{ for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } }} } else {for(var w = 0; w < 3 ; w ++){ if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; }} } } else { for(var w = 0; w < 4 ; w ++) {if(matrix[mtxPosX+w+1][mtxPosY] != matrix[mtxPosX][mtxPosY]){ winFlag = 0; break;}else{ winFlag = 1;} } }if(matrix[mtxPosX][mtxPosY-1] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX][mtxPosY-2] == matrix[mtxPosX][mtxPosY]) {if(matrix[mtxPosX][mtxPosY-3] == matrix[mtxPosX][mtxPosY]){ if(matrix[mtxPosX][mtxPosY-4] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX][mtxPosY+1] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { winFlag = 0; } }}else{ for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } }} } else {for(var w = 0; w < 3 ; w ++){ if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; }} } } else { for(var w = 0; w < 4 ; w ++) {if(matrix[mtxPosX][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]){ winFlag = 0; break;}else{ winFlag = 1;} } } if(matrix[mtxPosX-1][mtxPosY-1] == matrix[mtxPosX][mtxPosY]){ if(matrix[mtxPosX-2][mtxPosY-2] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-3][mtxPosY-3] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-4][mtxPosY-4] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX+1][mtxPosY+1] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { winFlag = 0; } } } else { for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } } else { for(var w = 0; w < 3 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } }}else{ for(var w = 0; w < 4 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY+w+1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } } } if(matrix[mtxPosX-1][mtxPosY+1] == matrix[mtxPosX][mtxPosY]) { if(matrix[mtxPosX-2][mtxPosY+2] == matrix[mtxPosX][mtxPosY]) {if(matrix[mtxPosX-3][mtxPosY+3] == matrix[mtxPosX][mtxPosY]){ if(matrix[mtxPosX-4][mtxPosY+4] == matrix[mtxPosX][mtxPosY]) { winFlag = 1; } else { if(matrix[mtxPosX+1][mtxPosY-1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; } else { winFlag = 1; } }}else{ for(var w = 0; w < 2 ; w ++) { if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; } }} } else {for(var w = 0; w < 3 ; w ++){ if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY]) { winFlag = 0; break; } else { winFlag = 1; }} } } else { for(var w = 0; w < 4 ; w ++) {if(matrix[mtxPosX+w+1][mtxPosY-w-1] != matrix[mtxPosX][mtxPosY]){ winFlag = 0; break;}else{ winFlag = 1;} } } } if(winFlag ==1){ if(bow) alert('black win!'); else alert('white win!'); } }); </script></body></html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Docker究竟是什么 為什么這么流行 它的優(yōu)點和缺陷有哪些？2. idea打開多個窗口的操作方法3. IntelliJ IDEA設(shè)置編碼格式的方法4. IDEA 重新導(dǎo)入依賴maven 命令 reimport的方法5. 如何通過vscode運行調(diào)試javascript代碼6. Java14發(fā)布了,再也不怕NullPointerException了7. IntelliJ IDEA 2020.2正式發(fā)布,兩點多多總能助你提效8. Intellij IDEA 閱讀源碼的 4 個絕技(必看)9. IntelliJ IDEA 統(tǒng)一設(shè)置編碼為utf-8編碼的實現(xiàn)10. IntelliJ IDEA設(shè)置背景圖片的方法步驟
網(wǎng)公網(wǎng)安備