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 单例/单体模式(Singleton)
Apr 07 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
js阻止事件追加的具体实现
Oct 15 Javascript
jQuery.trim() 函数及trim()用法详解
Oct 26 Javascript
Angular Module声明和获取重载实例代码
Sep 14 Javascript
浅谈javascript中的三种弹窗
Oct 21 Javascript
深入理解选择框脚本[推荐]
Dec 13 Javascript
node.js爬虫爬取拉勾网职位信息
Mar 14 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
vue-cli3项目展示本地Markdown文件的方法
Jun 07 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
Dec 10 Javascript
浅谈javascript如何获取文件后缀名
Aug 07 Javascript
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
地摊中国 - 珍藏老照片
2020/08/18 杂记
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
PHP结合Vue实现滚动底部加载效果
2017/12/17 PHP
JAVASCRIPT对象及属性
2007/02/13 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js调用css属性写法
2013/09/21 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
jquery带翻页动画的电子杂志代码分享
2015/08/21 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
js监听键盘事件的方法_原生和jquery的区别详解
2016/10/10 Javascript
Canvas实现放射线动画效果
2017/02/15 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
Vue项目中如何引入icon图标
2018/03/28 Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
2020/08/14 Javascript
python和shell变量互相传递的几种方法
2013/11/20 Python
python使用PyFetion来发送短信的例子
2014/04/22 Python
python使用cPickle模块序列化实例
2014/09/25 Python
python爬虫的工作原理
2017/03/05 Python
Python 装饰器深入理解
2017/03/16 Python
python and or用法详解
2019/06/26 Python
python实现猜数字游戏
2020/03/25 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
python 发送邮件的四种方法汇总
2020/12/02 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
司机辞职报告范文
2014/01/20 职场文书
座谈会主持词
2014/03/20 职场文书
小学教师个人总结
2015/02/05 职场文书
2016干部作风整顿心得体会
2016/01/22 职场文书
学习计划是什么
2019/04/30 职场文书
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android