原生JS+Canvas实现五子棋游戏实例

一、功能模块

先看下现在做完的效果：

线上体验：https://wj704.github.io/five_game.html

主要功能模块为：

1.人机对战功能 2.悔棋功能 3.撤销悔棋功能

二、代码详解

2.1 人机对战功能实现

从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘：

知道格子数后，我们先看五子棋有多少种赢法：

  //竖线赢法
  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++;
    }
  }

根据赢法总数定义分别保存计算机和人赢法的数组：

然后就是人开始下棋：

<div class="jb51code">
<pre class="brush:js;">
// 我，下棋
chess.onclick = function(e){
if(over){ // 游戏结束
return;
}
if(!me){
return;
}
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]){
      myWin[k]++;
      _compWin[k] = computerWin[k]; // 为悔棋做准备
      computerWin[k] = 6;//这个位置对方不可能赢了
      if(myWin[k] == 5){
        resultTxt.innerHTML = '恭喜，你赢了！';
        over = true;
      }
    }
  }
  if(!over){
    me = !me;
    computerAI();
  }
}
// 悔棋<a href="https://www.jb51.cc/tag/gongneng/" target="_blank" class="keywords">功能</a>可用
backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " );

}

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 = my<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[i][j]; u = i; v = j; }else if(my<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[i][j] == max){ if(computer<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[i][j] > computer<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[u][v]){ u = i; v = j; } } if(computer<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[i][j] > max){ max = computer<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[i][j]; u = i; v = j; }else if(computer<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[i][j] == max){ if(my<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[i][j] > my<a href="https://www.jb51.cc/tag/score/" target="_blank" class="keywords">score</a>[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; } }

2.2 悔棋功能

要提的是，这里暂时只能悔一步棋。悔棋功能主要关键点是：1、销毁刚刚下的棋子；2、将之前不可能赢的状态还原；看下具体的代码：

首先通过clearRect()擦掉该圆，然后再重新画该圆周围的格子，注意相应的位置，这里花了些时间折腾。

2.3 撤销悔棋功能

悔棋过后，再撤销，相当于还原悔棋之前的状态。代码比较简单：

三、总结

五子棋游戏的核心关键点是：1、弄清楚有多少种赢法；2、怎么判断是否已经赢了；3、计算机下棋算法。这里巧妙地运用数组存储赢法，判断是否赢了，通过权重比较，计算出计算机该下棋的位置。

过程中用到canvas，之前有学习过，虽然很久没用，查了些资料，复习了怎么画线，画圆，学会了怎么如何清除一个圆等。然后要注意的是，用原生Js怎么为元素添加、删除class。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。