原生原生js实现五子棋游戏实现五子棋游戏
本文实例为大家分享了js实现五子棋游戏的具体代码，供大家参考，具体内容如下
html:
<body>
<h2>五子棋游戏</h2>
<div id="box">
<div id="box01"></div>
<div id="box02">haha</div>
</div>
</body>
css:
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
/*overflow: hidden;*/
margin-top: 10px;
text-align: center;
background-color: #C7C7C7;
}
#box{
position: relative;
border: 1px solid;
margin: 20px auto;
width: 546px;
height: 546px;
background-color: #C7C7C7;
}
#box .squre{
width: 40px;
height: 40px;
border: 1px solid;
float: left;
}
#box01 .squre:hover{
background-color: pink;
}
#box01{
position: absolute;
/*border: 1px solid;*/
margin: 0 auto;
width: 588px;
height: 588px;
/*background-color: pink;*/
/*opacity: 0.5;*/
top: -20px;
left: -20px;
}
#box01 .qz{
width: 30px;
height: 30px;
border: 1px solid #C7C7C7;
float: left;
border-radius: 50%;
margin: 5px;
}
#box01 .qz:hover{
background-color: pink;
}
#box02{
position: absolute;
line-height: 546px;
font-size: 50px;
color: black;
width: 100%;
background-color: pink;
display: none;
opacity: 0.6;
}
</style>
资源评论
