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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
Javascript 中文字符串处理额外注意事项
Nov 15 Javascript
JS 如何获取radio选中后的值及不选择取radio的值
Oct 28 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
angularjs学习笔记之完整的项目结构
Sep 26 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
vue分类筛选filter方法简单实例
Mar 30 Javascript
深入理解vue中的$set
Jun 01 Javascript
vue组件之Alert的实现代码
Oct 17 Javascript
微信小程序js文件改变参数并在视图上及时更新【推荐】
Jun 11 Javascript
layer弹出子iframe层父子页面传值的实现方法
Nov 22 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 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中执行系统外部命令
2006/10/09 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
php异常:Parse error: syntax error, unexpected T_ENCAPSED_AND_WHITESPACE  eval()'d code error
2011/05/19 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
将word转化为swf 如同百度文库般阅读实现思路及代码
2013/08/09 PHP
Thinkphp 框架扩展之数据库驱动常用方法小结
2020/04/23 PHP
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
jQuery判断checkbox选中状态
2016/05/12 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
vue中的provide/inject的学习使用
2018/05/09 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
vue 判断元素内容是否超过宽度的方式
2020/07/29 Javascript
vue element el-transfer增加拖拽功能
2021/01/15 Vue.js
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
十行代码使用Python写一个USB病毒
2019/06/21 Python
python实现最小二乘法线性拟合
2019/07/19 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
python手写均值滤波
2020/02/19 Python
django列表筛选功能的实现代码
2020/03/27 Python
python实现canny边缘检测
2020/09/14 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
“四风”问题整改措施和努力方向
2014/09/20 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
Python实战之大鱼吃小鱼游戏的实现
2022/04/01 Python
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技