五子棋小游戏
这个五子棋小游戏，没有写成人机模式。
但大家可以尝试下自己饰演两个角色的五子棋，嘻嘻嘻
效果图片
效果
代码
index.html
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>简易五子棋游戏</title><link rel="stylesheet" href="css/main.css"><script type="text/javascript" src="js/jquery.min.js"></script></head><body><h1>简易版五子棋小游戏</h1><h6>说明：体验下自己饰演两个角色的五子棋吧，嘻嘻。</h6><!--canvas是个画布，需要修改的是尺寸，不是修改样式--><canvas id="canvas" width="450" height="450"></canvas><div class="mol-main"><div class="mol-header"><h2>五子棋小游戏</h2></div><div class="mol-success white">白棋获胜</div><div class="mol-success black">黑棋获胜</div><br><div><button class="btn">关闭</button></div></div></body><script type="text/javascript" src="js/main.js"></script><script>$('.btn').click(function () {$('.mol-main').css('display','none');});</script></html>
main.css
body{margin:0;background: #ccc;}h1{text-align: center;}h6{text-align: center;color: darkslategray;}/*------------棋盘-------------------------*/#canvas{display: block;margin: 20px auto;background:#fff;}.mol-main{width:180px;height: 160px;margin: 0 auto;padding: 10px;background:#eee;border-radius: 10px;opacity: 0.9;position: absolute;top:25%;left: 40%;display: none;}.mol-header h2{text-align: left;font-weight: bold;}.mol-success{color: firebrick;font-weight: bold;}.white{display: none;}.black{display: none;}.btn{cursor: pointer;width: 70px;height: 30px;border-radius: 5px;text-align: center;font-weight: bold;;background: cadetblue;color: #000;}.btn:hover{background: lightseagreen;color: #fff;}
main,js
/**1、绘制棋盘*1.1绘制棋盘中直线* 2、绘制棋子*2.1绘制棋子* 2.2实现交互,点击下棋* 2.3黑白子棋交替操作* 2.4棋子落在棋盘交叉点上* 2.5设置已下棋处不得再进行操作* 3、游戏胜负判断*当前所下的棋子参与到胜负判断中，此时下棋的人要么赢，要么不赢（输/继续进行）* 此时所下棋子的位置应当作为判断点* 一条线上左右颜色连续累加超过5，那么这个颜色就获胜*///----------------------------------------------------//获取到html的canvas标签var canvas=document.querySelector('#canvas');//获取绘制环境var ctx =canvas.getContext('2d');//创建棋子颜色数组var chessColor=['#000','#fff'];//棋盘数组var maparr=[];//判断哪方赢var mode=[[1,0],//水平方向[0,1],//垂直方向[1,1],//右下 左上[1,-1]//右上 左下];//----------------------------------//将棋盘上所有交叉点创建全为0的数组//如果当数组为1时，说明已经有棋子了for(var i=0;i<14;i++){maparr[i]=[];for(var j=0;j<14;j++){maparr[i][j]=0;}}//---设置游戏进行的步数-----为了实现黑白棋子交替进行操作--var step=0;/*----------绘制棋盘中直线--------------*描述绘制路径* 开始绘制*/function init() {//----------绘制15条垂直和水平直线---------------------for(var i=1;i<15;i++){//----绘制15条垂直直线------//在格子（30，30）处开始画线ctx.moveTo(30*i,30);//线画到（30，420）的位置ctx.lineTo(30*i,420);//----绘制15条水平直线-----//在格子（30，30）处开始画线ctx.moveTo(30,30*i);//线画到（420,30）的位置ctx.lineTo(420,30*i);}//-----开始绘制线--------------ctx.stroke();}init();//--------绘制棋子---------------------function drawChess(x,y,color){//修改填充颜色ctx.fillStyle=color;//画圆---圆心坐标轴（x,y）--半径15--起始点角度0--终点角度为2派---ctx.beginPath();ctx.arc(x,y,15,0,Math.PI*2,false);//ctx.fill()填充ctx.fill();ctx.stroke();}//-----下棋----并使棋子都在起哦安交叉线上-----------------------------canvas.addEventListener('click',function(e){// console.log('点击棋盘');//--------------------------------------//e.offsetX和offsetY可以获取到点击时的坐标// console.log(e.offsetX,e.offsetY);//--------实现所有棋子都在棋盘的交叉线上---------//math.floor()向下取整//+15---点下去的位置向右偏移15-----//----即使得在一个小正方形象限内位置任意点棋子都在那个交叉点出var dx =Math.floor((e.offsetX+15)/30)*30;var dy =Math.floor((e.offsetY+15)/30)*30;//点击落下棋子if(dx == 0 || dy == 0 || dx == 450 || dy == 450){return false;}//避免已有棋子的点再下一次if(maparr[dx/30-1][dy/30-1]==0){drawChess(dx,dy,chessColor[step%2]);maparr[dx/30-1][dy/30-1]=chessColor[step%2];checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[0]);checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[1]);checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[2]);checkSuccess(dx/30-1,dy/30-1,chessColor[step%2],mode[3]);step++;}});//-----------判断哪方赢------要么黑赢要么白赢--------------------// var mode=[//[1,0],//水平方向//[0,1],//垂直方向//[1,1],//右下 左上//[1,-1]//右上 左下// ];//------根据mode数组检测不用方向-------------function checkSuccess(x,y,color,mode) {// console.log(x,y,color);var count=0;for(var i=1;i<5;i++){if(maparr[x+i]*mode[0]){if(maparr[x+i*mode[0]][y+i*mode[1]]==color){count++;}else{break;}}}for(var i=1;i<5;i++){if(maparr[x-i]){if(maparr[x-i*mode[0]][y-i*mode[1]]==color){count++;}else{break;}}}// console.log('水平方向有',count+1,'个',color);if(count>=4){if(color=='#000'){//显示黑棋获胜框$('.mol-main').css('display','block');$('.black').css('display','block');// alert('黑棋获胜');}else{//显示白棋获胜框$('.mol-main').css('display','block');$('.white').css('display','block');// alert('白棋获胜');}}}
引用
b站教程
如果觉得《web前端之五子棋网页版小游戏》对你有帮助，请点赞、收藏，并留下你的观点哦！
