首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

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

js实现AI五子棋人机大战

- Author -

Aa独角戏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
把jQuery的类、插件封装成seajs的模块的方法
Mar 12 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
Javascript核心读书有感之语句
Feb 11 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
jquery validate表单验证插件
Sep 06 Javascript
jQuery如何解决IE输入框不能输入的问题
Oct 08 Javascript
Javascript实现跨域后台设置拦截的方法详解
Aug 04 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
基于form-data请求格式详解
Oct 29 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
排序失效(1) timestamp(1) 黑名单(1) 临时表(1) T-SQL(1) 表变量(1) 批处理(1) ip连接(1) Logrotate(1) 重复数据(2)
You might like
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
详解Nodejs基于mongoose模块的增删改查的操作
2016/12/21 NodeJs
Bootstrap列表组学习使用
2017/02/09 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
基于twbsPagination.js分页插件使用心得(分享)
2017/10/21 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
Python中使用第三方库xlutils来追加写入Excel文件示例
2015/04/05 Python
Python的地形三维可视化Matplotlib和gdal使用实例
2017/12/09 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
Python3中函数参数传递方式实例详解
2019/05/05 Python
python async with和async for的使用
2019/06/20 Python
python日期相关操作实例小结
2019/06/24 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
python dataframe NaN处理方式
2019/12/26 Python
python 生成任意形状的凸包图代码
2020/04/16 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Prototype如何实现页面局部定时刷新
2013/08/06 面试题
室内设计专业个人的自我评价
2013/10/19 职场文书
技校教师求职简历的自我评价
2013/10/20 职场文书
个性大学生自我评价
2013/12/04 职场文书
应届生自我鉴定
2013/12/11 职场文书
模具毕业生推荐信
2014/02/15 职场文书
党的群众路线学习材料
2014/05/16 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2014年村党支部工作总结
2014/12/04 职场文书
2014年底个人工作总结
2015/03/10 职场文书
欢送会主持词
2015/07/01 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
JavaScript架构localStorage特殊场景下二次封装操作
2022/06/21 Javascript
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS