canvas+js實現初級五子棋AI
阿新 • • 發佈：2019-01-27
<!DOCTYPE html>
<html>
<head>
<title>chess</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#box{
width: 450px;
height: 450px;
border: 1px solid #000;
margin: 60px auto;
}
</style>
</head>
<body>
<div id="box">
<canvas id="chess" width="450" height="450"></canvas>
</div>
<script type="text/javascript">
var _me =true;
var data =[];
//贏法陣列
var wins = [];
var over = false;
// 贏法統計陣列
var myWin = [];
var computerWin = [];
var chess = document.getElementById('chess');
var box = document.getElementById('box');
var ctx = chess.getContext('2d');
ctx.strokeStyle = '#BFBFBF';
for(let i=0;i<15;i++){
data[i]=[];
for(let j=0;j<15;j++){
data[i][j]=0;
}
}
for(let i=0;i<15;i++){
wins[i]=[];
for(let j=0;j<15;j++){
wins[i][j]=[];
}
}
var count = 0;
//橫線贏法
for(let i = 0;i<15;i++){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i][j+k][count] = true;
}
count++; 165
}
}
//豎線贏法
for(let i = 0;i<11;i++){
for(let j = 0;j<15;j++){
for(let k=0;k<5;k++){
wins[i+k][j][count] = true;
}
count++;//165
}
}
//斜線贏法
for(let i = 4;i<15;i++){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i-k][j+k][count] = true;
}
count++;//110
}
}
//反斜線
for(let i = 10;i>-1;i--){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i+k][j+k][count] = true;
}
count++;//110
}
}
// alert(count);
for(let i=0;i<count;i++){
myWin[i] = 0;
computerWin[i] = 0;
}
function play(){
drowBord();
}
function drowBord(){
for(let i = 0;i<15;i++){
ctx.moveTo(15+i*30 , 15);
ctx.lineTo(15+i*30 , 435);
ctx.stroke();
ctx.moveTo(15 , 15 + i*30 );
ctx.lineTo(435, 15 + i*30 );
ctx.stroke();
}
}
function oneStep(i,j,me){
ctx.beginPath();
ctx.arc(15+i*30,15+j*30,13,0,2*Math.PI);
ctx.closePath();
var gradient = ctx.createLinearGradient(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');
data[i][j] = 1;
}else{
gradient.addColorStop(0,'#D1D1D1');
gradient.addColorStop(1,'#F9F9F9');
data[i][j] = 2;
}
ctx.fillStyle=gradient;
ctx.fill();
}
box.onclick = function(event){
if(over) return
if(!_me) return
var e = event || window.event;
let i = Math.floor(e.offsetX/30);
let j = Math.floor(e.offsetY/30);
if(data[i][j]>0) return
oneStep(i,j,_me);
for(let k=0;k<count;k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;
if(myWin[k] == 5){
window.alert("你贏了");
over = true;
}
}
}
if(!over){
_me = !_me;
computerAI();
}
}
function computerAI(){
var myScore = [];
var computerScore = [];
var max = 0;
var u=0,v=0;
for(let i=0; i<15; i++){
myScore[i] = [];
computerScore[i] = [];
for(let j=0; j<15; j++){
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for(let i=0;i<15;i++){
for(var j=0;j<15;j++){
if(data[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] += 4500;
}
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] += 2200;
}else if(computerWin[k] == 4){
console.log('k:'+ k+'computerWin[k]:::'+computerWin[k])
computerScore[i][j] += 4322500;
}
}
}
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(let k=0;k<count;k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k]=6;
if(computerWin[k] == 5){
window.alert("計算機贏了");
over = true;
}
}
}
if(!over){
_me = !_me;
}
}
play();
</script>
</body>
</html>
<html>
<head>
<title>chess</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
#box{
width: 450px;
height: 450px;
border: 1px solid #000;
margin: 60px auto;
}
</style>
</head>
<body>
<div id="box">
<canvas id="chess" width="450" height="450"></canvas>
</div>
<script type="text/javascript">
var _me =true;
var data =[];
//贏法陣列
var wins = [];
var over = false;
// 贏法統計陣列
var myWin = [];
var computerWin = [];
var chess = document.getElementById('chess');
var box = document.getElementById('box');
var ctx = chess.getContext('2d');
ctx.strokeStyle = '#BFBFBF';
for(let i=0;i<15;i++){
data[i]=[];
for(let j=0;j<15;j++){
data[i][j]=0;
}
}
for(let i=0;i<15;i++){
wins[i]=[];
for(let j=0;j<15;j++){
wins[i][j]=[];
}
}
var count = 0;
//橫線贏法
for(let i = 0;i<15;i++){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i][j+k][count] = true;
}
count++; 165
}
}
//豎線贏法
for(let i = 0;i<11;i++){
for(let j = 0;j<15;j++){
for(let k=0;k<5;k++){
wins[i+k][j][count] = true;
}
count++;//165
}
}
//斜線贏法
for(let i = 4;i<15;i++){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i-k][j+k][count] = true;
}
count++;//110
}
}
//反斜線
for(let i = 10;i>-1;i--){
for(let j = 0;j<11;j++){
for(let k=0;k<5;k++){
wins[i+k][j+k][count] = true;
}
count++;//110
}
}
// alert(count);
for(let i=0;i<count;i++){
myWin[i] = 0;
computerWin[i] = 0;
}
function play(){
drowBord();
}
function drowBord(){
for(let i = 0;i<15;i++){
ctx.moveTo(15+i*30 , 15);
ctx.lineTo(15+i*30 , 435);
ctx.stroke();
ctx.moveTo(15 , 15 + i*30 );
ctx.lineTo(435, 15 + i*30 );
ctx.stroke();
}
}
function oneStep(i,j,me){
ctx.beginPath();
ctx.arc(15+i*30,15+j*30,13,0,2*Math.PI);
ctx.closePath();
var gradient = ctx.createLinearGradient(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');
data[i][j] = 1;
}else{
gradient.addColorStop(0,'#D1D1D1');
gradient.addColorStop(1,'#F9F9F9');
data[i][j] = 2;
}
ctx.fillStyle=gradient;
ctx.fill();
}
box.onclick = function(event){
if(over) return
if(!_me) return
var e = event || window.event;
let i = Math.floor(e.offsetX/30);
let j = Math.floor(e.offsetY/30);
if(data[i][j]>0) return
oneStep(i,j,_me);
for(let k=0;k<count;k++){
if(wins[i][j][k]){
myWin[k]++;
computerWin[k]=6;
if(myWin[k] == 5){
window.alert("你贏了");
over = true;
}
}
}
if(!over){
_me = !_me;
computerAI();
}
}
function computerAI(){
var myScore = [];
var computerScore = [];
var max = 0;
var u=0,v=0;
for(let i=0; i<15; i++){
myScore[i] = [];
computerScore[i] = [];
for(let j=0; j<15; j++){
myScore[i][j] = 0;
computerScore[i][j] = 0;
}
}
for(let i=0;i<15;i++){
for(var j=0;j<15;j++){
if(data[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] += 4500;
}
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] += 2200;
}else if(computerWin[k] == 4){
console.log('k:'+ k+'computerWin[k]:::'+computerWin[k])
computerScore[i][j] += 4322500;
}
}
}
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(let k=0;k<count;k++){
if(wins[u][v][k]){
computerWin[k]++;
myWin[k]=6;
if(computerWin[k] == 5){
window.alert("計算機贏了");
over = true;
}
}
}
if(!over){
_me = !_me;
}
}
play();
</script>
</body>
</html>