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

最新推荐文章于 2024-06-10 20:28:35 发布
最新推荐文章于 2024-06-10 20:28:35 发布
阅读量5.2k 收藏 158
点赞数 62
分类专栏： Canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/denglouhen/article/details/116485952
版权

css3 vue.js canvas

之前的canvas小游戏系列欢迎大家戳：

《VUE实现一个Flappy Bird~~~》

《VUE+Canvas实现上吊火柴人猜单词游戏》

《VUE+Canvas 实现桌面弹球消砖块小游戏》

《VUE+Canvas实现雷霆战机打字类小游戏》

《VUE+Canvas实现财神爷接元宝小游戏》

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

（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>

可怕，记录一下，留个念想

登楼痕
关注
  • 62
    点赞
  • 踩
  • 158
    收藏
    觉得还不错? 一键收藏
  • 34
    评论
专栏目录
vue 使用原生canvas_利用 canvas+vue 进行纯前端视频拼接或者说合并？或者说无缝切换。...
weixin_39881387的博客
12-20 1172
canvas-merge-video-in-vueBuild Setup# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run buildcanvas-merge-video-in-vue ...
js+canvas实现五子棋小游戏
11-19
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码，供大家参考，具体内容如下 效果展示： 源码展示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
js+canvas黑白棋
weixin_30800807的博客
09-26 195
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ font-size:...
vue canvas 区域绘制有绘制多边形，包括拖拽、重置、撤销、判断线段重合、判断点是否在多边形内
qq_30687739的博客
12-01 2708
先上效果图（gif 图， 应该是可以看到的吧）对了，解释一下，我这个里面多排序的部分，是因为划线你肯定要有顺序，因为我从接口拿到的顺序是打乱的，所以我按照升序 整理了一下。现在绘制的下面之所以是白色的，是因为录gif的时候 我监控没打开，所以监控没显示出来，用图片也是可以的。我是一个白菜，里面还是有部分搞不太懂，建议可以看一下参考文献第一个链接，问问大佬，然后我就直接上代码了，我写了大量的注释，要是看不懂的，我再解释。
vue3版本网页小游戏_vue写个小游戏
最新发布
2401_85124858的博客
06-10 644
console.log(i, k, onei, onek, oneiSub, onekSub, “测试”);ElMessage.success(“恭喜您，挑战成功！// 前置点击如果槽位满了还没有消除完。// 消除动作 和 添加爆炸效果。// 消除动作 和 添加爆炸效果。// 实现爆炸💥效果。挑战失败如何判断呢？
vue实现pdf导出解决生成canvas模糊等问题(推荐)
10-17
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧
基于Vue+canvas实现视频截图功能
LViverson的博客
02-08 2854
开发过程中遇到一个实际问题，上传的视频需要提供视频封面（视频封面必填）。封面可以自己制作并上传，但是这样需要脱离网站，用其他方式制作封面，使用体验并不友好，因此第一个想到的方案是：上传视频时，若人员未上传封面，自动截取视频第一帧作为封面，但是这样会出现一种情况：视频第一帧是黑色，导致封面为黑色。因此考虑视频上传后，在播放中由人员自行截取画面作为视频封面。 简单效果如图： 前端代码如下： <template> <div> <video src="https://{{
vue实现五子棋游戏
11-20
在本文中，我们将探讨如何使用Vue.js框架来实现一个五子棋游戏。Vue.js是一个流行的JavaScript库，用于构建用户界面，特别适合构建单页应用程序。下面我们将详细解析这个五子棋游戏的实现步骤： 1. **创建五子棋空...
基于SSM和VUE的五子棋手机网络对战游戏的设计与实现（免费提供全套java开源项目源码+论文）
05-24
为了满足用户在移动设备上进行五子棋对战的需求，我们设计并实现了“基于SSM和VUE的五子棋手机网络对战游戏”项目。 项目目的 本项目旨在开发一款高性能、用户体验良好的手机端五子棋网络对战游戏，具体目标包括： ...
HTML5实现的可调难度五子棋游戏源码.zip
11-04
在这个"HTML5实现的可调难度五子棋游戏源码.zip"压缩包中，包含的是一份使用HTML5、CSS3以及可能的JavaScript（或者更具体的框架如jQuery或Vue.js）编写的五子棋游戏的源代码。下面将详细解释这些技术及其在五子棋...
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能 把pagex转化为offsetx
weixin_52633842的博客
05-06 4105
vue 实现canvas绘制地图，引用图片，对画布进行原点 滚轮缩放，按键缩放，拖动等功能
五子棋，基于java，vue3，可在线，人机对战五子棋.zip
05-26
五子棋，基于java，vue3，可在线，人机对战五子棋.zip
Vue+websocket实现双人在线五子棋
05-17
把项目拷贝到webstorm即可运行，前端服务器输入vue-cli-service serve运行，后端服务器输入node ws.js运行
原生JS+Canvas实现五子棋游戏
10-19
主要为大家详细介绍了原生JS+Canvas实现五子棋游戏，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue框架之抽奖项目
weixin_42373873的博客
07-12 1789
在之前我写的项目以及博客中有提及到MVC模式，在此先对MVC进行一下简单的回顾： MVC包含了Model（模型层）,View（视图层）和Controller（控制层）三层。 那么它是如何工作的呢？首先视图层会将指令给到控制层，控制层会完成相应的业务逻辑。完成业务逻辑之后它会要求 模型层改变数据状态，模型层会进行数据的填充，然后会将新的数据发送到视图层，视图层会重新渲染页面，然后返回给客户端。 那此篇重点是讨论Vue框架，Vue框架是MVVM模式: MVVM的含义：Model ， View， ViewMod
基于vue框架使用canvas实现井字棋小游戏
qq_41929578的博客
04-06 3983
引言：最近实现了一个图片上传压缩的功能，使用了canvas，所以学习一下canvas的语法，实现一个井字棋小游戏，这个小游戏可以人人对弈，如果大家有兴趣，可以对代码进行迭代，比如采用极大值极小值搜索法来实现人机对弈或者机机对弈。 废话少说，先看演示效果:点击此处预览效果 1. 创建画布 <div id="app" > <div style="border: solid 1px #000000 ;width: 600px;height: 600px;" @click="getLo
VUE+Webpack游戏设计：增加游戏战略性平衡和实现资源预加载
tyler_download的专栏
06-08 1191
游戏的一个可玩性在于，让玩家在一种战略平衡中做抉择。例如我们在游戏开始时让玩家拥有120单位的能量，玩家可以采取以下几种步骤来开展游戏： 1.建筑一个卫星30E，一个炮台80E，然后还剩10E。然后等300毫秒后收集第一个能量泡，从而获得足够能源建造其他卫星或炮台。 2.连续建造两个卫星60E，剩下60E，等300毫秒后获取两个能量泡，从而获得总共260E的能量，然后玩家可以连续建造三个炮台。...
vue.js 五子棋
weixin_43742439的博客
10-27 257
<template> <div class="home"> <table border="1" align="center"> <tr v-for="(item1, index1) in arr" :key="index1"> <td v-for="(item2, index2) in item1" :key="index2" class="box"
Vue 实现人机五子棋
weixin_34393428的博客
12-13 1749
预览效果 github源码 核心代码 export default { data () { return { chess: {}, context: {}, chessBoard: [], // 记录是否走过 me: true, count: 0, // 所有赢...
vue3+canvas实现拓扑图
05-23
实现拓扑图可以使用 Vue3 和 Canvas 结合来完成。下面是一个简单的实现过程： 1. 首先，需要安装 Vue3 和 Canvas 库： ``` bash npm install vue@next npm install canvas --save ``` 2. 在 Vue3 中创建一个组件，用于渲染拓扑图。在组件中引入 Canvas 库： ``` javascript <template> <canvas ref="canvas"></canvas> </template> <script> import { onMounted, ref } from 'vue' import Canvas from 'canvas' export default { setup() { const canvasRef = ref(null) onMounted(() => { const canvas = canvasRef.value const ctx = canvas.getContext('2d') // 在这里进行绘制 }) return { canvasRef } } } </script> ``` 3. 在组件的 `onMounted` 钩子函数中，获取 Canvas 的上下文对象 `ctx`，并进行绘制。可以使用 Canvas 的 API 画出线条、圆形等形状，也可以使用外部库来绘制更复杂的图形。 4. 在绘制时，可以将节点和线条信息存储在数组中，以方便后续的更新和交互。例如： ``` javascript // 存储节点和线条信息的数组 const nodes = [ {x: 100, y: 100, r: 20, color: '#ff0000'}, {x: 200, y: 200, r: 30, color: '#00ff00'} ] const links = [ {source: 0, target: 1}, {source: 1, target: 2} ] // 绘制节点 nodes.forEach(node => { ctx.beginPath() ctx.arc(node.x, node.y, node.r, 0, Math.PI * 2) ctx.fillStyle = node.color ctx.fill() }) // 绘制线条 links.forEach(link => { const source = nodes[link.source] const target = nodes[link.target] ctx.beginPath() ctx.moveTo(source.x, source.y) ctx.lineTo(target.x, target.y) ctx.stroke() }) ``` 以上就是一个简单的 Vue3 和 Canvas 实现拓扑图的过程。需要注意的是，Vue3 的模板中不能直接使用 Canvas，需要通过 `ref` 引用实现。另外，绘制时需要注意节点和线条的位置信息，以及 Canvas 的坐标系。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 34
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值