本文实例为大家分享了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>
效果图如下
实际操作效果还行,但相比真正ai实现还是有很多不足。/p>
更多有趣的经典小游戏实现专题,分享给大家:
C++经典小游戏汇总
python经典小游戏汇总
python俄罗斯方块游戏集合
JavaScript经典游戏 玩不停
javascript经典小游戏汇总
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]