欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS+canvas实现的五子棋游戏【人机大战版】

程序员文章站 2022-05-26 08:22:55
本文实例讲述了js+canvas实现的五子棋游戏。分享给大家供大家参考,具体如下: 运行效果图: html代码如下:

本文实例讲述了js+canvas实现的五子棋游戏。分享给大家供大家参考,具体如下:

运行效果图:

JS+canvas实现的五子棋游戏【人机大战版】

html代码如下:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>五子棋</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" />
  </head>
  <body>
    <canvas id="chess" width="450px" height="450px"></canvas>
    <div id='restart' class="restart">
      <span>重新开始</span>
    </div>
    <script src="js/script.js" type="text/javascript" charset="utf-8"></script>
  </body>
</html>

style.css代码如下:

canvas{
  display: block;
  margin: 50px auto;
  box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
}
.restart{
  text-align: center;
}
.restart>span{
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #45c01a;
  border-radius: 5px;
}

script.js代码如下:

var over = false;
var me = true; //我
var chressbord = [];//棋盘
for(var i = 0; i < 15; i++){
  chressbord[i] = [];
  for(var j = 0; j < 15; j++){
    chressbord[i][j] = 0;
  }
}
//赢法的统计数组
var mywin = [];
var computerwin = [];
//赢法数组
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++;
  }
}
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/logo.png';
logo.onload = function(){
  context.drawimage(logo,0,0,450,450);
  drawchessboard();
}
document.getelementbyid("restart").onclick = function(){
  window.location.reload();
}
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(chressbord[i][j] == 0){
    onestep(i,j,me);
    chressbord[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(chressbord[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;
            }
          }
        }
        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);
  chressbord[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;
  }
}
//绘画棋盘
var drawchessboard = function(){
  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();
  }
}
//画旗子
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 + 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();
}

ps:这里再为大家推荐另一款本站的js版五子棋游戏供大家参考(其ai相对简单一些)

在线五子棋游戏:

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript数据结构与算法技巧总结》、《javascript数学运算用法总结》、《javascript切换特效与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》及《javascript遍历算法与技巧总结

希望本文所述对大家javascript程序设计有所帮助。