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


Posted in Javascript onJuly 19, 2017

本文实例讲述了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();
}
Javascript 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
JavaScript中常见陷阱小结
Apr 27 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
JS实现简洁、全兼容的拖动层实例
May 13 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
JavaScript实现经典排序算法之选择排序
Dec 28 Javascript
Vue.directive自定义指令的使用详解
Mar 10 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
JavaScript实现删除数组重复元素的5种常用高效算法总结
Jan 18 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 #Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 #Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 #jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 #jQuery
利用require.js与angular搭建spa应用的方法实例
Jul 19 #Javascript
ztree简介_动力节点Java学院整理
Jul 19 #Javascript
Angular 1.x个人使用的经验小结
Jul 19 #Javascript
You might like
Phpbean路由转发的php代码
2008/01/10 PHP
php验证码实现代码(3种)
2015/09/07 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
PHP chr()函数讲解
2019/02/11 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
学习ExtJS border布局
2009/10/08 Javascript
javascript调试说明
2010/06/07 Javascript
js中使用DOM复制(克隆)指定节点名数据到新的XML文件中的代码
2011/07/27 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JS图片根据鼠标滚动延时加载的实例代码
2013/07/13 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python深度优先算法生成迷宫
2018/01/22 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
Python是什么 Python的用处
2020/05/26 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
农场厂长岗位职责
2013/12/28 职场文书
在校硕士自我鉴定
2014/01/23 职场文书
运动会入场词100字
2014/02/06 职场文书
群众路线自我剖析材料
2014/10/08 职场文书
德能勤绩廉个人总结
2015/02/14 职场文书
基层组织建设年活动总结
2015/05/09 职场文书
党员转正大会主持词
2015/07/02 职场文书
运动会宣传稿100字
2015/07/23 职场文书