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. UDDI FAQs2. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲3. ASP基礎(chǔ)入門第三篇(ASP腳本基礎(chǔ))4. ASP.NET MVC通過勾選checkbox更改select的內(nèi)容5. jsp實現(xiàn)textarea中的文字保存換行空格存到數(shù)據(jù)庫的方法6. html清除浮動的6種方法示例7. JSP之表單提交get和post的區(qū)別詳解及實例8. css進(jìn)階學(xué)習(xí) 選擇符9. ASP.NET Core實現(xiàn)中間件的幾種方式10. asp.net core項目授權(quán)流程詳解
網(wǎng)公網(wǎng)安備