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

2019-11-19 16:02:29

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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相对简单一些）

在线五子棋游戏：
http://tools.VeVB.COm/games/wuziqi

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

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

上一篇：Angular.js项目中使用gulp实现自动化构建以及压缩打包详解

下一篇：Vue学习笔记进阶篇之vue-router安装及使用方法