使用h5制作一个五子棋游戏
思路解析
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根，相距30px
context.stroke();
context.moveTo(20 , 20 + i * 30);
context.lineTo(560 , 20 + i * 30);
//水平方向画19根，相距30px
context.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';
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
源码可进入直接下载