原生JS+Canvas实现五子棋游戏实例


Posted in Javascript onJune 19, 2017

一、功能模块

先看下现在做完的效果:

原生JS+Canvas实现五子棋游戏实例

线上体验:https://wj704.github.io/five_game.html

主要功能模块为:

1.人机对战功能
2.悔棋功能
3.撤销悔棋功能

二、代码详解

2.1 人机对战功能实现

从效果图可以看到,棋盘的横竖可以放的位置为15*15,通过canvas画棋盘:

//绘画棋盘
    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 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;
        _myWin[i] = 0;
        computerWin[i] = 0;
        _compWin[i] = 0;
   }

然后就是人开始下棋:

 

// 我,下棋
  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);
    _nowi = i;
    _nowj = j;
    if(chressBord[i][j] == 0){
      oneStep(i,j,me);
      chressBord[i][j] = 1; //我,已占位置    

      for(var k = 0; k < count; k++){ // 将可能赢的情况都加1
        if(wins[i][j][k]){
          myWin[k]++;
          _compWin[k] = computerWin[k]; // 为悔棋做准备
          computerWin[k] = 6;//这个位置对方不可能赢了
          if(myWin[k] == 5){
            resultTxt.innerHTML = '恭喜,你赢了!';
            over = true;
          }
        }
      }
      if(!over){
        me = !me;
        computerAI();
      }
    }
    // 悔棋功能可用
    backbtn.className = backbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " );     
  }

oneStep() 方法为落子,要在棋盘上画一个棋子:

//画棋子
    var oneStep = function(i,j,me){
      // debugger;
      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();
    }

接着看计算机怎么下棋,具体看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;  
              }
            }

          }
        }
      }
      _compi = u;
      _compj = v;
      oneStep(u,v,false);
      chressBord[u][v] = 2; //计算机占据位置
      for(var k = 0; k < count; k++){
        if(wins[u][v][k]){
          computerWin[k]++;
          _myWin[k] = myWin[k];
          myWin[k] = 6;//这个位置对方不可能赢了
          if(computerWin[k] == 5){
            resultTxt.innerHTML = 'o(?□?)o,计算机赢了,继续加油哦!';
            over = true;
          }
        }
      }
      if(!over){
        me = !me;
      }
    }

根据相应的权重,计算出计算机应该落子的位置。

2.2 悔棋功能

要提的是,这里暂时只能悔一步棋。悔棋功能主要关键点是:1、销毁刚刚下的棋子;2、将之前不可能赢的状态还原;看下具体的代码:

// 悔棋
      backbtn.onclick = function(e){
        if(!backAble) { return;}
        over = false;
        me = true;

        // 我,悔棋
        chressBord[_nowi][_nowj] = 0; //我,已占位置 还原
        minusStep(_nowi, _nowj); //销毁棋子                 
        for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
          if(wins[_nowi][_nowj][k]){
            myWin[k]--;
            computerWin[k] = _compWin[k];//这个位置对方可能赢
          }
        }

        // 计算机相应的悔棋
        chressBord[_compi][_compj] = 0; //计算机,已占位置 还原
        minusStep(_compi, _compj); //销毁棋子                 
        for(var k = 0; k < count; k++){ // 将可能赢的情况都减1
          if(wins[_compi][_compj][k]){
            computerWin[k]--;
            myWin[k] = _myWin[i];//这个位置对方可能赢
          }
        }
        resultTxt.innerHTML = '--益智五子棋--';
        returnAble = true;
        backAble = false;
         // 撤销悔棋功能可用
        returnbtn.className = returnbtn.className.replace( new RegExp( "(\\s|^)unable(\\s|$)" )," " ); 
      }

minusStep()为销毁棋子的方法,我们看下是怎么销毁的。

//销毁棋子
     var minusStep = function(i,j) {
      //擦除该圆
      context.clearRect((i) * 30, (j) * 30, 30, 30);

      // 重画该圆周围的格子
      context.beginPath();
      context.moveTo(15+i*30 , j*30);
      context.lineTo(15+i*30 , j*30 + 30);

      context.moveTo(i*30, j*30+15);
      context.lineTo((i+1)*30 , j*30+15);

      context.stroke();
    }

首先通过clearRect()擦掉该圆,然后再重新画该圆周围的格子,注意相应的位置,这里花了些时间折腾。

2.3 撤销悔棋功能

悔棋过后,再撤销,相当于还原悔棋之前的状态。代码比较简单:

// 撤销悔棋
    returnbtn.onclick = function(e){
      if(!returnAble) { return; }
      // 我,撤销悔棋
      chressBord[_nowi][_nowj] = 1; //我,已占位置 
      oneStep(_nowi,_nowj,me);               
      for(var k = 0; k < count; k++){ 
        if(wins[_nowi][_nowj][k]){
          myWin[k]++;
          _compWin[k] = computerWin[k];
          computerWin[k] = 6;//这个位置对方不可能赢
        }
        if(myWin[k] == 5){      
          resultTxt.innerHTML = '恭喜,你赢了!';
          over = true;
        }
      }

      // 计算机撤销相应的悔棋
      chressBord[_compi][_compj] = 2; //计算机,已占位置  
      oneStep(_compi,_compj,false);                
      for(var k = 0; k < count; k++){ 
        if(wins[_compi][_compj][k]){
          computerWin[k]++;
          _myWin[k] = myWin[k];
          myWin[k] = 6;//这个位置对方不可能赢
        }
        if(computerWin[k] == 5){
          resultTxt.innerHTML = 'o(?□?)o,计算机赢了,继续加油哦!';
          over = true;
        }
      }
      returnbtn.className += 'unable';
      returnAble = false;
      backAble = true;
    }

至此,比较简单的完成了这三个功能。

三、总结

五子棋游戏的核心关键点是:1、弄清楚有多少种赢法;2、怎么判断是否已经赢了;3、计算机下棋算法。这里巧妙地运用数组存储赢法,判断是否赢了,通过权重比较,计算出计算机该下棋的位置。

过程中用到canvas,之前有学习过,虽然很久没用,查了些资料,复习了怎么画线,画圆,学会了怎么如何清除一个圆等。
然后要注意的是,用原生Js怎么为元素添加、删除class。

最后代码放到github上了,地址:https://github.com/wj704/wj704.github.io/blob/master/five_game.html

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
js获取上传文件的绝对路径实现方法
Aug 02 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
React-Native之定时器Timer的实现代码
Oct 04 Javascript
vue-cli之router基本使用方法详解
Oct 17 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
vue中使用v-model完成组件间的通信
Aug 22 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 #Javascript
Node.js中 __dirname 的使用介绍
Jun 19 #Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 #Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 #Javascript
jQuery自定义多选下拉框效果
Jun 19 #jQuery
JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)
Jun 19 #Javascript
JS仿淘宝搜索框用户输入事件的实现
Jun 19 #Javascript
You might like
php函数的常用方法及注意之处小结
2011/07/10 PHP
PHP设计模式之代理模式的深入解析
2013/06/13 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
juqery 学习之三 选择器 子元素与表单
2010/11/25 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
用JQuery实现全选与取消的两种简单方法
2014/02/22 Javascript
jQuery中:header选择器用法实例
2014/12/29 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
2016/07/18 Javascript
jQuery操作cookie
2016/08/08 Javascript
AngularJS教程之简单应用程序示例
2016/08/16 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
页面内锚点定位及跳转方法总结(推荐)
2019/04/24 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue 自定义右键样式的实例代码
2019/11/06 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
[03:37]2016完美“圣”典 风云人物:Mikasa专访
2016/12/07 DOTA
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
TensorFlow实现RNN循环神经网络
2018/02/28 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
python实现三种随机请求头方式
2021/01/05 Python
巴西在线鞋店:Shoestock
2017/10/28 全球购物
法学毕业生自我鉴定
2014/01/31 职场文书
平安家庭示范户事迹
2014/06/02 职场文书
土建施工员岗位职责
2014/07/16 职场文书
创建绿色社区汇报材料
2014/08/22 职场文书
安全生产感想
2015/08/07 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python