原声js 五子棋 源码

Welcome to use MarkDown

	<style type="text/css">
		.box{
			width: 600px;
			height: 600px;
			background: url(img/bak.jpg) no-repeat;
			background-size: cover;
			margin: 30px auto;
			border: 1px solid #000000;
		}
	</style>

		<div class="box">
			<canvas id="can" width="600" height="600px"></canvas>
		</div>

		<script type="text/javascript">
			var maps = [];
				for(var i=0;i<15;i++){
					maps[i] = [];
					for(var j=0;j<15;j++){
					maps[i][j] = 0;
					}
			}
			//制作棋盘
			var can = document.getElementById("can");

			var ctx = can.getContext('2d');

			var isblack = true;

			ctx.strokeStyle ="#000";

			for(var i=0;i<15;i++){
				for(var j=0;j<15;j++){
					ctx.strokeRect(j*40,i*40,40,40)
				}
			}

			//制作棋子
			var black = new Image();
			var white  = new Image();
			black.src = "img/black.png"
			white.src = "img/white.png"

			can.addEventListener('click',function(ev){
				var dx = ev.clientX  -  can.offsetLeft;
				var dy = ev.clientY - can.offsetTop;

//				console.log(dx,dy)

				var row =0;
				var col =0;

				if(dx%40<20){
					row = Math.floor(dx/40)

				}else{
					row = Math.ceil(dx/40)
				}

				if(dy%40<20){
					col = Math.floor(dy/40)

				}else{
					col = Math.ceil(dy/40)
				}

//				console.log(row,col)

				if(isblack){

					ctx.drawImage(black,row*40-20,col*40-20)
					isblack = false;

					maps[row][col] = 2 //黑

					iswin(2,row,col)
				}else{
					ctx.drawImage(white,row*40-20,col*40-20)
					isblack = true;

					maps[row][col] = 1  //白

					iswin(1,row,col)
				}

				//判断输赢
				function iswin(t,row,col){
					var orgrow = row ;   //将目标点存起来
					var orgcol = col ;
					var total =1;

					//垂直方向
					while(col-1>0&&maps[row][col-1] == t){
						total++;
						col--;
					}

					row = orgrow ;
					col = orgcol;

					while(col+1<15&&maps[row][col+1] == t){

						col++;
						total++;
					}
					console.log(total)
					if(total>=5){
						if(t==1){
							setTimeout(function(){alert('白子赢了')},500)
						}else{

							setTimeout(function(){alert('黑子赢了')},500);
						}
					}

					//水平方向
					row=orgrow;
			    	col=orgcol;
			    	total=1;
			    	while(row-1>0&&maps[row-1][col]==t)
			    	{
			    		row--;
			    		total++;
			    	}
			    	row=orgrow;
			    	col=orgcol;
			    	while(row+1<15&&maps[row+1][col]==t)
			    	{
			    		row++;
			    		total++;
			    	}
			    	if(total>=5)
			    	{
			    		if(t==1)
			    		alert("白子赢");
			    		else
			    		alert("黑子赢");
			    	}

		    		//左下和右上
		    		row = orgrow ;
					col = orgcol;
					total =1;
		    		while(row+1<15&&col-1>0&&maps[row+1][col-1]==t){
		    				row++;
		    				col--;
		    				total++;
		    		}
		    		row = orgrow ;
					col = orgcol;
		    		while(row-1>0&&col+1<15&&maps[row-1][col+1] == t){
		    			row--;
		    			col++;
		    			total++;
		    		}
		    		if(total>=5){
		    			if(t==1){
							setTimeout(function(){alert('白子赢了')},500)
						}else{

							setTimeout(function(){alert('黑子赢了')},500);
						}
		    		}

		    		//右下和左上
		    		row = orgrow ;
					col = orgcol;
		    		total=1;
		    		while(row+1<15&&col+1<15&&maps[row+1][col+1]==t){
		    				row++;
		    				col++;
		    				total++;
		    		}
		    		row = orgrow ;
					col = orgcol;

		    		while(row-1>0&&col-1>0&&maps[row-1][col-1] == t){
		    			row--;
		    			col--;
		    			total++;
		    		}
		    		if(total>=5){
		    			if(t==1){
							setTimeout(function(){alert('白子赢了')},500)
						}else{

							setTimeout(function(){alert('黑子赢了')},500);
						}
		    		}
		    		//至此所有方向游戏都结束呢

				}

			})

		</script>