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


Posted in Javascript onMay 28, 2020

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

实现效果图

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

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

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

Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
初探jquery——表单应用范例
Feb 20 Javascript
Z-Blog中用到的js代码
Mar 15 Javascript
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
Oct 24 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
简单谈谈Vue 模板各类数据绑定
Sep 25 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
Material(包括Material Icon)在Angular2中的使用详解
Feb 11 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
微信小程序实现pdf、word等格式文件上传的方法
Sep 10 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
js实现随机点名器精简版
Jun 29 Javascript
解决微信小程序防止无法回到主页的问题
Sep 28 #Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
Sep 28 #Javascript
H5+C3+JS实现双人对战五子棋游戏(UI篇)
May 28 #Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
Sep 28 #Javascript
vue element table 表格请求后台排序的方法
Sep 28 #Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 #Javascript
在vue项目中正确使用iconfont的方法
Sep 28 #Javascript
You might like
详解PHP中strlen和mb_strlen函数的区别
2014/03/07 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
javascript实现一个数值加法函数
2015/06/26 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
javascript自定义滚动条实现代码
2020/04/20 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
JavaScript变量作用域及内存问题实例分析
2019/06/10 Javascript
[59:30]完美世界DOTA2联赛PWL S3 access vs LBZS 第二场 12.20
2020/12/23 DOTA
Python操作串口的方法
2015/06/17 Python
Python的string模块中的Template类字符串模板用法
2016/06/27 Python
django文档学习之applications使用详解
2018/01/29 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
Python自定义函数计算给定日期是该年第几天的方法示例
2019/05/30 Python
python 中如何获取列表的索引
2019/07/02 Python
python内存动态分配过程详解
2019/07/15 Python
Django+uni-app实现数据通信中的请求跨域的示例代码
2019/10/12 Python
python filecmp.dircmp实现递归比对两个目录的方法
2020/05/22 Python
Python实现像awk一样分割字符串
2020/09/15 Python
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
车间班长岗位职责
2013/11/30 职场文书
标准化管理实施方案
2014/02/25 职场文书
聚美优品的广告词
2014/03/14 职场文书
文案策划求职信
2014/04/14 职场文书
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
出纳工作检讨书
2014/10/18 职场文书
医生个人年度总结
2015/02/28 职场文书
解析MySQL binlog
2021/06/11 MySQL
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS