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设计模式之解释器模式详解
Jun 05 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
Aug 24 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
bootstrap模态框消失问题的解决方法
Dec 02 Javascript
angular 用拦截器统一处理http请求和响应的方法
Jun 08 Javascript
vue脚手架及vue-router基本使用
Apr 09 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
node中实现删除目录的几种方法
Jun 24 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
解决微信小程序防止无法回到主页的问题
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
第4章 数据处理-php正则表达式-郑阿奇(续)
2011/07/04 PHP
PHP 图片上传代码
2011/09/13 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP+Ajax异步带进度条上传文件实例
2016/11/01 PHP
Javascript实例教程(19) 使用HoTMetal(4)
2006/12/23 Javascript
jquery.validate使用攻略 第二部
2010/07/01 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
2014/02/04 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
客户端验证用户名和密码的方法详解
2016/06/16 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
Python爬虫框架Scrapy实战之批量抓取招聘信息
2015/08/07 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python获取地震信息 微信实时推送
2019/06/18 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
美国知名的在线旅游服务网站:Priceline
2016/07/23 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
Why do we need Unit test
2013/01/03 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
辞旧迎新演讲稿
2014/09/15 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书
迎新年主持词
2015/07/06 职场文书
用javascript制作qq注册动态页面
2021/04/14 Javascript
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
mysql 索引合并的使用
2021/08/30 MySQL
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL
Android自定义双向滑动控件
2022/04/19 Java/Android