如何用canvas实现五子棋

自己的游戏系列

html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body style="margin: 0;"><canvas style="margin-left: 20px;" id="five"></canvas><h1 style="font-size: 40px;font-weight: bolder;margin-left: 200px;margin-top: 0;margin-bottom: 0;">五子棋</h1><h2 style="font-size: 40px;font-weight: bolder;margin-left: 200px;margin-top: 0;" id="currole">轮到:黑</h2><div id="res" style="font-size: 40px;font-weight: bolder;margin-left: 200px;">胜者:</div>
</body>
<script>let cav = document.getElementById('five')let ctx = cav.getContext('2d')let k = 50 //倍数let r = k/4cav.width = cav.height = 16*kctx.strokeStyle="#000000";for(let i = 0;i<15;i++){ctx.beginPath();ctx.moveTo((i+1)*k,k);ctx.lineTo((i+1)*k,15*k);ctx.stroke();}for(let i = 0;i<15;i++){ctx.beginPath();ctx.moveTo(k,(i+1)*k);ctx.lineTo(15*k,(i+1)*k);ctx.stroke();}function initer(event){let x = event.offsetX - klet y = event.offsetY - klet xclose = close(x,0,14)let yclose = close(y,0,14)let nodearr = []let minxd = Math.abs(x-xclose[0]*k)<Math.abs(x-xclose[1]*k)?Math.abs(x-xclose[0]*k)<r?xclose[0]*k:undefined:Math.abs(x-xclose[1]*k)<r?xclose[1]*k:undefinedlet maxyd = Math.abs(y-yclose[0]*k)<Math.abs(y-yclose[1]*k)?Math.abs(y-yclose[0]*k)<r?yclose[0]*k:undefined:Math.abs(y-yclose[1]*k)<r?yclose[1]*k:undefinedif((minxd!==undefined)&&(maxyd!==undefined)){nodearr = [minxd,maxyd]}if(nodearr.length!==0){setNode(nodearr)}}cav.addEventListener("click",initer)function close(coo,lort,rorb){coo<0?coo=0:coo=coocoo>14*k?coo=14*k:coo=coolet dect = rorb - lortif(dect===1){return [lort,rorb]}else{if(coo<(lort+Math.ceil(dect/2))*k){let nlort=lortlet nrorb=lort+Math.ceil(dect/2)return close(coo,nlort,nrorb)}else{let nlort=lort+Math.ceil(dect/2)let nrorb=rorbreturn  close(coo,nlort,nrorb)}}}let colorflag = 0function setNode(arr){if(gomoku[arr[0]/k][arr[1]/k]!==undefined){return}if(colorflag===0){ctx.fillStyle="black"ctx.beginPath();ctx.arc(arr[0]+k,arr[1]+k,r,0,2*Math.PI);ctx.stroke();ctx.fill();checkFinish([arr[0]/k,arr[1]/k])gomoku[arr[0]/k][arr[1]/k] = colorflagcolorflag = 1document.getElementById('currole').innerHTML="轮到:白"}else{ctx.fillStyle="white"ctx.beginPath();ctx.arc(arr[0]+k,arr[1]+k,r,0,2*Math.PI);ctx.stroke();ctx.fill();checkFinish([arr[0]/k,arr[1]/k])gomoku[arr[0]/k][arr[1]/k] = colorflagcolorflag = 0document.getElementById('currole').innerHTML="轮到:黑"}}</script>
<script src="./five.js"></script>
</html>

外部js文件部分

let gomoku = new Array(15)
for(let i = 0;i<gomoku.length;i++){gomoku[i]=new Array(15)
}
//black 0 white 1function checkFinish(curnode){for(let i =0;i<4;i++){let totalLength = 1let aflag = truelet bflag = truefor(let j=0;j<4;j++){let dictNum = j+1switch(i){case 0:if(aflag){(gomoku[curnode[0]+dictNum][curnode[1]]===colorflag)&&((curnode[0]+dictNum)<=14)?totalLength++:aflag=false}if(bflag){(gomoku[curnode[0]-dictNum][curnode[1]]===colorflag)&&((curnode[0]-dictNum)>=0)?totalLength++:bflag=false}break;case 1:if(aflag){(gomoku[curnode[0]][curnode[1]+dictNum]===colorflag)&&((curnode[1]+dictNum)<=14)?totalLength++:aflag=false}if(bflag){(gomoku[curnode[0]][curnode[1]-dictNum]===colorflag)&&((curnode[1]-dictNum)>=0)?totalLength++:bflag=false}break;case 2:if(aflag){(gomoku[curnode[0]+dictNum][curnode[1]+dictNum]===colorflag)&&((curnode[1]+dictNum)<=14)&&((curnode[0]+dictNum)<=14)?totalLength++:aflag=false}if(bflag){(gomoku[curnode[0]-dictNum][curnode[1]-dictNum]===colorflag)&&((curnode[1]-dictNum)>=0)&&((curnode[0]-dictNum)>=0)?totalLength++:bflag=false}break;case 3:if(aflag){(gomoku[curnode[0]+dictNum][curnode[1]-dictNum]===colorflag)&&((curnode[1]-dictNum)>=0)&&((curnode[0]+dictNum)<=14)?totalLength++:aflag=false}if(bflag){(gomoku[curnode[0]-dictNum][curnode[1]+dictNum]===colorflag)&&((curnode[1]+dictNum)<=14)&&((curnode[0]-dictNum)>=0)?totalLength++:bflag=false}break;}if(totalLength>=5){if(colorflag===0){document.getElementById('res').innerHTML='胜者:黑方'cav.removeEventListener("click",initer)}else{document.getElementById('res').innerHTML='胜者:白方'cav.removeEventListener("click",initer)}break;}if((aflag===false)&&(bflag===false)){break;}}if(totalLength>=5){break;}}
}
//all work and no play makes jack a dull boy

如何用canvas实现五子棋相关推荐

php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
五子棋人机对战_原生JS+Canvas实现五子棋游戏
原生JS+Canvas实现五子棋游戏效果图主要功能模块为: 1.人机对战功能 2.悔棋功能 3.撤销悔棋功能二.代码详解 2.1 人机对战功能实现从效果图可以看到,棋盘的横竖可以放的位置为15 ...
canvas简单五子棋
canvas简单五子棋效果思路代码效果思路 canvans 绘制棋盘,绘制时候边缘预留棋子位置监听点击事件绘制落子并记录到字典中获胜判定,在四个方向上检测是否有足够数量的连贯棋子代码 ...
PHP绘制99的棋盘,JS canvas绘制五子棋的棋盘
本文为大家分享了JS canvas绘制五子棋棋盘的具体代码,供大家参考,具体内容如下 box-shadow:给元素块周边添加阴影效果. 语法:box-shadow: h-shadow v-shadow ...
教你如何用Canvas绘制整身的哆啦A梦
教你如何用Canvas绘制整身的哆啦A梦上牌你文章我们说到了如何使用canvas绘制哆啦A梦,但当时只是绘制了哆啦A梦的头部,之后有学员留言说可不可以教大家绘制整身的哆啦A梦,想了想,决定安排一下. ...
贝塞尔曲线是什么？如何用 Canvas 绘制三阶贝塞尔曲线？
大家好,我是前端西瓜哥. 今天谈谈贝塞尔曲线是什么以及它的原理,并说说如何用 Canvas 技术绘制一条三阶贝塞尔曲线. 贝塞尔曲线是什么? 贝塞尔曲线,是通过几个简单的参数描述一条曲线的一种参数曲线 ...
php 设计五子棋游戏,canvas实现五子棋游戏的代码示例
本篇文章给大家带来的内容是关于canvas实现五子棋游戏的代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果代码五子棋 (function () { // 画布绘制 l ...
【图形基础篇】02 # 指令式绘图系统：如何用Canvas绘制层次关系图？
说明 [跟月影学可视化]学习笔记. 如何用 Canvas 绘制几何图形? 1. Canvas 元素和 2D 上下文 Canvas 元素上的 width 和 height 属性不等同于 Canvas 元 ...
html五子棋悔棋,原生 JS + Canvas 实现五子棋游戏
原标题:原生 JS + Canvas 实现五子棋游戏 || 一.功能模块先看下现在做完的效果: 线上体验: https://wj704.github.io/five_game.html 主要功能模块 ...

如何用canvas实现五子棋

自己的游戏系列

如何用canvas实现五子棋相关推荐

最新文章

热门文章