使用h5制作一个五子棋游戏
2024-06-15 02:25:32
思路解析
1、制作棋盘
2、绘制棋子
3、判定胜负
4、继续/停止
知识点总结
canvas.moveTo(x,y) 决定从线条绘制开始的地方
canvas.ineTo(x,y) 决定线条结束的地方
canvas.beginPath() 开始绘制一条路径/重置一条路径
canvas.arc(x,y,直径,角度,起始点,是否为空心) 绘制圆的方法
canvas.fill() 填充canvas的颜色，默认为黑色
canvas.closePath() 当前点到开始点的路径
游戏实现
绘制棋盘
for(let i = 0; i < 19; i++){//(x,y)context.moveTo(20 + i * 30 , 20);context.lineTo(20+ i * 30 , 560);//垂直方向画19根，相距30pxcontext.stroke();context.moveTo(20 , 20 + i * 30);context.lineTo(560 , 20 + i * 30); //水平方向画19根，相距30pxcontext.stroke();}落子
c.onclick=function(e){ bool=start(e,bool);} function start(e,bool){x=e.offsetX;y=e.offsetY;context.beginPath()/*计算落子位置*/x=Math.floor(x/30);y=Math.floor(y/30);x=20+x * 30;y=20+y * 30;console.log(x+','+y);let obj={x:x,y:y};/*防止在同一个地点重复落子*/for(let i=0;i<startplay.length;i++){if (x==startplay[i].x&&y==startplay[i].y) {console.log('棋子以下');return bool;}} startplay.push(obj);if(bool){context.fillStyle="#000000";startb.push(obj);name='黑方';}else{context.fillStyle="#ffffff";startw.push(obj);name='白方';}context.arc(x,y,10,Math.PI*2,0,true);context.fill();context.closePath();if(judge(x,y)){console.log(name+'胜');// alert(name+'胜')document.getElementById("div").style.display='block';document.getElementById("div").innerHTML='<button id="name">'+name+'胜'+'</button>';console.log(window.innerWidth);document.getElementById("div").style.width=window.innerWidth+'px';document.getElementById("div").style.height=window.innerHeight+'px';document.getElementById("div").style.lineHeight=window.innerHeight+'px';document.getElementById('name').onclick=function(){location.reload(true);} }return !bool;}判断输赢
function judge(x,y){let arry=null;// let name=null;if (bool) {arry=startb;// name='黑色';}else{arry=startw;// name='白色';}let startify=arry.some(obj=>{/*y判断竖轴，x判断横轴，进行横竖判断*/let arrybly=[],arryblx=[];if (x==obj.x) {arrybly.push(obj.y);arry.some(objy=>{/*假设当前落子为中心点*/if(y-30==objy.y&&x==objy.x){arrybly.push(y-30);}if(y+30==objy.y&&x==objy.x){arrybly.push(y+30);}if(y-60==objy.y&&x==objy.x){arrybly.push(y-60);}if(y+60==objy.y&&x==objy.x){arrybly.push(y+60);}/*假设落子为边点*/if(y-120==objy.y&&x==objy.x){arrybly.push(y-120);}if(y+120==objy.y&&x==objy.x){arrybly.push(y+120);}if(y-90==objy.y&&x==objy.x){arrybly.push(y-90);}if(y+90==objy.y&&x==objy.x){arrybly.push(y+90);}})if(arrybly.length==5){return true; };}if(y==obj.y){arryblx.push(y); arry.some(objx=>{/*假设当前落子为中心点*/if(x-30==objx.x&&y==objx.y){arryblx.push(y-30);}if(x+30==objx.x&&y==objx.y){arryblx.push(x+30);}if(x-60==objx.x&&y==objx.y){arryblx.push(x-60);}if(x+60==objx.x&&y==objx.y){arryblx.push(x+60);}/*假设落子为边点*/if(x-120==objx.x&&y==objx.y){arryblx.push(x-120);}if(x+120==objx.x&&y==objx.y){arryblx.push(x+120);}if(x-90==objx.x&&y==objx.y){arryblx.push(x-90);}if(x+90==objx.x&&y==objx.y){arryblx.push(x+90);}})if (arryblx.length==5) {return true; }}return false;})let cpstartify=startify;if (!cpstartify) {/**第一判断棋子位置*lt左上lf左下rt右上rf右下*/let arryblxy=[];for(let i = 0;i < arry.length;i++){if(x+30==arry[i].x&&y+30==arry[i].y){console.log('左上');arryblxy.push('lt0');arry.some(obj=>{if (x+60==obj.x&&y+60==obj.y) {arryblxy.push('lt1');}if(x+90==obj.x&&y+90==obj.y){arryblxy.push('lt2');}if (x+120==obj.x&&y+120==obj.y) {arryblxy.push('lt3');}if(x+30==obj.x&&y+30==obj.y){arryblxy.push('let4');}if(x-60==obj.x&&y-60==obj.y){arryblxy.push('let5');}if(x-90==obj.x&&y-90==obj.y){arryblxy.push('let6');}if(x-30==obj.x&&y-30==obj.y){arryblxy.push('let7');}if (x-120==obj.x&&y-120==obj.y) {arryblxy.push('lt8');}})console.log(arryblxy)if(arryblxy.length==5){startify=true;break;}}else if(x-30==arry[i].x&&y-30==arry[i].y){console.log('右下');arryblxy.push('lt0');arry.some(obj=>{if (x+60==obj.x&&y+60==obj.y) {arryblxy.push('lt1');}if(x+90==obj.x&&y+90==obj.y){arryblxy.push('lt2');}if (x+120==obj.x&&y+120==obj.y) {arryblxy.push('lt3');}if(x+30==obj.x&&y+30==obj.y){arryblxy.push('let4');}if(x-60==obj.x&&y-60==obj.y){arryblxy.push('let5');}if(x-90==obj.x&&y-90==obj.y){arryblxy.push('let6');}if(x-30==obj.x&&y-30==obj.y){arryblxy.push('let7');}if (x-120==obj.x&&y-120==obj.y) {arryblxy.push('lt8');}})console.log(arryblxy)if(arryblxy.length==5){startify=true;break;}}else if(x-30==arry[i].x&&y+30==arry[i].y){console.log('左下');arryblxy.push('rt0')arry.some(obj=>{if(x-60==obj.x&&y+60==obj.y){arryblxy.push('rt1')}if (x-90==obj.x&&y+90==obj.y){arryblxy.push('rt2')}if(x-120==obj.x&&y+120==obj.y){arryblxy.push('rt3')}if(x-30==obj.x&&y+30==obj.y){arryblxy.push('rt4')}if(x+30==obj.x&&y-30==obj.y){arryblxy.push('rt5')}if(x+60==obj.x&&y-60==obj.y){arryblxy.push('rt6')}if(x+90==obj.x&&y-90==obj.y){arryblxy.push('rt7')}if(x+120==obj.x&&y-120==obj.y){arryblxy.push('rt8')}})if(arryblxy.length==5){console.log(arryblxy);startify=true;break;} }else if(x+30==arry[i].x&&y-30==arry[i].y){console.log('右上');arryblxy.push('rt0')arry.some(obj=>{if(x-60==obj.x&&y+60==obj.y){arryblxy.push('rt1')}if (x-90==obj.x&&y+90==obj.y){arryblxy.push('rt2')}if(x-120==obj.x&&y+120==obj.y){arryblxy.push('rt3')}if(x-30==obj.x&&y+30==obj.y){arryblxy.push('rt4')}if(x+30==obj.x&&y-30==obj.y){arryblxy.push('rt5')}if(x+60==obj.x&&y-60==obj.y){arryblxy.push('rt6')}if(x+90==obj.x&&y-90==obj.y){arryblxy.push('rt7')}if(x+120==obj.x&&y-120==obj.y){arryblxy.push('rt8')}})if(arryblxy.length==5){console.log(arryblxy);startify=true;break;}} }}// console.log(name+':'+startify);console.log('\n')return startify} 总结
写的这个小游戏为单机游戏，所以并没有涉及到一些用户间的功能，前面落子部分主要是用的基础知识，重点在于后面部分的判断环节，使用的是数组的方式，记录每个落子位置的x坐标和y做标，判断规矩中的数组数量是否达到胜出的标准，达到标准后弹框提示哪方胜出，然后进行数据重置，开始下局对弈
游戏网页：www.zhidao1098.cn/play.html
源码可进入直接下载
使用h5制作一个五子棋游戏相关推荐
- c语言改u3d游戏,使用Unity3D怎么制作一个五子棋游戏
使用Unity3D怎么制作一个五子棋游戏 发布时间:2021-04-17 17:56:36 来源:亿速云 阅读:106 作者:Leah 本篇文章为大家展示了使用Unity3D怎么制作一个五子棋游戏,内 ...
- 用c语言做一个五子棋程序,C语言制作简单五子棋游戏
原标题:C语言制作简单五子棋游戏 C语言制作简单的五子棋游戏 学习C语言的人很多,但是用C语言很少,而用来为自己所用,来做游戏的人就更少了,很多人都是跟着学校学习,学校讲到哪就坐到哪,但是以后却还是不 ...
- 使用VS制作一个小游戏（五子棋）
使用VS制作一个小游戏(五子棋) 一.前期准备: 下载Visual Studio(以下使用的是VS2017) 下载Easyx库:官方easyx库下载 右上方下载 二.思路理解 (本次是简单的单机双人五 ...
- python五子棋游戏from tkinter import_Python tkinter制作单机五子棋游戏
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 以下文章来源于Python家庭,作者Python家庭 实战项目:使用Python ...
- 五子棋游戏html5界面设计,HTML5制作黑白五子棋游戏教程
今天分享一个只用css和js代码开发的黑白五子棋游戏,我们把代码进行解析,希望对大家可以有所帮助 先看看效果图: HTML5制作黑白五子棋游戏教程 js代码: 定义canvas及黑白棋变量 var c ...
- python 单机程序_Python tkinter制作单机五子棋游戏
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 以下文章来源于Python家庭,作者Python家庭 实战项目:使用Python ...
- python可视化迷宫求解_如何用 Python 制作一个迷宫游戏
相信大家都玩过迷宫的游戏,对于简单的迷宫,我们可以一眼就看出通路,但是对于复杂的迷宫,可能要仔细寻找好久,甚至耗费数天,然后可能还要分别从入口和出口两头寻找才能找的到通路,甚至也可能找不到通路. 虽然 ...
- 用python来做一个五子棋游戏，源码分享~
五子棋的规则大家肯定都了解,也是大家在百忙之中娱乐的一部分,也都在网上玩过五子棋的游戏,那么大家有没有想过自己编写一个五子棋游戏呢.很多人都感觉做"游戏"这个词汇听着就很难,不知道 ...
- 表白小游戏教程：制作一个小游戏送给喜欢的TA（不会编程也能学会哦）
大家好哇~ 欢迎翻开波波和阿菌的长篇故事~ 不过捏,今天我们不讲故事,今天将由阿菌和大家分享一个小教程:教大家制作一个小游戏,可以用来送给喜欢的人.无须任何计算机专业基础,只要能操作电脑,并在初一的数 ...
最新文章
- Python基础（9）水仙花数
- Pandas缺失数据最快定位方式（极少代码快速实现，打死不用循环!!!!!）
- HDU 1867 A + B for you again KMP解决问题的方法
- IIS崩溃时自动抓取Dump
- SAP Spartacus的API暴露逻辑和index.ts的设计原理 - 什么是所谓的PUBLIC API
- 判断 小程序 是否 滚动到页面底部 scrolltolower_微信小程序长列表性能优化——recycle-view
- 语言怎么解决扭魔方_吧台高度没留够，怎么坐都变扭，直接加玻璃框没想到也能解决难题...
- php的具体配置学习笔记
- 蓝牙mesh组网-JDY-24M初步探索
- php yml,YAML、YML在线编辑器(格式化校验)
- 基于rietveld搭建CodeReview平台
- 进军AR领域，这一次罗永浩能成吗？
- 在电脑上怎么做报表新手_自己怎样在电脑上制作表格
- 从315晚会曝光网秦谈企业社会责任
- Python爬虫框架Scrapy入门（三）爬虫实战：爬取长沙链家二手房
- 实现统一社会信用代码校验
- java狐妖外传,月华凌乱——狐不归外传
- MMS（Manufacturing Message Specification）协议分析
- Lattice原理及在通信中的应用 2 Packing, Covering, Quantization, Modulation
- 知到网课英语口语直通车期末考试答案分享！