JS五子棋(AI）
跟随算法：白棋始终跟随当前黑棋周围
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五子棋</title>
<style>
#map {
background-color: saddlebrown;
border-radius: 10px;
}
</style>
</head>
<body>
<canvas id="map" height="800" width="800"></canvas>
<script>
var mapcanv = document.getElementById("map");
var ctx = mapcanv.getContext("2d");
for (let i = 1; i < 16; i++) {
ctx.beginPath();
ctx.moveTo(50 * i, 50);
ctx.lineTo(50 * i, 750);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 50 * i);
ctx.lineTo(750, 50 * i);
ctx.stroke();
}
var chessinfo = [{
'name': '黑子',
'color': 'black'
}, {
'name': '白子',
'color': 'white'
}];
var chessrec = [];
let chess = 0;
let win = false;
function setChess(x, y, c) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x, y, 25, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
}
mapcanv.addEventListener('click', function(ev) {
let x = Math.round(ev.offsetX / 50);
let y = Math.round(ev.offsetY / 50);
if (!putChess(x, y)) {
return;
}
if (win) return;
aiputChess(x, y);
})
function putChess(x, y) {
let put = false;
let pos = x + '-' + y;
if (x * y > 0 && x < 16 && y < 16 && !chessrec.includes(pos)) {
setChess(x * 50, y * 50, chessinfo[chess].color);
chessrec.push(pos);
if (chessrec.length >= 9)
checkover(x, y, chess);
chess ^= 1;
put = true;
}
return put;
}
function aiputChess(x, y) {
outer: for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
if (putChess(x + i, y + j))
break outer;
}
}
}
function checkover(x, y, ch) {
let chs = chessrec.filter((n, i) => i % 2 == ch);
win = judgewin_5(x, y).some(arr => arr.every(n => chs.includes(n)))
if (win) {
setTimeout(() => {
alert(`恭喜${chessinfo[ch].name}获胜`, 100);
location.reload();
})
}
return win;
}
function judgewin_9(x, y) {
var wins = [
[],
[],
[],
[]
];
for (let i = -4; i <= 4; i++) {
let hx = (x + i) > 0 && (x + i) < 16,
zx = (y + i) > 0 && (y + i) < 16,
zxzx = (y - i) < 16 && (y - i) > 0
if (hx) wins[0].push(`${x+i}-${y}`);
if (zx) wins[1].push(`${x}-${y+i}`);
if (hx && zx) wins[2].push(`${x+i}-${y+i}`);
if (hx && zxzx) wins[3].push(`${x+i}-${y-i}`);
}
return wins.filter(arr => arr.length >= 5);
}
function judgewin_5(x, y) {
var wins = [];
judgewin_9(x, y).forEach(arr => {
for (let i = 0; i < arr.length - 4; i++) {
wins.push(arr.slice(i, i + 5));
}
})
return wins;
}
</script>
</body>
</html>
跟随算法+防守算法:基本能防住菜鸟的进攻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>五子棋</title>
<style>
#map {
background-color: saddlebrown;
border-radius: 10px;
}
</style>
</head>
<body>
<canvas id="map" height="800" width="800"></canvas>
<script>
var mapcanv = document.getElementById("map");
var ctx = mapcanv.getContext("2d");
for (let i = 1; i < 16; i++) {
ctx.beginPath();
ctx.moveTo(50 * i, 50);
ctx.lineTo(50 * i, 750);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 50 * i);
ctx.lineTo(750, 50 * i);
ctx.stroke();
}
var chessinfo = [{
'name': '黑子',
'color': 'black'
}, {
'name': '白子',
'color': 'white'
}];
var chessrec = [];
let chess = 0;
let win = false;
function setChess(x, y, c) {
ctx.save();
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x, y, 25, 0, 2 * Math.PI);
ctx.fill();
ctx.restore();
}
mapcanv.addEventListener('click', function(ev) {
let x = Math.round(ev.offsetX / 50);
let y = Math.round(ev.offsetY / 50);
if(!putChess(x, y)){
return;}
if (win) return;
if(!aiputChess(x, y)){
aiputChessfollow(x,y);
}
})
function putChess(x, y) {
let put = false;
let pos = x + '-' + y;
if (x * y > 0 && x < 16 && y < 16 && !chessrec.includes(pos)) {
setChess(x * 50, y * 50, chessinfo[chess].color);
chessrec.push(pos);
if (chessrec.length >= 9)
checkover(x, y, chess);
chess ^= 1;
put = true;
}
return put;
}
function aiputChessfollow(x,y) {
outer:for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
if (putChess(x+i, y+j))
break outer;
}
}
}
function aiputChess(x, y) {
let chs = chessrec.filter((n, i) => i % 2 == 0);
let arrs = judgewin_5(x,y);
for(let k=0;k<arrs.length;k++){
let arr = arrs[k];
let temp = arr.concat();
for (let j = 0; j < arr.length; j++) {
let pos = arr[j];
for (let i = 0; i < chs.length; i++) {
if (chs[i] == pos) {
temp.splice(temp.indexOf(chs[i]),1);
}
}
if(temp.length<=2&&temp.length>0){
let posset=temp[0];
if(temp.length==2){
posset = temp[1];
}
let posxy = posset.split('-');
let xp=posxy[0];
let yp=posxy[1];
console.log(posset);
if(putChess(xp,yp)){
return true;}
}
}
}
return false;
}
function checkover(x, y, ch) {
let chs = chessrec.filter((n, i) => i % 2 == ch);
win = judgewin_5(x, y).some(arr => arr.every(n => chs.includes(n)))
if (win) {
setTimeout(() => {
alert(`恭喜${chessinfo[ch].name}获胜`, 100);
location.reload();
})
}
return win;
}
function judgewin_9(x, y) {
var wins = [
[],
[],
[],
[]
];
for (let i = -4; i <= 4; i++) {
let hx = (x + i) > 0 && (x + i) < 16,
zx = (y + i) > 0 && (y + i) < 16,
zxzx = (y - i) < 16 && (y - i) > 0
if (hx) wins[0].push(`${x+i}-${y}`);
if (zx) wins[1].push(`${x}-${y+i}`);
if (hx && zx) wins[2].push(`${x+i}-${y+i}`);
if (hx && zxzx) wins[3].push(`${x+i}-${y-i}`);
}
return wins.filter(arr => arr.length >= 5);
}
function judgewin_5(x, y) {
var wins = [];
judgewin_9(x, y).forEach(arr => {
for (let i = 0; i < arr.length - 4; i++) {
wins.push(arr.slice(i, i + 5));
}
})
return wins;
}
</script>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
