基于jsp的井字游戏实例

2020-07-27 21:26:23

字体：大中小

来源：转载

供稿：网友

做一款回忆童年的游戏，这款游戏代码比较简单，主要是掌握算法的原理，但是也有一些需要注意的地方。

游戏界面

进入正题。项目的效果图如下：

游戏有一个开始界面可供选择玩家的角色，然后选择先手是哪一方，接着开始游戏。选择界面做了一个遮罩层，里面提供给用户选择，选择之后便把遮罩层隐藏并开始游戏。

具体实现

说了那么多，可能比较枯燥，下面介绍一下具体的代码实现。

使用一个二维数组panel保存棋盘的状态，1是电脑的值，－1是玩家的值。
winArr保存所有可能赢的8个棋位组合；维护computerWin和userWin，初始值等于winArr，当电脑或玩家每次下棋时，都分别更新这两个数组，删除掉不能赢的棋位组合。在更新panel的时候会分别更新computerWin和userWin。

核心的方法是play，play的执行步骤伪代码如下：

如果可以攻击
    遍历computerWin数组，找到可以攻击的棋位，下棋，显示是否赢了。
不能攻击，如果需要防守
    遍历userWin，根据玩家可赢的组合，找出需要防守的棋位，下棋，更新panel；
不需要防守，如果是电脑先手的第一步
    在中心位置下棋，更新panel；
不是先手第一步
    如果中心位置没有被占去，在中心位置下棋，更新panel；返回
    如果是特殊情况，在棱位下棋，更新panel；返回
    如果角位仍有位置，选择一个角位下棋，更新panel；返回
    最后一种情况，找到剩余的空位，优先选择位于computerWin的空位，下棋，更新panel；返回

play算法的实现如下：

 if(canAttack()) {  console.log("attack");  var attackPos = findAttackPos();  updatePanel(attackPos, computerVal);} else if(needDefend()) {  console.log("defend");  var defendPos = findDefendPos();  updatePanel(defendPos, computerVal);} else if(firstStep()) {  console.log("first");    updatePanel(firstPos, computerVal);    running = true;} else {  console.log("other");  if(panel[1][1] == 0) {        updatePanel(firstPos, computerVal);      return;  }  if(special()) {    console.log('special');    var pos = findSpecialPos();    updatePanel(pos, computerVal);    return;  }  var random = Math.floor(Math.random() * 2);  if(panel[0][0] == 0 && panel[2][2] == 0) {    var pos = (random == 0) ? 0 : 8;    updatePanel(pos, computerVal);  } else if(panel[0][2] == 0 && panel[2][0] == 0) {    var pos = (random == 0) ? 2: 6;    updatePanel(pos, computerVal);  } else {    var otherPos = findEmptyPos();    updatePanel(otherPos, computerVal);  }}

总结

在编码的过程中遇到的一个难题就是JavaScript的数组对象，我在第一次调用play方法开头输出panel的时候，得到的是play执行后panel的值，后来请教一位大神，发现是因为panel是一个对象，因为对象遍历引用的都是同一块内存地址，所以一旦有改变，就全部改了。如果直接使用下标输出每一个值的话是可以得到初始的值的，也可以用JSON方法将数组字符串，然后打印出来查看结果。

上一篇：jsp使用ECharts动态在地图上标识点

下一篇：基于jsp的AJAX多文件上传的实例