js實現AI五子棋人機大戰(zhàn)
更新時間：2020年05月28日 10:38:34 作者：Aa獨角戲
這篇文章主要為大家詳細介紹了js實現AI五子棋人機大戰(zhàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現AI五子棋人機大戰(zhàn)的具體代碼，供大家參考，具體內容如下
實現原理就是計算五子棋所有贏的種類，利用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>
更多有趣的經典小游戲實現專題，分享給大家：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了前端下載文件時如何后端返回的文件流一些常見方法,包括使用Blob和URL.createObjectURL創(chuàng)建下載鏈接,以及處理帶有Content-Disposition的下載,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-04-04
js特效,頁面下雪的小例子，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了Js參數RSA加密傳輸之jsencrypt.js的使用,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
javascript設計模式 – 解釋器模式原理與用法實例分析
這篇文章主要介紹了javascript設計模式 – 解釋器模式,結合實例形式分析了javascript解釋器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
javascript iframe編程相關代碼，對于熟練操作iframe的朋友有很大的幫助。2009-12-12
下面的代碼就是判斷腳本之家是不是字符串類型的代碼2008-11-11
JS獲取url參數,JS發(fā)送json格式的POST請求方法
下面小編就為大家分享一篇JS獲取url參數,JS發(fā)送json格式的POST請求方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
無刷新上傳解析csv文件的實現代碼，需要的朋友可以參考下。2010-05-05
javascript實現textarea中tab鍵的縮排處理方法
這篇文章主要介紹了javascript實現textarea中tab鍵的縮排處理方法,涉及javascript處理鼠標事件及頁面元素的相關技巧,需要的朋友可以參考下2015-06-06
下面小編就為大家?guī)硪黄壓喴椎腏S計算器實例講解(實現加減乘除)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08