//HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<title>五子棋</title>
</head>
<body>
<canvas id="chess" width="450px" height="450px"></canvas>
</body>
<script src='script.js'></script>
</html>
//css
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
}
//JS
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
context.strokeStyle = '#BFBFBF';
//画棋盘
for( var i = 0; i<15 ; i++){
context.moveTo(15 + i*30,15);
context.lineTo(15 + i*30,435);
context.stroke();
context.moveTo(15 , 15 + i*30);
context.lineTo(435 , 15 + i*30);
context.stroke();
}
//落子的实现
function oneStep(i,j,me){
context.beginPath();
context.arc( 15+i*30 , 15+j*30 , 13 , 0 , 2*Math.PI);
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');
}else{
gradient.addColorStop(0,'#D1D1D1');
gradient.addColorStop(1,'#F9F9F9');
}
context.fillStyle = gradient;
context.fill();
}
var me = true;
var chessBoard = [];
for( var i=0 ; i<15 ; i++ ){
chessBoard[i] = [];
for( var j=0; j<15 ;j++){
chessBoard[i][j] = 0;
}
}
var wins = []; //赢法数组
for( var i=0 ; i<15 ; i++ ){
wins[i] = [];
for( var j=0 ; j<15 ; j++ ){
wins[i][j] = [];
}
}
var count=0;
for( var i=0 ; i<15 ; i++){
for( var j=0 ; j<11 ; j++ ){
for( var k=0 ; k<5 ; k++ ){
wins[i][j+k][count]=true;
}
count++;
}
}
for( var i=0 ; i<15 ; i++){
for( var j=0 ; j<11 ; j++ ){
for( var k=0 ; k<5 ; k++ ){
wins[j+k][i][count]=true;
}
count++;
}
}
for( var i=0 ; i<11 ; i++){
for( var j=0 ; j<11 ; j++ ){
for( var k=0 ; k<5 ; k++ ){
wins[i+k][j+k][count]=true;
}
count++;
}
}
for( var i=0 ; i<11 ; i++){
for( var j=14 ; j>3 ; j-- ){
for( var k=0 ; k<5 ; k++ ){
wins[i+k][j-k][count]=true;
}
count++;
}
}
console.log(count);
var myWin = [];
var computerWin = [];
for( var i=0 ; i<count ; i++){
myWin[i]=0;
computerWin[i]=0;
}
var over = false;
chess.onclick = function(e){
if(over){
return;
}
if(!me){
return;
}
var x = e.offsetX;
var y = e.offsetY;
var i = Math.floor(x / 30);
var j = Math.floor(y /30);
if(chessBoard[i][j] == 0){
oneStep(i , j ,me);
chessBoard[i][j] = 1;
for( var 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( 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( chessBoard[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[i][j]==4 ){
myScore[i][j]+=10000;
}
if( computerWin[k]==1 ){
computerScore[i][j]+=200;
}else if( computerWin[k]==2 ){
computerScore[i][j]+=400;
}else if( computerWin[k]==3 ){
computerScore[i][j]+=2000;
}else if( computerWin[i][j]==4 ){
computerScore[i][j]+=10000;
}
}
}
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);
chessBoard[u][v]=2;
for( var 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;
}
}
3 回答
慕妹1403565
TA贡献2条经验 获得超1个赞
canvas {
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EFEFEF, 5px 5px 5px #B9B9B9;
}
canvas改成chess，
定义了ID就用ID指定样式
添加回答
举报
0/150
提交
取消