HTML+js实现简单的五子棋

最新推荐文章于 2025-07-12 08:00:00 发布

CCSway

最新推荐文章于 2025-07-12 08:00:00 发布

阅读量3.7k

点赞数 9

CC 4.0 BY-SA版权

文章标签： html JavaScript 五子棋

本文链接：https://blog.youkuaiyun.com/qq_36336898/article/details/85643688

我们首先创建一个棋盘，是一个画布，我们可以在上面画出棋盘
CSS给棋盘阴影，我们可以看出棋盘大致轮廓。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>五子棋</title>
		<style type="text/css">
			#chess{
				margin: auto;
				display: block;
				box-shadow: 5px 5px 5px #808080,-2px -2px 2px #D5D5D5;
				cursor:pointer ;
			}
		</style>
	</head>
	<body>
		<h3 align="center">益智五子棋</h3>
		<canvas id="chess" width="450px" height="450px"></canvas>
		</div>
	</body>
</html>

棋盘大概轮廓
``
现在我们需要一个画笔，以下的代码均是在script中。
我们画的是一个15*15的棋盘，通过for循环来让画笔划线


		//画布画笔
		var chess = document.getElementById("chess");
		var context = chess.getContext("2d"); //context可以看作画笔
		context.strokeStyle="#bfbfbf";              //画笔的颜色
		
		//加载棋盘
		window.onload = function(){               //页面加载完成事件
			for(var i=0;i<15;i++){
		    
			context.moveTo(15,15+30*i);          //横线（x，y）起始点
			context.lineTo(435,15+30*i);           //横线（x，y）终止点
			context.stroke();                              //画一条线
			
			context.moveTo(15+30*i,15);           //竖线
			context.lineTo(15+30*i,435);
			context.stroke();
			}
			
		}