DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript技巧 >> 原生JS+Canvas實現五子棋游戲
原生JS+Canvas實現五子棋游戲
編輯:JavaScript技巧     

本文實例為大家分享了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>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved