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，白子为2function 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,vif(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>

效果图如下

实际操作效果还行，但相比真正ai实现还是有很多不足

js 实现ai五子棋人机大战相关推荐

五子棋输赢算法php,js实现AI五子棋人机大战
本文实例为大家分享了js实现AI五子棋人机大战的具体代码,供大家参考,具体内容如下实现原理就是计算五子棋所有赢的种类,利用canvas实现五子棋排版落子. 五子棋 #canvas{ display: ...
js小游戏——五子棋人机大战
五子棋小游戏,可能会有bug请各位大佬多多指教代码如下: css样式: canvas {display: block;margin: 50px auto;box-shadow: -2px -2px ...
html五子棋人机对战,JS+canvas实现五子棋人机大战
1. 创建实例 function Gobang () { this.over = false; // 是否结束 this.player = true; // true:我 false:电脑 this. ...
android五子棋赢法数组,安卓欢乐五子棋人机大战报告.doc
安卓欢乐五子棋人机大战报告实验报告课程名称实验名称安卓五子棋人机大战实验时间2016年月 (系)专业一.实验目的在棋盘上任意落下一颗子,计算机调用AI算法,能判断出最佳的落子位置并落 ...
五子棋人机大战（Java菜鸟学习笔记）
五子棋人机大战(Java菜鸟学习笔记) 逻辑是: 1.绘制棋盘: 2.人机开始各执行一次操作,每进行一次操作就进行判断输赢其中判断输赢主要分成四个方向,横向.纵向以及交叉向,此时可以画图来找规律实现 ...
java小游戏:五子棋人机大战
一.java小游戏:五子棋人机大战 1.绘制窗口 package wuziqi;import javax.swing.*; import java.awt.event.MouseAdapter; im ...
c语言五子棋人机对弈算法,使用canvas基于AI算法实现人机对战之五子棋
这是我使用canvas基于AI算法实现的人机对战之五子棋黑棋是我下了几局,真心下不过啊!!! 不说了,源码奉上: 人机大战之五子棋 canvas{ display: block; margin:5 ...
五指棋人机大战之ai篇
话说之前把ui篇说了,接下来就是整个游戏的核心部分了. 废话不多说,完成AI部分总共有几个难点 1. 计算机如何落子 2. 判断胜负在阐述代码之前,先上流程图.备注一下:玩家先手(黑子) 电脑白子 ...
AI一分钟 | AI溃败，Dota2人机大战首场终结；阿里公布第一财季财报，净利76.50亿元...
▌AI 溃败,Dota2 最强人机大战首场终结 8 月 24 日早间,OpenAI 的人工智能在 DOTA2 国际邀请赛(Dota 2 at The International)中输给了人类职业玩家. ...

js 实现ai五子棋人机大战

js 实现ai五子棋人机大战相关推荐

最新文章

热门文章