js canvas实现五子棋小游戏


Posted in Javascript onJanuary 22, 2021

本文实例为大家分享了canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下

效果

js canvas实现五子棋小游戏

思路

  • canvans 绘制棋盘,绘制时候边缘预留棋子位置
  • 监听点击事件绘制落子并记录到字典中
  • 获胜判定,在四个方向上检测是否有足够数量的连贯棋子

js canvas实现五子棋小游戏

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ym</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 0
    }

    .result {
      text-align: center;
    }
    button{
      display: block;
      margin: 0 auto;
      padding: 4px 20px;
      border:0;
      color: #fff;
      outline: none;
      border-radius: 3px;
      background: #43a6ff
    }
    button:hover{
      font-weight: bold;
      cursor: pointer;
    }
  </style>
</head>
<body>
<canvas id="cv" width="200px" height="200px"></canvas>
<p class="result"></p>
<button onclick="loadPanel(400, 400,30,13)">刷新</button>
<script>

  loadPanel(400, 400,30,13);

  /**
   * 1) 点击落子并切换执子者
   * 2)以当前落子位置为基准,以‘米'字型判定,是否能构成五连及以上
   * @param w 棋盘宽度
   * @param h 棋盘高度
   * @param cs 格子尺寸
   * @param ps 棋子半径
   */
  function loadPanel(w, h, cs, ps) {
    let i, j, k;
    let chks = [[1, 0], [0, 1], [1, 1], [1, -1]];//水平,纵向,斜下,斜上 四个方向
    let successNum = 5;//赢棋标准
    let resultEl = document.querySelector('.result');

    //1)绘制棋盘,边缘应隔开棋子半径的距离
    cs = cs || 16;//默认格子宽高
    ps = ps || 4;//棋子半径
    h = h || w;//高度默认等于宽度

    let el = document.getElementById('cv');
    el.setAttribute('width', w + 'px');
    el.setAttribute('height', h + 'px');
    let context = el.getContext("2d");
    //计算棋盘分割,向下取整
    let splitX = ~~((w - 2 * ps) / cs), splitY = ~~((h - 2 * ps) / cs);

    //初始化落子位置使用字典存储,相较于数组简单且减少内存占用
    let pieces = {};
    //循环划线
    context.translate(ps, ps);
    context.beginPath();
    context.strokeStyle = '#000';
    //垂直线
    for (i = 0; i < splitX + 1; i++) {
      context.moveTo(cs * i, 0);
      context.lineTo(cs * i, splitY * cs);
      context.stroke();
    }
    //水平线
    for (j = 0; j < splitY + 1; j++) {
      context.moveTo(0, cs * j);
      context.lineTo(splitX * cs, cs * j);
      context.stroke();
    }
    context.closePath();

    let user = 0, colors = ['#000', '#fefefe'];
    el.addEventListener('click', function (e) {
      let x = e.offsetX,
        y = e.offsetY,
        //计算落子范围
        rx = ~~((x - ps) / cs) + (((x - ps) % cs <= cs / 2) ? 0 : 1),
        ry = ~~((y - ps) / cs) + (((y - ps) % cs <= cs / 2) ? 0 : 1);
      //绘制棋子
      context.beginPath();
      context.arc(cs * rx, cs * ry, ps, 2 * Math.PI, false);
      context.fillStyle = colors[user];
      context.strokeStyle = '#000';
      user ? user = 0 : user = 1;//切换执子者
      context.fill();
      context.stroke();
      context.closePath();

      //记录棋子位置
      let piece = pieces[rx + '-' + ry] = user;

      //米字型计算结果,以当前落子位置计算是否存在某个方向上具有连续的五个相同棋子
      for (j = 0; j < chks.length; j++) {
        let num = 1, chk = chks[j];
        for (i = 1; i <= 4; i++) {
          if (pieces[(rx + chk[0] * i) + '-' + (ry + chk[1] * i)] == piece) {
            num++
          } else {
            for (i = -1; i >= -4; i--) {
              if (pieces[(rx + chk[0] * i) + '-' + (ry + chk[1] * i)] == piece) {
                num++
              }
            }
            break
          }
        }
        if (num == successNum) {
          resultEl.innerHTML = ['白', '黑'][user] + '方赢';
          break;
        }
      }
    })
  }
</script>
</body>
</html>

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

Javascript 相关文章推荐
javascript面向对象之Javascript 继承
May 04 Javascript
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
微信小程序模版渲染详解
Jan 26 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
vue 实现单选框设置默认选中值
Nov 07 Javascript
vue实现购物车的监听
Apr 20 Javascript
JS实现网站楼层导航效果代码实例
Jun 16 Javascript
swiper自定义分页器的样式
Sep 14 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
element-ui 弹窗组件封装的步骤
Jan 22 #Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 #Javascript
原生js实现放大镜组件
Jan 22 #Javascript
Vue仿Bibibili首页的问题
Jan 21 #Vue.js
如何在vue 中使用柱状图 并自修改配置
Jan 21 #Vue.js
Vue看了就会的8个小技巧
Jan 21 #Vue.js
You might like
PHP防注入安全代码
2008/04/09 PHP
如何使用GDB调试PHP程序
2015/12/08 PHP
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js实现简单折叠、展开菜单的方法
2015/08/28 Javascript
小巧强大的jquery layer弹窗弹层插件
2015/12/06 Javascript
Knockout自定义绑定创建方法
2015/12/26 Javascript
javascript每日必学之循环
2016/02/19 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
利用jquery实现瀑布流3种案例
2016/09/18 Javascript
js中用cssText设置css样式的简单方法
2016/09/19 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
小程序清理本地缓存的方法
2018/08/17 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
2019/05/14 Javascript
简单了解vue.js数组的常用操作
2019/06/17 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
Python2.x和3.x下maketrans与translate函数使用上的不同
2015/04/13 Python
TensorFlow安装及jupyter notebook配置方法
2017/09/08 Python
python绘制热力图heatmap
2020/03/23 Python
Python爬虫学习之翻译小程序
2019/07/30 Python
python批量处理文件或文件夹
2020/07/28 Python
python打印n位数“水仙花数”(实例代码)
2019/12/25 Python
python梯度下降算法的实现
2020/02/24 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
用python对excel查重
2020/12/07 Python
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
专业实习自我鉴定
2013/10/29 职场文书
《会变的花树叶》教学反思
2014/02/10 职场文书
综合实践活动总结
2014/05/05 职场文书