canvas 五子棋小游戏

代码如下: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			canvas{
				display: block;
				margin: 100px auto;
				box-shadow: -3px -3px 3px #efefef,8px 8px 8px #b9b9b9;
				background-color: blanchedalmond;
			}
			#gameover{
				position: absolute;
				left: 0;
				top: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0,0,0,0.2);
				display: none;
			}
			#gameover p{
				width: 360px;
				background-color: #fff;
				border: 1px solid #000;
				border-radius: 8px;
				margin: 360px auto;
				font-size: 30px;
				font-weight: bold;
				text-align: center;
				line-height: 60px;
				padding: 30px 0;
			}
			span{
				color: red;
			}
			a{
				text-decoration: none;
				display: inline-block;
				width: 240px;
				height: 40px;
				line-height: 40px;
				color: white;
				background-color: bisque;
			}
		</style>
	</head>
	<body>
		<canvas id="canvas" width="760" height="760"></canvas>
		<div id="gameover">
			<p>
				恭喜<span id="qizi"></span>赢了!!!<br />
				<a href="">TRY AGAIN</a>
			</p>
		</div>
		<script>
			var canvas=document.getElementById("canvas");
			var context=canvas.getContext("2d");
			context.strokeStyle="#bfbfbf";         	// 绘制棋盘竖线
			for(var i=0;i<15;i++){
				context.moveTo(30+i*50,30);
				context.lineTo(30+i*50,730);
				context.stroke();
			}
			for(var j=0;j<15;j++){					// 绘制棋盘横线
				context.moveTo(30,30+j*50);
				context.lineTo(730,30+j*50);
				context.stroke();
			}
			context.fillStyle="#bfbfbf"; 
			context.fillRect(175,175,10,10);
			context.fillRect(375,175,10,10);
			context.fillRect(575,175,10,10);
			context.fillRect(175,375,10,10);
			context.fillRect(375,375,10,10);
			context.fillRect(575,375,10,10);
			context.fillRect(175,575,10,10);
			context.fillRect(375,575,10,10);
			context.fillRect(575,575,10,10);
			var flag=true;
			var oneStep=function(i,j,flag){			//绘制棋子
				context.beginPath();
				context.arc(30+i*50,30+j*50,20,0,Math.PI*2);
				context.closePath();
				var grd=context.createRadialGradient(30+i*50,30+j*50-10,4,30+i*50,30+j*50-10,24);
				if(flag){								//黑棋
					grd.addColorStop(0,"#636766");
					grd.addColorStop(1,"#0a0a0a");
				}else{									//白棋
					grd.addColorStop(0,"#d1d1d1");
					grd.addColorStop(1,"#f9f9f9");
				}
				context.fillStyle=grd;
				context.fill();
			}
			var wins=[];					//定义一个赢法数组,三维数组
		    for(var i=0;i<15;i++){
		        wins[i]=[];
		        for(var j=0;j<15;j++){
		            wins[i][j]=[];
		        }
		    }
		    var count=0;          //赢法种类的索引
			//所有连成竖线的赢法
			for(var i=0;i<15;i++){
				for(var j=0;j<11;j++){
					for(var k=0;k<5;k++){
						wins[i][j+k][count]=true;
					}
					count++;
				}
			}
			//所有连成横线的赢法
			for(var i=0;i<11;i++){
				for(var j=0;j<15;j++){
					for(var k=0;k<5;k++){
						wins[i+k][j][count]=true;
					}
					count++;
				}
			}
			//所有连成斜线的赢法
			for(var i=0;i<11;i++){
				for(var j=0;j<11;j++){
					for(var k=0;k<5;k++){
						wins[i+k][j+k][count]=true;
					}
					count++;
				}
			}
			//所有连成反斜线的赢法
			for(var i=0;i<11;i++){
				for(var j=14;j>3;j--){
					for(var k=0;k<5;k++){
						wins[i+k][j-k][count]=true;
					}
					count++;
				}
			}
			//赢法统计数组
		    var blackWin=[];
		    var whiteWin=[];
		    for(var i=0;i<count;i++){
		        blackWin[i]=0;
		        whiteWin[i]=0;
		    }
		    //定义存储棋子的位置的二维数组
		    var num=[];
			for(var i=0;i<15;i++){
				num[i]=[];
				for(var j=0;j<15;j++){
					num[i][j]=0;
				}
			}
			canvas.onclick=function(e){
				var x=e.offsetX;            //获取鼠标点击的位置的x轴坐标
				var y=e.offsetY;			//获取鼠标点击的位置的y轴坐标
				var i=Math.floor(x/50);
				var j=Math.floor(y/50);
				if(num[i][j]==0){
					oneStep(i,j,flag);
					if(flag){
						num[i][j]=1;		//黑棋标记为1
						for(var k=0;k<count;k++){
			                if(wins[i][j][k]){
			                    blackWin[k]++;
			                    //表示这种赢法白棋不可能赢了
			                    whiteWin[k]=6;
			                    if(blackWin[k]==5){			//黑棋赢时
			                        document.getElementById("gameover").style.display="block";
			                        document.getElementById("qizi").innerHTML="黑棋";
			                    }
			                }
			            }
					}else{
						num[i][j]=2;		//白棋标记为2
						for(var k=0;k<count;k++){
			                if(wins[i][j][k]){
			                    whiteWin[k]++;
			                    //表示这种赢法黑棋不可能赢了
			                    blackWin[k]=6;
			                    if(whiteWin[k]==5){				//白棋赢时
			                        document.getElementById("gameover").style.display="block";
			                        document.getElementById("qizi").innerHTML="白棋";
			                    }
			                }
			            }
					}
					flag=!flag;  			 //取反,使黑白棋交替出现
				}
			}
			
		</script>
	</body>
</html>

运行结果如图: 

 

 

原文链接:加载失败,请重新获取