原生JS+Canvas實現五子棋游戲

來源：懂視網責編：小OO 時間：2020-11-27 22:33:01

原生JS+Canvas實現五子棋游戲

本文實例為大家分享了JSCanvas實現五子棋游戲的具體代碼，供大家參考，具體內容如下：<。'；over = true；}}}if(。over){me =。me；computerAI()；}}}// 悔棋backbtn.onclick = function(e){if(。'；over = true；}}}if(。over){me =。me；}backAble = true；returnAble = false；var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ')；if(

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了JSCanvas實現五子棋游戲的具體代碼，供大家參考，具體內容如下：<。'；over = true；}}}if(。over){me =。me；computerAI()；}}}// 悔棋backbtn.onclick = function(e){if(。'；over = true；}}}if(。over){me =。me；}backAble = true；returnAble = false；var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' ')；if(

本文實例為大家分享了JS Canvas實現五子棋游戲的具體代碼，供大家參考，具體內容如下

<!DOCTYPE html> 
<html> 
 <head> 
 <meta charset="utf-8" /> 
 <title>五子棋</title> 
 <style type='text/css'> 
 canvas { 
 display: block; 
 margin: 50px auto; 
 box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9; 
 cursor: pointer; 
 } 
 .btn-wrap { 
 display: flex; 
 flex-direction: row; 
 justify-content:center; 
 } 
 .btn-wrap div { 
 margin: 0 10px; 
 } 
 div>span { 
 display: inline-block; 
 padding: 10px 20px; 
 color: #fff; 
 background-color: #EE82EE; 
 border-radius: 5px; 
 cursor: pointer; 
 } 
 div.unable span { 
 background: #D6D6D4; 
 color: #adacaa; 
 } 
 #result-wrap {text-align: center;} 
 </style> 
 </head> 
 <body> 
 <h3 id="result-wrap">--益智五子棋--</h3> 
 <canvas id="chess" width="450px" height="450px"></canvas> 
 <div class="btn-wrap"> 
 <div id='restart' class="restart"> 
 <span>重新開始</span> 
 </div> 
 <div id='goback' class="goback unable"> 
 <span>悔棋</span> 
 </div> 
 <div id='return' class="return unable"> 
 <span>撤銷悔棋</span> 
 </div> 
 </div> 
 <script type="text/javascript" charset="utf-8"> 
 var over = false; 
 var me = true; //我 
 var _nowi = 0, _nowj = 0; //記錄自己下棋的坐標 
 var _compi = 0, _compj = 0; //記錄計算機當前下棋的坐標 
 var _myWin = [], _compWin = []; //記錄我，計算機贏的情況 
 var backAble = false, returnAble = false; 
 var resultTxt = document.getElementById('result-wrap'); 
 var chressBord = [];//棋盤 
 for(var i = 0; i < 15; i++){ 
 chressBord[i] = []; 
 for(var j = 0; j < 15; j++){ 
 chressBord[i][j] = 0; 
 } 
 } 
 //贏法的統計數組 
 var myWin = []; 
 var computerWin = []; 
 //贏法數組 
 var wins = []; 
 for(var i = 0; i < 15; i++){ 
 wins[i] = []; 
 for(var j = 0; j < 15; j++){ 
 wins[i][j] = []; 
 } 
 } 
 var count = 0; //贏法總數 
 //橫線贏法 
 for(var i = 0; i < 15; i++){ 
 for(var j = 0; j < 11; j++){ 
 for(var k = 0; k < 5; k++){ 
 wins[i][j+k][count] = true; 
 } 
 count++; 
 } 
 } 
 //豎線贏法 
 for(var i = 0; i < 15; i++){ 
 for(var j = 0; j < 11; j++){ 
 for(var k = 0; k < 5; k++){ 
 wins[j+k][i][count] = true; 
 } 
 count++; 
 } 
 } 
 //正斜線贏法 
 for(var i = 0; i < 11; i++){ 
 for(var j = 0; j < 11; j++){ 
 for(var k = 0; k < 5; k++){ 
 wins[i+k][j+k][count] = true; 
 } 
 count++; 
 } 
 } 
 //反斜線贏法 
 for(var i = 0; i < 11; i++){ 
 for(var j = 14; j > 3; j--){ 
 for(var k = 0; k < 5; k++){ 
 wins[i+k][j-k][count] = true; 
 } 
 count++; 
 } 
 } 
 // debugger; 
 for(var i = 0; i < count; i++){ 
 myWin[i] = 0; 
 _myWin[i] = 0; 
 computerWin[i] = 0; 
 _compWin[i] = 0; 
 } 
 var chess = document.getElementById("chess"); 
 var context = chess.getContext('2d'); 
 context.strokeStyle = '#bfbfbf'; //邊框顏色 
 var backbtn = document.getElementById("goback"); 
 var returnbtn = document.getElementById("return"); 
 window.onload = function(){ 
 drawChessBoard(); // 畫棋盤 
 } 
 document.getElementById("restart").onclick = function(){ 
 window.location.reload(); 
 } 
 // 我，下棋 
 chess.onclick = function(e){ 
 if(over){ 
 return; 
 } 
 if(!me){ 
 return; 
 } 
 // 悔棋功能可用 
 backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); 
 var x = e.offsetX; 
 var y = e.offsetY; 
 var i = Math.floor(x / 30); 
 var j = Math.floor(y / 30); 
 _nowi = i; 
 _nowj = j; 
 if(chressBord[i][j] == 0){ 
 oneStep(i,j,me); 
 chressBord[i][j] = 1; //我，已占位置 
 
 for(var k = 0; k < count; k++){ // 將可能贏的情況都加1 
 if(wins[i][j][k]){ 
 // debugger; 
 myWin[k]++; 
 _compWin[k] = computerWin[k]; 
 computerWin[k] = 6;//這個位置對方不可能贏了 
 if(myWin[k] == 5){ 
 // window.alert('你贏了'); 
 resultTxt.innerHTML = '恭喜，你贏了！'; 
 over = true; 
 } 
 } 
 } 
 if(!over){ 
 me = !me; 
 computerAI(); 
 } 
 } 
 } 
 // 悔棋 
 backbtn.onclick = function(e){ 
 if(!backAble) { return;} 
 over = false; 
 me = true; 
 // resultTxt.innerHTML = 'o(╯□╰)o，悔棋中'; 
 // 撤銷悔棋功能可用 
 returnbtn.className = returnbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); 
 // 我，悔棋 
 chressBord[_nowi][_nowj] = 0; //我，已占位置 還原 
 minusStep(_nowi, _nowj); //銷毀棋子 
 for(var k = 0; k < count; k++){ // 將可能贏的情況都減1 
 if(wins[_nowi][_nowj][k]){ 
 myWin[k]--; 
 computerWin[k] = _compWin[k];//這個位置對方可能贏 
 } 
 } 
 // 計算機相應的悔棋 
 chressBord[_compi][_compj] = 0; //計算機，已占位置 還原 
 minusStep(_compi, _compj); //銷毀棋子 
 for(var k = 0; k < count; k++){ // 將可能贏的情況都減1 
 if(wins[_compi][_compj][k]){ 
 computerWin[k]--; 
 myWin[k] = _myWin[i];//這個位置對方可能贏 
 } 
 } 
 resultTxt.innerHTML = '--益智五子棋--'; 
 returnAble = true; 
 backAble = false; 
 } 
 // 撤銷悔棋 
 returnbtn.onclick = function(e){ 
 if(!returnAble) { return; } 
 // 我，撤銷悔棋 
 chressBord[_nowi][_nowj] = 1; //我，已占位置 
 oneStep(_nowi,_nowj,me); 
 for(var k = 0; k < count; k++){ 
 if(wins[_nowi][_nowj][k]){ 
 myWin[k]++; 
 _compWin[k] = computerWin[k]; 
 computerWin[k] = 6;//這個位置對方不可能贏 
 } 
 if(myWin[k] == 5){ 
 resultTxt.innerHTML = '恭喜，你贏了！'; 
 over = true; 
 } 
 } 
 // 計算機撤銷相應的悔棋 
 chressBord[_compi][_compj] = 2; //計算機，已占位置 
 oneStep(_compi,_compj,false); 
 for(var k = 0; k < count; k++){ // 將可能贏的情況都減1 
 if(wins[_compi][_compj][k]){ 
 computerWin[k]++; 
 _myWin[k] = myWin[k]; 
 myWin[k] = 6;//這個位置對方不可能贏 
 } 
 if(computerWin[k] == 5){ 
 resultTxt.innerHTML = 'o(╯□╰)o，計算機贏了，繼續加油哦！'; 
 over = true; 
 } 
 } 
 returnbtn.className += ' '+ 'unable'; 
 returnAble = false; 
 backAble = true; 
 } 
 // 計算機下棋 
 var computerAI = function (){ 
 var myScore = []; 
 var computerScore = []; 
 var max = 0; 
 var u = 0, v = 0; 
 for(var i = 0; i < 15; i++){ 
 myScore[i] = []; 
 computerScore[i] = []; 
 for(var j = 0; j < 15; j++){ 
 myScore[i][j] = 0; 
 computerScore[i][j] = 0; 
 } 
 } 
 for(var i = 0; i < 15; i++){ 
 for(var j = 0; j < 15; j++){ 
 if(chressBord[i][j] == 0){ 
 for(var k = 0; k < count; k++){ 
 if(wins[i][j][k]){ 
 if(myWin[k] == 1){ 
 myScore[i][j] += 200; 
 }else if(myWin[k] == 2){ 
 myScore[i][j] += 400; 
 }else if(myWin[k] == 3){ 
 myScore[i][j] += 2000; 
 }else if(myWin[k] == 4){ 
 myScore[i][j] += 10000; 
 } 
 
 if(computerWin[k] == 1){ 
 computerScore[i][j] += 220; 
 }else if(computerWin[k] == 2){ 
 computerScore[i][j] += 420; 
 }else if(computerWin[k] == 3){ 
 computerScore[i][j] += 2100; 
 }else if(computerWin[k] == 4){ 
 computerScore[i][j] += 20000; 
 } 
 } 
 } 
 
 if(myScore[i][j] > max){ 
 max = myScore[i][j]; 
 u = i; 
 v = j; 
 }else if(myScore[i][j] == max){ 
 if(computerScore[i][j] > computerScore[u][v]){ 
 u = i; 
 v = j; 
 } 
 } 
 
 if(computerScore[i][j] > max){ 
 max = computerScore[i][j]; 
 u = i; 
 v = j; 
 }else if(computerScore[i][j] == max){ 
 if(myScore[i][j] > myScore[u][v]){ 
 u = i; 
 v = j; 
 } 
 } 
 
 } 
 } 
 } 
 _compi = u; 
 _compj = v; 
 oneStep(u,v,false); 
 chressBord[u][v] = 2; //計算機占據位置 
 for(var k = 0; k < count; k++){ 
 if(wins[u][v][k]){ 
 computerWin[k]++; 
 _myWin[k] = myWin[k]; 
 myWin[k] = 6;//這個位置對方不可能贏了 
 if(computerWin[k] == 5){ 
 resultTxt.innerHTML = 'o(╯□╰)o，計算機贏了，繼續加油哦！'; 
 over = true; 
 } 
 } 
 } 
 if(!over){ 
 me = !me; 
 } 
 backAble = true; 
 returnAble = false; 
 var hasClass = new RegExp('unable').test(' ' + returnbtn.className + ' '); 
 if(!hasClass) { 
 returnbtn.className += ' ' + 'unable'; 
 } 
 } 
 //繪畫棋盤 
 var drawChessBoard = function() { 
 for(var i = 0; i < 15; i++){ 
 context.moveTo(15 + i * 30 , 15); 
 context.lineTo(15 + i * 30 , 435); 
 context.stroke(); 
 context.moveTo(15 , 15 + i * 30); 
 context.lineTo(435 , 15 + i * 30); 
 context.stroke(); 
 } 
 } 
 //畫棋子 
 var oneStep = function(i,j,me) { 
 context.beginPath(); 
 context.arc(15 + i * 30, 15 + j * 30, 13, 0, 2 * Math.PI);// 畫圓 
 context.closePath(); 
 //漸變 
 var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j * 30 - 2, 13, 15 + i * 30 + 2, 15 + j * 30 - 2, 0); 
 if(me){ 
 gradient.addColorStop(0,'#0a0a0a'); 
 gradient.addColorStop(1,'#636766'); 
 }else{ 
 gradient.addColorStop(0,'#d1d1d1'); 
 gradient.addColorStop(1,'#f9f9f9'); 
 } 
 context.fillStyle = gradient; 
 context.fill(); 
 } 
 //銷毀棋子 
 var minusStep = function(i,j) { 
 //擦除該圓 
 context.clearRect((i) * 30, (j) * 30, 30, 30); 
 // 重畫該圓周圍的格子 
 context.beginPath(); 
 context.moveTo(15+i*30 , j*30); 
 context.lineTo(15+i*30 , j*30 + 30); 
 context.moveTo(i*30, j*30+15); 
 context.lineTo((i+1)*30 , j*30+15); 
 
 context.stroke(); 
 } 
 </script> 
 </body> 
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

原生JS+Canvas實現五子棋游戲

推薦度：

點擊下載本文 文檔為doc格式

標簽：原生

熱門焦點

原生JS+Canvas實現五子棋游戲

原生JS+Canvas實現五子棋游戲

原生JS+Canvas實現五子棋游戲

最新推薦

猜你喜歡

熱門推薦