js实现AI五子棋人机大战


Posted in Javascript onMay 28, 2020

本文实例为大家分享了js实现AI五子棋人机大战的具体代码,供大家参考,具体内容如下

实现原理就是计算五子棋所有赢的种类,利用canvas实现五子棋排版落子。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>五子棋</title>
 
 <style>
 #canvas{
  display: block;
  margin:50px auto;
  box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #b9b9b9;
 }
 </style>
</head>
<body>
 
 <canvas id="canvas" width="450px" height="450px"></canvas>
 
 <script>
 var canvas = document.getElementById('canvas');
 var context = canvas.getContext('2d');
 
 var me = true; //true黑子, false, 白子
 var over = false;
 var box = []; //全部落子点
 var wins = []; //全部赢的方法 三维数组
 
 for(var i = 0; i< 15 ;i++) {
 box[i] = [];
 wins[i] = [];
 for(var j = 0; j < 15; j++) {
  box[i][j] = 0;
  wins[i][j] = [];
 }
 }
 
 
 var count = 0; //总共赢的数量572种
 //横向
 for(var a = 0; a < 15; a++) {
 for(var b = 0; b < 11;b++) {
  //wins[0][0][0]
  //wins[0][1][0]
  //wins[0][2][0]
  for(var c = 0; c < 5;c++) {
  wins[a][b + c][count] = true;
  }
  count++;
 }
 }
 //纵向
 for(var a = 0; a < 15; a++) {
 for(var b = 0; b < 11;b++) {
  //wins[0][0][0]
  //wins[0][1][0]
  //wins[0][2][0]
  for(var c = 0; c < 5;c++) {
  wins[b + c][a][count] = true;
  }
  count++;
 }
 }
 
 //斜 '\'
 for(var a = 0; a < 11; a++) {
 for(var b = 0; b < 11;b++) {
  //a = 0, b = 10
  //win[0][10]
  //win[1][11]
  for(var c =0; c < 5;c++) {
  wins[a + c][b + c][count] = true;
  }
  count++;
 }
 }
 //反斜 '/'
 for(var a = 0; a < 11; a++) {
 for(var b = 4; b < 15;b++) {
  //a = 0, b = 0
  //win[0][5]
  //win[1][4]
  for(var c =0; c < 5;c++) {
  wins[a + c][b - c][count] = true;
  }
  count++;
 }
 }
 //我方、计算机方总共可以赢的数量,每在某一方式上可以赢的位置下一颗子,myWin[i]++
 //当myWin[i] == 5,说明我方在这个方式上赢的落子已经达到5颗,说明我方已经赢了
 var myWin = []; //
 var computerWin = [];
 for(var i = 0; i < count;i++) {
 myWin[i] = 0;
 computerWin[i] = 0;
 }
 
 //画纵横线条
 function drawLine() {
 
 context.strokeStyle = '#ccc';
 for(var i = 0; i < 15; i++) {
  context.moveTo(15 + 30 * i, 15);
  context.lineTo(15 + 30 * i, 435);
  context.stroke();
 
  context.moveTo(15, 15 + 30 * i);
  context.lineTo(435, 15 + 30 * i);
  context.stroke();
 }
 }
 drawLine()
 
 //走一步,画黑白子,并记录,黑子为1,白子为2
 function oneStep(i, j, me) {
 context.beginPath();
 context.arc(15 + i * 30, 15 + j*30, 13, 0, Math.PI * 2);
 context.closePath();
 
 var gradient = context.createRadialGradient(15 + i * 30 + 2, 15 + j*30 - 2, 13, 15 + i * 30 + 2, 15 + j*30 - 2, 0)
 if(me) { //黑子
  gradient.addColorStop(0, '#0A0A0A');
  gradient.addColorStop(1, '#636766');
  box[i][j] = 1;
 
 } else { //白子
  gradient.addColorStop(0, '#D1D1D1');
  gradient.addColorStop(1, '#F9F9F9');
  box[i][j] = 2;
 }
 context.fillStyle = gradient;
 context.fill();
 }
 
 canvas.onclick = function(e) {
 if(over) return;
 if(!me) return;
 var x = Math.floor(e.offsetX/30);
 var y = Math.floor(e.offsetY/30);
 if(box[x][y] == 0) { //判断没有落子
  oneStep(x, y, me);
  
  for(var k = 0; k<count; k++) {//第几种赢法
  if(wins[x][y][k]) {
   myWin[k]++;
   computerWin[k] = 6; //因为我方在这个点上已经落子,所以计算机不可能在这个点上赢,
   if(myWin[k] == 5) {
   console.log('你赢了')
   over = true;
   }
  }
  }
  if(!over) {
  me = !me;
  computerAI();
  }
 }
 }
 
 //计算机
 function computerAI() {
 var myScore = []; //我方分数
 var computerScore = []; //计算机分数
 var max = 0; //最大分数
 var u = 0, v = 0; //最大分数点
 for(var i =0; i < 15; i++) {
  myScore[i] = [];
  computerScore[i] = [];
  for(var j =0; j < 15; j++) {
  myScore[i][j] = 0;
  computerScore[i][j] = 0;
  }
 }
 
 for(var i =0; i < 15; i++) {
  for(var j =0; j < 15; j++) {
  if(box[i][j] == 0) { //每个空闲点上进行计算分数
   for(var k =0;k<count;k++) { //遍历所有可以赢的,数量
   if(wins[i][j][k]) { //可以赢的点进行算分
 
    if(myWin[k] == 1) {
    myScore[i][j] += 200;
    } else if(myWin[k] == 2) {
    myScore[i][j] += 400;
    } else if(myWin[k] == 3) {
    myScore[i][j] += 2000;
    } else if(myWin[k] == 4) {
    myScore[i][j] += 10000;
    }
 
    if(computerWin[k] == 1) {
    computerScore[i][j] += 220;
    } else if(computerWin[k] == 2) {
    computerScore[i][j] += 420;
    } else if(computerWin[k] == 3) {
    computerScore[i][j] += 2100;
    } else if(computerWin[k] == 4) {
    computerScore[i][j] += 20000;
    }
   }
   }
 
   //得出最大分数的点,并赋给u,v
   if(myScore[i][j] > max) {
   max = myScore[i][j];
   u = i;
   v = j;
   } else if(myScore[i][j] == max) {
   if(computerScore[i][j] > computerScore[u][v]) {
    u = i;
    v = j;
   }
   }
 
   if(computerScore[i][j] > max) {
   max = computerScore[i][j];
   u = i;
   v = j;
   } else if(computerScore[i][j] == max) {
   if(myScore[i][j] > myScore[u][v]) {
    u = i;
    v = j;
   }
   }
 
  }//所有空闲点上进行计算分数
  }
 }
 
 oneStep(u, v, false); //走一步
 
 for(var k = 0; k<count; k++) {//第几种赢法
  if(wins[u][v][k]) {
  computerWin[k]++;
  myWin[k] = 6;
  if(computerWin[k] == 5) {
   console.log('计算机赢了--')
   over = true;
  }
  }
 }
 
 if(!over) {
  me = !me;
 }
 
 } 
 
 
 </script>
 
</body>
</html>

效果图如下

js实现AI五子棋人机大战

实际操作效果还行,但相比真正ai实现还是有很多不足。/p>

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

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

Javascript 相关文章推荐
javascript实现的鼠标链接提示效果生成器代码
Jun 28 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
Flexigrid在IE下不显示数据的处理的解决方法
Oct 24 Javascript
5个书写JavaScript代码的坏习惯,看看你中枪了没?
Nov 06 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
JS组件Bootstrap ContextMenu右键菜单使用方法
Apr 17 Javascript
浅谈js内置对象Math的属性和方法(推荐)
Sep 19 Javascript
JavaScript实现星星等级评价功能
Mar 22 Javascript
JS实现十字坐标跟随鼠标效果
Dec 25 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 Javascript
layui-table获得当前行的上/下一行数据的例子
Sep 24 Javascript
angular inputNumber指令输入框只能输入数字的实现
Dec 03 #Javascript
JavaScript的console命令使用实例
Dec 03 #Javascript
JavaScript实现京东放大镜效果
Dec 03 #Javascript
微信小程序实现图片压缩
Dec 03 #Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 #Javascript
Vue.js 无限滚动列表性能优化方案
Dec 02 #Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 #Javascript
You might like
短波收音机简介
2021/03/01 无线电
PHP的开发框架的现状和展望
2007/03/16 PHP
查找mysql字段中固定字符串并替换的几个方法
2012/09/23 PHP
eclipse php wamp配置教程
2016/06/30 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
2013/11/22 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
2014/01/10 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
2016/11/25 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
2016/11/30 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
详细分析jsonp的原理和实现方式
2017/11/20 Javascript
node下使用UglifyJS压缩合并JS文件的方法
2018/03/07 Javascript
vue2之简易的pc端短信验证码的问题及处理方法
2019/06/03 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
vue实现表格合并功能
2020/12/01 Vue.js
Django日志模块logging的配置详解
2017/02/14 Python
Python实现爬取需要登录的网站完整示例
2017/08/19 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
车间主管岗位职责
2013/11/14 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
党校培训学习心得体会
2016/01/06 职场文书
Go语言设计模式之结构型模式
2021/06/22 Golang
Java使用httpRequest+Jsoup爬取红蓝球号码
2021/07/02 Java/Android
Python加密技术之RSA加密解密的实现
2022/04/08 Python