js实现简单五子棋游戏

程序员文章站 2022-04-09 16:07:30

本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下html

本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下

html

<!doctype html>
<html>
 <head>
 <meta charset="utf-8" />
 <title>五子棋</title>
 <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
 <canvas id="chess" width="450px" height="450px"></canvas>
 <script type="text/javascript" src="js/script.js" ></script>
 </body>
</html>

css

canvas{
 display: block;
 margin: 50px auto;
 box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
}

var me = true;
var over = false;
var chessbox = [];
var wins = [];  //定义三维数组
//赢法统计数组
var mywin = [];
var computerwin = [];
for(i=0;i<15;i++){
 chessbox[i]=[];
 for(j=0;j<15;j++){
 chessbox[i][j]=0;
 } 
}
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++){
 //执行1次
 // wins[0][0][0]=true;
 // wins[0][1][0]=true;
 // wins[0][2][0]=true;
 // wins[0][3][0]=true;
 // wins[0][4][0]=true;
 //执行2次
 // wins[0][1][1]=true;
 // wins[0][2][1]=true;
 // wins[0][3][1]=true;
 // wins[0][4][1]=true;
 // wins[0][5][1]=true;
 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);
for (var i=0;i<count;i++) {
 mywin[i] = 0;
 computerwin[i] = 0;
}
 
var chess = document.getelementbyid('chess');
var context = chess.getcontext('2d');
context.strokestyle = "#bfbfbf";
var logo= new image();
logo.src = "img/木头.jpg";
logo.onload = function(){
 context.drawimage(logo,0,0,450,450);
 drawchessboard();
// onestep(0,0,true);
// onestep(1,1,false);
}
function drawchessboard(){
 for(var i=0;i<15;i++){
 context.moveto(15+i*30,15);
 context.lineto(15+i*30,435);
 context.moveto(15,15+i*30);
 context.lineto(435,15+i*30);
 context.stroke();
 }
 
}
var onestep = function(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,15+j*30,13,15+i*30,15+j*30,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();
}
 
chess.onclick = function(e){
 if(over){
 return;
 }
 if(!me){
 return;
 }
 var x = e.offsetx;
 var y = e.offsety;
 var i = math.floor(x/30); //i,j为索引序列号
 var j = math.floor(y/30);
 if(chessbox[i][j]==0){
 onestep(i,j,me);
 
 chessbox[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();
 }
 } 
 
}
var computerai = function(){
 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(chessbox[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]+= 2020;
 }else if(computerwin[k]==4){
 computerscore[i][j]+= 10020;
 }
 }
 }
 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);
 chessbox[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; 
 }
}

js实现简单五子棋游戏