VUE+Canvas实现简单五子棋游戏的全过程

2024-04-02 19:04:59 889人浏览泡泡鱼

摘要

前言在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为：（1）画棋盘；（2）监听点击事件画黑白棋子；（3）每次落子之后判断是否有5子相

前言

在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为：

（1）画棋盘；

（2）监听点击事件画黑白棋子；

（3）每次落子之后判断是否有5子相连，有则赢。

最复杂的恐怕就是如何判断五子棋赢了，那么就先从简单的开始，画个棋盘吧~

1、画棋盘

棋盘很简单，我们画个15*15的棋盘，横线竖线相交错：


drawCheckerboard() {
      // 画棋盘
      let _this = this;
      _this.ctx.beginPath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.rect(0, 0, 450, 450);
      _this.ctx.fill();
      for (var i = 0; i < 15; i++) {
        _this.ctx.beginPath();
        _this.ctx.strokeStyle = "#D6D1D1";
        _this.ctx.moveTo(15 + i * 30, 15); //垂直方向画15根线，相距30px;
        _this.ctx.lineTo(15 + i * 30, 435);
        _this.ctx.stroke();
        _this.ctx.moveTo(15, 15 + i * 30); //水平方向画15根线，相距30px;
        _this.ctx.lineTo(435, 15 + i * 30);
        _this.ctx.stroke();
 
        _this.resultArr.push(new Array(15).fill(0));
      }
}

先用一个450 * 450 的正方形打底，四周留15宽度的空白，然后画上间隔为30的线。在for循环里，我们还初始化了一个15 * 15的二维数组，并全部填上0，没错，就是记录落子的。

2、监听点击事件画黑白棋子

好了，我们在获取dom的时候顺便监听一下click事件，来画棋子：

let container = document.getElementById("Gobang");

container.addEventListener("click", _this.handleClick);


handleClick(event) {
      let x = event.offsetX - 70;
      let y = event.offsetY - 70;
      if (x < 15 || x > 435 || y < 15 || y > 435) {
        // 点出界的
        return;
      }
      this.drawChess(x, y);
      if(this.winGame){
        this.drawResult();
        return;
      }
      this.whiteTurn = !this.whiteTurn;
      this.drawText();
}

画棋子的代码：


drawChess(x, y) {
      let _this = this;
      let xLine = Math.round((x - 15) / 30); // 竖线第x条
      let yLine = Math.round((y - 15) / 30); // 横线第y条
      if(_this.resultArr[xLine][yLine] !== 0){
        return;
      }
      let grd = _this.ctx.createRadialGradient(
        xLine * 30 + 15,
        yLine * 30 + 15,
        4,
        xLine * 30 + 15,
        yLine * 30 + 15,
        10
      );
      grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
      grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
      _this.ctx.beginPath();
      _this.ctx.fillStyle = grd;
      _this.ctx.arc(
        xLine * 30 + 15,
        yLine * 30 + 15,
        10,
        0,
        2 * Math.PI,
        false
      );
      _this.ctx.fill();
      _this.ctx.closePath();
 
      _this.setResultArr(xLine, yLine);
      _this.checkResult(xLine, yLine);
}

很容易可以计算出点击坐标最近的那个棋盘交叉点，当然，如果那里已经落了子，就得return。然后在交点处画上白子或者黑子，这里用渐变填充使棋子看起来更像那么回事。接着，在对应的二维数组里记录一下棋子状况：


setResultArr(m, n) {
      let _this = this;
      _this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白棋为1；黑棋为2
 
}

3、检查五子棋输赢结果

输赢结果怎么判断？肉眼看去，无非就是以当前落子为0,0原点建立坐标系，然后判断0°，180°，45°和135°四条线上是否有连续5子。相比于直接遍历计数，更好的方法就是取出四条线上的数据，然后判断是否有相连的5个1或者2字符。

假设我们落子的数组坐标是[m, n]。

（1）横线的结果数组字符串：this.resultArr[m].join('')；

（2）竖线的结果数组字符串：


for(let i = 0; i<15; i++){
        lineHorizontal.push(_this.resultArr[i][n]);

}

（3）135°（左上到右下）：j从0-15，分别取this.resultArr[m - j][n -j]结果unshift进临时数组头部，取this.resultArr[m + j][n + j]放到临时数组尾部，行成结果；

（4）45°（左下到右上）：j从0-15，分别取this.resultArr[m + j][n -j]结果unshift进临时数组头部，取this.resultArr[m - j][n + j]放到临时数组尾部，行成结果；

当然这里面都是要判断一下数组越界。

得到结果字符串后，我们判断是否有“22222”或者“11111”这样的字符串存在，有则说明胜利。


checkResult(m ,n){ // 判断是否有5子相连
      let _this = this;
      let checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
      // 取出[m,n]横竖斜四条线的一维数组
      let lineVertical = _this.resultArr[m].join('');
      if(lineVertical.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let lineHorizontal = [];
      for(let i = 0; i<15; i++){
        lineHorizontal.push(_this.resultArr[i][n]);
      }
      lineHorizontal = lineHorizontal.join('');
      if(lineHorizontal.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line135 = [];
      for(let j = 0; j < 15; j++){
        if(m - j >= 0 && n - j >= 0){ // 左上角
          line135.unshift(_this.resultArr[m - j][n -j]);
        }
        if(j > 0 && m + j < 15 && n + j < 15){ // 右下角
          line135.push(_this.resultArr[m + j][n + j]);
        }
      }
      line135 = line135.join('');
      if(line135.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line45 = [];
      for(let j = 0; j < 15; j++){
        if(m + j < 15 && n - j >= 0){ // 右上角
          line45.unshift(_this.resultArr[m + j][n -j]);
        }
        if(j > 0 && m - j >=0 && n + j < 15){ // 左下角
          line45.push(_this.resultArr[m - j][n + j]);
        }
      }
      line45 = line45.join('');
      if(line45.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
}

最后胜出，我们显示一下是哪方获胜。

至此，一个简单的黑白棋游戏就做好了~~~~~

老规矩，源码贴上：


<template>
  <div class="gobang">
    <canvas id="gobang" width="800" height="600"></canvas>
  </div>
</template>
 
<script>
const CheckStrWhite = "11111";
const CheckStrBlack = "22222";
export default {
  name: "Gobang",
  data() {
    return {
      ctx: null,
      winGame: false,
      whiteTurn: false, // 白棋轮；true-黑棋轮
      resultArr: [] // 记录棋子位置的数组
    };
  },
  mounted() {
    let _this = this;
    let container = document.getElementById("gobang");
 
    container.addEventListener("click", _this.handleClick);
 
    _this.ctx = container.getContext("2d");
    _this.ctx.translate(70,70);
    _this.drawCheckerboard();
  },
  computed:{
    chessText(){
      return this.whiteTurn ? '白棋' : '黑棋';
    }
  },
  methods: {
    drawCheckerboard() {
      // 画棋盘
      let _this = this;
      _this.ctx.beginPath();
      _this.ctx.fillStyle = "#fff";
      _this.ctx.rect(0, 0, 450, 450);
      _this.ctx.fill();
      for (var i = 0; i < 15; i++) {
        _this.ctx.beginPath();
        _this.ctx.strokeStyle = "#D6D1D1";
        _this.ctx.moveTo(15 + i * 30, 15); //垂直方向画15根线，相距30px;
        _this.ctx.lineTo(15 + i * 30, 435);
        _this.ctx.stroke();
        _this.ctx.moveTo(15, 15 + i * 30); //水平方向画15根线，相距30px;棋盘为14*14；
        _this.ctx.lineTo(435, 15 + i * 30);
        _this.ctx.stroke();
 
        _this.resultArr.push(new Array(15).fill(0));
      }
      _this.drawText();
    },
    drawChess(x, y) {
      let _this = this;
      let xLine = Math.round((x - 15) / 30); // 竖线第x条
      let yLine = Math.round((y - 15) / 30); // 横线第y条
      if(_this.resultArr[xLine][yLine] !== 0){
        return;
      }
      let grd = _this.ctx.createRadialGradient(
        xLine * 30 + 15,
        yLine * 30 + 15,
        4,
        xLine * 30 + 15,
        yLine * 30 + 15,
        10
      );
      grd.addColorStop(0, _this.whiteTurn ? "#fff" : "#4c4c4c");
      grd.addColorStop(1, _this.whiteTurn ? "#dadada" : "#000");
      _this.ctx.beginPath();
      _this.ctx.fillStyle = grd;
      _this.ctx.arc(
        xLine * 30 + 15,
        yLine * 30 + 15,
        10,
        0,
        2 * Math.PI,
        false
      );
      _this.ctx.fill();
      _this.ctx.closePath();
 
      _this.setResultArr(xLine, yLine);
      _this.checkResult(xLine, yLine);
    },
    setResultArr(m, n) {
      let _this = this;
      _this.resultArr[m][n] = _this.whiteTurn ? 1 : 2; // 白棋为1；黑棋为2
 
    },
    
    checkResult(m ,n){ // 判断是否有5子相连
      let _this = this;
      let checkStr = _this.whiteTurn ? CheckStrWhite : CheckStrBlack;
      // 取出[m,n]横竖斜四条线的一维数组
      let lineVertical = _this.resultArr[m].join('');
      if(lineVertical.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let lineHorizontal = [];
      for(let i = 0; i<15; i++){
        lineHorizontal.push(_this.resultArr[i][n]);
      }
      lineHorizontal = lineHorizontal.join('');
      if(lineHorizontal.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line135 = [];
      for(let j = 0; j < 15; j++){
        if(m - j >= 0 && n - j >= 0){ // 左上角
          line135.unshift(_this.resultArr[m - j][n -j]);
        }
        if(j > 0 && m + j < 15 && n + j < 15){ // 右下角
          line135.push(_this.resultArr[m + j][n + j]);
        }
      }
      line135 = line135.join('');
      if(line135.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
      let line45 = [];
      for(let j = 0; j < 15; j++){
        if(m + j < 15 && n - j >= 0){ // 右上角
          line45.unshift(_this.resultArr[m + j][n -j]);
        }
        if(j > 0 && m - j >=0 && n + j < 15){ // 左下角
          line45.push(_this.resultArr[m - j][n + j]);
        }
      }
      line45 = line45.join('');
      if(line45.indexOf(checkStr) > -1){
        _this.winGame = true;
        return;
      }
    },
    drawText(){
      let _this = this;
      _this.ctx.clearRect(435 + 60, 0, 100, 70);
      _this.ctx.fillStyle = "#fff";
      _this.ctx.font="20px Arial";
      _this.ctx.fillText('本轮：' + _this.chessText, 435 + 70,  35);
    },
    drawResult(){
      let _this = this;
      _this.ctx.fillStyle = "#ff2424";
      _this.ctx.font="20px Arial";
      _this.ctx.fillText(_this.chessText+'胜！', 435 + 70,  70);
    },
    handleClick(event) {
      let x = event.offsetX - 70;
      let y = event.offsetY - 70;
      if (x < 15 || x > 435 || y < 15 || y > 435) {
        // 点出界的
        return;
      }
      this.drawChess(x, y);
      if(this.winGame){
        this.drawResult();
        return;
      }
      this.whiteTurn = !this.whiteTurn;
      this.drawText();
    }
  }
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.gobang {
  #gobang {
    background: #2a4546;
  }
}
</style>

总结

到此这篇关于Vue+Canvas实现简单五子棋游戏的文章就介绍到这了,更多相关VUE+Canvas五子棋游戏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: VUE+Canvas实现简单五子棋游戏的全过程

本文链接: https://www.lsjlt.com/news/125555.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

VUE+Canvas实现简单五子棋游戏的全过程

前言在布局上，五子棋相比那些目标是随机运动的游戏，实现起来相对简单许多，思路也很清晰，总共分为：（1）画棋盘；（2）监听点击事件画黑白棋子；（3）每次落子之后判断是否有5子相...

99+

2024-04-02
jQuery实现简单五子棋游戏

本文实例为大家分享了jQuery实现五子棋游戏的具体代码，供大家参考，具体内容如下五子棋小游戏实现的基本思路：以15*15标准面板为棋盘布局，黑白棋子交替下棋。每落下一枚棋子就判...

99+

2024-04-02
QT实现简单五子棋游戏

本文实例为大家分享了QT实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 FIR.pro #----------------------------------------...

99+

2024-04-02
pygame实现简单五子棋游戏

本文实例为大家分享了pygame实现简单五子棋游戏的具体代码，供大家参考，具体内容如下看代码： ①Gomuku2.py： import sys import random impo...

99+

2024-04-02
java实现简单的五子棋游戏

目录一、主要界面二、功能概况三、代码部分四、部分效果展示本文实例为大家分享了java实现简单五子棋游戏的具体代码，供大家参考，具体内容如下一、主要界面 1、登录界面；2、游戏选择界...

99+

2024-04-02
JavaScript+canvas实现五子棋游戏

本文实例为大家分享了JavaScript+canvas实现五子棋游戏的具体代码，供大家参考，具体内容如下效果截图：代码实现： <!DOCTYPE html> &l...

99+

2024-04-02
python实现简单五子棋小游戏

用python实现五子棋简单人机模式的练习过程，供大家参考，具体内容如下最近在初学python，今天就用自己的一些粗浅理解，来记录一下这几天的python简单人机五子棋游戏的练习，...

99+

2024-04-02
C语言实现简单五子棋游戏

在生活中五子棋是一个十分普遍的一款游戏，今天让我们一起来实现这款游戏。 1.初始化棋盘 char ret; //数据存储在一个二维数组中,玩家下去*，电脑下去#. char ...

99+

2024-04-02
java实现简单五子棋小游戏(2)

本文实例为大家分享了java实现简单五子棋小游戏游戏的具体代码，供大家参考，具体内容如下讲解在第一步实现的基础上，添加游戏结束条件。五子棋游戏中的相同棋子如果同时有五个连接成一条...

99+

2024-04-02
java实现简单五子棋小游戏(1)

本文实例为大家分享了java实现简单五子棋小游戏的具体代码，供大家参考，具体内容如下讲解五子棋，实际上就是用一个数组来实现的。没有其他很复杂的结构。首先我们制作五子棋，先要有一个...

99+

2024-04-02
原生JavaScript实现简单五子棋游戏

本文实例为大家分享了JavaScript实现简单五子棋游戏的具体代码，供大家参考，具体内容如下 HTML页面注释都很明确了，大家好好学习。 <!DOCTYPE html&...

99+

2024-04-02
JavaScript实现简单五子棋游戏的方法

本篇内容介绍了“JavaScript实现简单五子棋游戏的方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！本文实例为大家分享了JavaScr...

99+

2023-06-20
C语言实现简单的五子棋游戏

本文实例为大家分享了c语言实现简单五子棋游戏的具体代码，供大家参考，具体内容如下环境vs2017 一、游戏设计思想 1.该代码设置为玩家1（*） vs 玩家2（O） 2.选择玩游...

99+

2024-04-02
Java怎么实现简单的五子棋游戏

本文小编为大家详细介绍“Java怎么实现简单的五子棋游戏”，内容详细，步骤清晰，细节处理妥当，希望这篇“Java怎么实现简单的五子棋游戏”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。项目结构这个是在网上找的资源，...

99+

2023-06-30
Vue实现五子棋小游戏

本文实例为大家分享了Vue实现五子棋小游戏的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> ...

99+

2024-04-02
java怎么实现简单五子棋小游戏

本篇文章为大家展示了java怎么实现简单五子棋小游戏，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。讲解五子棋，实际上就是用一个数组来实现的。没有其他很复杂的结构。首先我们制作五子棋，先要有一个棋盘。...

99+

2023-06-26
Python实现简易五子棋游戏

本文实例为大家分享了Python实现五子棋游戏的具体代码，供大家参考，具体内容如下 class CheckerBoard(): '''棋盘类''' def __ini...

99+

2024-04-02
C语言实现简单的五子棋小游戏

本文实例为大家分享了C语言实现五子棋小游戏的具体代码，供大家参考，具体内容如下我们需要一个二维数组去储存当前的棋盘状态，然后打印出来。我们游戏的逻辑是初始化棋盘，打印棋盘，人下棋...

99+

2024-04-02
java swing怎么实现简单的五子棋游戏

这篇文章将为大家详细讲解有关java swing怎么实现简单的五子棋游戏，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。用java swing写的一个简单的五子棋游戏。下面是Main.java。packag...

99+

2023-06-06
C++实现简易的五子棋游戏

本文实例为大家分享了C++实现简易五子棋游戏的具体代码，供大家参考，具体内容如下 //用c++实现五子棋 #include <iostream> #include <...

99+

2024-04-02