H5+C3+JS实现五子棋游戏(AI篇)

 更新时间:2020年05月28日 10:37:40   作者:成兮  
这篇文章主要为大家详细介绍了H5+C3+JS实现五子棋游戏AI篇,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了H5+C3+JS实现五子棋游戏的具体代码,供大家参考,具体内容如下

新增全局变量

<script>
 //所有赢法总和
 var count = 0;
 //容纳所有赢法的三维数组
 var allWin = [];
 for(var i =0; i <15; i++){
 allWin[i] = [];
 for(var j=0; j <15; j++){
  allWin[i][j] = [];
 }
 }

 //横线赢法
 for(var i =0; i <15; i++){
 for(var j =0; j <11; j++){
  for(var k =0; k <5; k++){
  allWin[j+k][i][count] = true;
  }
  count++;
 }
 }
 //竖线赢法
 for(var i =0; i <15; i++){
 for(var j =0; j <11; j++){
  for(var k =0; k <5; k++){
  allWin[i][j+k][count] = true;
  }
  count++;
 }
 }
 //斜线赢法
 for(var i =0; i <11; i++){
 for(var j =0; j <11; j++){
  for(var k =0; k <5; k++){
  allWin[i+k][j+k][count] = true;
  }
  count++;
 }
 }
 //反斜线赢法
 for(var i =14; i >3; i--){
 for(var j =0; j <11; j++){
  for(var k =0; k <5; k++){
  allWin[i-k][j+k][count] = true;
  }
  count++;
 }
 }
 /*此时可以输出一下count,如果为572种就表示上面的代码没有问题 */
 /* alert(count); */

 //记录所有赢法当前所下的棋子, 为6表示已被堵住,不可达 */
 var myWin = [];
 var compWin = [];
 for(var i =0; i <count; i++){
 myWin[i] = 0;
 compWin[i] = 0;
 }

 //判断当前是否游戏结束
 var meover = false;
 var compover = false;

</script>

chess.onclick的微调:白棋不再用户下

<script>
 chess.onclick = function(event) {
 //如果游戏结束或者该点已经被下
 if(meover || compover || curIndex[x][y] != 0)
  return;
 //获取要下的棋子的位置
 var x = Math.floor(event.offsetX /30);
 var y = Math.floor(event.offsetY /30);
 //开始绘制
 context.beginPath();
 //绘制指定圆
 context.arc(15 +x *30, 15 +y *30, 15, 0, 2 *Math.PI);
 context.fillStyle = "#636766";
 context.fill() ;
 //当前位置已经被玩家下了
 curIndex[x][y] = 1;
 <1>
 }
</script>

玩家是否赢进行判断:在上面代码<1>处加入代码

<script>
 for(var k =0; k <count; k++){
 if(allWin[x][y][k]){
  //此种赢法步数加1,如果为5表示全部走到
  //此赢法computer已不可达,设置为6
  myWin[k]++;
  compWin[k] = 6;
 }
 if(myWin[k] == 5){
  alert("你赢了");
  compover;
 }
 }
 if(compover)
 return;
 //电脑AI算法检测下一步
 AIcode();<2>
</script>

AI算法核心

<script>
 function AIcode(){
 //表示所有位置的玩家总分数和电脑总分数
 var myScore = [];
 var compScore = [];
 for(var i =0; i <15; i++){
  myScore[i] = [];
  compScore[i] = [];
  for(var j =0; j <15; j++){
  myScore[i][j] = 0;
  compScore[i][j] = 0;
  }
 }
 //对分数进行统计判断,选出分数最大的位置进行电脑下棋
 var max = 0;
 var maxX = 0;
 var maxY = 0;

 //创建加分规则
 for(var i =0; i < 15; i++){
  for(var j =0; j <15; j++){
  if(curIndex[i][j] == 0){
  for(var k=0; k <count; k++){
   if(allWin[i][j][k]){
   if(myWin[k] == 1){
    myScore[i][j] += 200;
   }
   else if(myWin[k] == 2){
    myScore[i][j] += 500;
   }
   else if(myWin[k] == 3){
    myScore[i][j] += 2000;
   }
   else if(myWin[k] == 4){
    myScore[i][j] += 50000;
   }
   if(compWin[k] == 1){
    compScore[i][j] += 300;
   }
   else if(compWin[k] == 2){
    compScore[i][j] += 800;
   }
   else if(compWin[k] == 3){
    compScore[i][j] += 20000;
   }
   else if(compWin[k] == 4){
    compScore[i][j] += 500000;
   }
   }
  }
  if(myScore[i][j] > max){
   max = myScore[i][j];
   maxX = i;
   maxY = j;
   }
  if(compScore[i][j] > max){
   max = compScore[i][j];
   maxX = i;
   maxY = j;
  }
  }
 }
 }


 //进行最终下棋
 context.beginPath();
 context.arc(15 +maxX *30, 15 +maxY *30, 15, 0, 2 *Math.PI);
 context.fillStyle = "#fefefe";
 context.fill();
 //标记当前位置已经被白棋占据
 curIndex[maxX][maxY] = 2;
 <3>
 context.closePath();
};
</script>

电脑是否赢进行判断<3>

<script>
 for(var k =0; k <count; k++){
 if(allWin[maxX][maxY][k]){
  compWin[k]++;
  myWin[k] = 6;
 }
 if(compWin[k] == 5){
  alert("你输了");
  meover = true;
 }
 }
</script>

实现效果图

更多有趣的经典小游戏实现专题,分享给大家:

C++经典小游戏汇总

python经典小游戏汇总

python俄罗斯方块游戏集合

JavaScript经典游戏 玩不停

javascript经典小游戏汇总

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

相关文章

  • 微信小程序实现购物车小功能

    微信小程序实现购物车小功能

    这篇文章主要为大家详细介绍了微信小程序实现购物车小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • 详谈js模块化规范

    详谈js模块化规范

    下面小编就为大家带来一篇详谈js模块化规范。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • [js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例

    [js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例

    下面小编就为大家带来一篇[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS实现简易换图时钟功能分析

    JS实现简易换图时钟功能分析

    这篇文章主要介绍了JS实现简易换图时钟功能,结合实例形式分析了javascript结合时间函数定时变换显示图片实现时钟功能的相关操作技巧,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下
    2018-01-01
  • 移动端web滚动分页的实现方法

    移动端web滚动分页的实现方法

    这篇文章主要为大家详细介绍了移动端web滚动分页的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 如何使用JS在HTML中自定义字符串格式化

    如何使用JS在HTML中自定义字符串格式化

    在JavaScript中虽没有类似的方法,但我们可以利用字符串的replace方法自定义字符串的格式化方法。下面通过本文给大家分享使用JS在HTML中自定义字符串格式化的方法,需要的的朋友参考下吧
    2017-07-07
  • JS实现数组去重方法总结(六种方法)

    JS实现数组去重方法总结(六种方法)

    这篇文章给大家总结下JS实现数组去重方法(六种方法),面试中也经常会遇到这个问题。文中给大家引申的还有合并数组并去重的方法,感兴趣的朋友跟随脚本之家小编一起学习吧
    2017-07-07
  • Layui数据表格判断编辑输入的值,是否为我需要的类型详解

    Layui数据表格判断编辑输入的值,是否为我需要的类型详解

    今天小编就为大家分享一篇Layui数据表格判断编辑输入的值,是否为我需要的类型详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 微信小程序websocket聊天室的实现示例代码

    微信小程序websocket聊天室的实现示例代码

    这篇文章主要介绍了微信小程序websocket聊天室的实现示例代码,小程序本身对http、websocket等连接均有诸多限制,所以这次项目选择了node.js自带的ws模块。感兴趣的可以参考一下
    2019-02-02
  • ES6/JavaScript使用技巧分享

    ES6/JavaScript使用技巧分享

    本篇文章主要给大家讲解了ES6/JavaScript使用技巧,需要的朋友参考一下吧。
    2017-12-12

最新评论