网页版自嗨五子棋

最新推荐文章于 2020-07-05 21:20:54 发布

weixin_44775372

最新推荐文章于 2020-07-05 21:20:54 发布

阅读量353

点赞数

分类专栏：学习之始文章标签：菜鸡的前端之路

本文链接：https://blog.csdn.net/weixin_44775372/article/details/88600091

版权

js五子棋

过程很艰辛，请教了很多人，网查了资料，终于和自己玩上了五子棋。

<!DOCTYPE html>
<html>
<head>
	<title>五子棋</title>
	<meta charset="UTF-8">
	<style>
		html,body,section,div,p{
			padding: 0;
			margin: 0;
			font-size: 12px;
		}
		body{
			width: 100%;
			height: 100%;
			position: fixed;
		}
		#chessboard{
			width: 90vmin;
			min-height: 89vmin;
			margin: calc(50vh - 46vmin + 2px) auto;
			background: #f5ca69;
			border: 2px solid #000;
			border-radius: 7px;
			-webkit-box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),   
                         -.1rem -.1rem .05rem rgba(0,0,0,.5) ;   
    		box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5),   
                         -.1rem -.1rem .05rem rgba(0,0,0,.5) ; 
		}
	
		#chessboard div{
			width: calc(9vmin - 2px);
			height: calc(9vmin - 2px);
			float: left;
			border: 1px solid black;
			
		}
		#chessboard div p{
		    width: 97%;
		    height: 97%;
		    margin: 1.5% auto;
			border-radius: 100%;
		}
		.white{
		   	background-color: white;
			box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
		}
		.black{
		   	background-color: black;
			box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
		}
		#mask{
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0,0,0,.5);
		}
		.conBox{
			display: block;
			width: 300px;
			height: 200px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			background-color: #fff;
			border-radius: 3px;
			box-shadow: .1rem .1rem .05rem rgba(0,0,0,.5);
		}
		.conBox h1{
			width:

最低0.47元/天解锁文章

weixin_44775372

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页版自嗨五子棋

js五子棋过程很艰辛，请教了很多人，网查了资料，终于和自己玩上了五子棋。&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;五子棋&lt;/title&gt; &lt;meta charset="UTF-8"&gt; &lt;style&gt; html,body,section,div,p{
复制链接

扫一扫