原生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 相关文章推荐
用javascript实现的仿Flash广告图片轮换效果
Apr 24 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
判断输入的字符串是否是日期格式的简单方法
Jul 11 Javascript
浅谈javascript中关于日期和时间的基础知识
Jul 13 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
Sep 25 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
Bootstrap 3 按钮标签实例代码
Feb 21 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
php中存储用户ID和密码到mysql数据库的方法
2013/02/06 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
juqery 学习之六 CSS--css、位置、宽高
2011/02/11 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
利用JQuery实现datatables插件的增加和删除行功能
2017/01/06 Javascript
javaScript嗅探执行神器-sniffer.js
2017/02/14 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
纯JS实现简单的日历
2017/06/26 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
2020/04/17 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
用matplotlib画等高线图详解
2017/12/14 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
Python----数据预处理代码实例
2019/03/20 Python
python队列Queue的详解
2019/05/10 Python
Django Admin中增加导出Excel功能过程解析
2019/09/04 Python
HTML5 播放 RTSP 视频的实例代码
2019/07/29 HTML / CSS
巴西宠物商店:Cobasi
2019/04/19 全球购物
行政助理求职自荐信
2013/10/26 职场文书
制作部班长职位说明书
2014/02/26 职场文书
广告学专业毕业生自荐信
2014/05/28 职场文书
世界读书日的活动方案
2014/08/20 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
教师继续教育反思周记
2015/06/25 职场文书
婚宴来宾致辞
2015/07/28 职场文书
残联2016年全国助残日活动总结
2016/04/01 职场文书