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 相关文章推荐
JS版网站风格切换实例代码
Oct 06 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
Nov 03 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
Vue之Vue.set动态新增对象属性方法
Feb 23 Javascript
ES6下子组件调用父组件的方法(推荐)
Feb 23 Javascript
详解使用create-react-app快速构建React开发环境
May 16 Javascript
vue组件实现进度条效果
Jun 06 Javascript
js比较两个单独的数组或对象是否相等的实例代码
Apr 28 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 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中call_user_func_array()函数的用法演示
2012/02/05 PHP
php中大括号作用介绍
2012/03/22 PHP
PHP多线程批量采集下载美女图片的实现代码(续)
2013/06/03 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
2015/01/02 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
[01:51]历届DOTA2国际邀请赛举办地回顾 TI9落地上海
2018/08/26 DOTA
python中lambda()的用法
2017/11/16 Python
Java分治归并排序算法实例详解
2017/12/12 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python中调试或排错的五种方法示例
2019/09/12 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
Python 实现递归法解决迷宫问题的示例代码
2020/01/12 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
原生canvas制作画图小工具的踩坑和爬坑
2020/06/09 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
万宝龙英国官网:Montblanc手表、书写工具、皮革和珠宝
2018/10/16 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
会计职业生涯规划书
2014/01/13 职场文书
公司请假条格式
2014/04/11 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
Python3 类型标注支持操作
2021/06/02 Python
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js