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 isPrototypeOf和hasOwnProperty使用区别
Mar 04 Javascript
如何书写高质量jQuery代码(使用jquery性能问题)
Jun 30 Javascript
node.js中的fs.lstatSync方法使用说明
Dec 16 Javascript
js实现有时间限制消失的图片方法
Feb 27 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
微信和qq时间格式模板实例详解
Oct 21 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
解析原来浏览器原生支持JS Base64编码解码
Aug 12 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
Vue简单实现原理详解
May 07 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
quickjs 封装 JavaScript 沙箱详情
Nov 02 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
深入掌握include_once与require_once的区别
2013/06/17 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
List the UTC Time on a Computer
2007/06/11 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
javascript 闭包详解
2015/02/15 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
Node.js连接MongoDB数据库产生的问题
2017/02/08 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
微信小程序实现循环动画效果
2018/07/16 Javascript
jQuery的Ajax接收java返回数据方法
2018/08/11 jQuery
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
javascript实现小型区块链功能
2019/04/03 Javascript
js实现微信聊天效果
2020/08/09 Javascript
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python实现爬山算法的思路详解
2019/04/09 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Django命名URL和反向解析URL实现解析
2019/08/09 Python
python之列表推导式的用法
2019/11/29 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
如何在pycharm中安装第三方包
2020/10/27 Python
真正了解CSS3背景下的@font face规则
2017/05/04 HTML / CSS
科级干部考察材料
2014/02/15 职场文书
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
社区服务活动总结
2014/05/07 职场文书
保护黄河倡议书
2014/05/16 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
解决vue中provide inject的响应式监听
2022/04/19 Vue.js