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 相关文章推荐
js function使用心得
May 10 Javascript
javascript之Partial Application学习
Jan 10 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
原生JavaScript制作计算器
Oct 16 Javascript
如何给ss bash 写一个 WEB 端查看流量的页面
Mar 23 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
Mar 09 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
javascript实现异形滚动轮播
Nov 28 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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
用PHP实现图象锐化代码
2007/06/14 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
js为空或不是对象问题的快速解决方法
2013/12/11 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
jQuery simpleModal插件的使用介绍
2016/08/30 Javascript
Vue.js展示AJAX数据简单示例讲解
2017/03/29 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
react native仿微信PopupWindow效果的实例代码
2017/08/07 Javascript
基于JavaScript实现五子棋游戏
2020/08/26 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
vue实现购物车加减
2020/05/30 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python代码检查工具pylint 让你的python更规范
2012/09/05 Python
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
简单了解python关系(比较)运算符
2019/07/08 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
Python while true实现爬虫定时任务
2020/06/08 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python使用eval函数执行动态标表达式过程详解
2020/10/17 Python
html5录音功能实战示例
2019/03/25 HTML / CSS
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
劳资人员岗位职责
2013/12/19 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
四风查摆问题及整改措施
2014/10/10 职场文书
企业党的群众路线教育实践活动学习心得体会
2014/10/31 职场文书
职代会闭幕词
2015/01/28 职场文书
社区活动总结
2015/02/04 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python