canvas简单五子棋

效果
思路
- 代码

效果

思路

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

代码

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

canvas简单五子棋相关推荐

canvas绘制简单五子棋棋盘
什么是 canvas <canvas> 是HTML5中用于图形的绘制的元素.<canvas> 标签只是图形容器,canvas 元素本身是没有绘图能力的.所有的绘制工作必须在 J ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...
编写五子棋的完整python代码_python制作简单五子棋游戏
本文实例为大家分享了python五子棋游戏的具体代码,供大家参考,具体内容如下 #五子棋 '" 矩阵做棋盘 16*16 "+" 打印棋盘 for for 游戏是否结束开 ...
python写游戏棋牌游戏_使用python实现简单五子棋游戏
使用python实现简单五子棋游戏发布时间:2020-08-29 06:12:30 来源:脚本之家阅读:73 作者:weixin_42874933 用python实现五子棋简单人机模式的练习过程, ...
用html5做一个简单的作品,html5 canvas 简单画板实现代码
canvas简单画板 canvas简单画板提示:您可以先修改部分代码再运行
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
html5画板功能,JS实现canvas简单小画板功能
本文实例为大家分享了JS实现canvas简单小画板的具体代码,供大家参考,具体内容如下 Html部分: Document CSS部分: *{ margin: 0; padding: 0; list-s ...
html5 canvas 画板 demo,html5 canvas 简单画板实现代码
canvas简单画板 #can{ width:600px; height:500px; border:1px solid #ccc; margin-top:0px; margin-left:20px; ...

canvas简单五子棋

canvas简单五子棋

效果

思路

代码

canvas简单五子棋相关推荐

最新文章

热门文章