js实现五子棋小游戏效果代码
代码语言:html
所属分类:游戏
代码描述:js实现五子棋小游戏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background: #e6e7ec
}
#box {
position: relative;
margin: 50px auto;
width: 450px;
height: 510px;
background: #e6e7ec
}
#centent {
position: absolute;
width: 430px;
height: 430px;
border: 1px solid #9e9e9e;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 0 5px 0 #9e9e9ed9;
left: 10px;
top: 20px
}
#canvas {
display: block;
position: absolute;
background: #f7e6b7;
left: -10px;
top: -10px
}
#button,#anew,#state,#winner {
position: absolute;
display: block;
width: 40px;
height: 40px;
border-radius: 30px;
outline: none;
font-size: 10px;
box-sizing: border-box;
color: #00bcd4;
background: #fff;
border: none;
box-shadow: 1px 1px 3px 1px #9e9e9e5e;
top: 460px;
left: 270px;
user-select: none
}
#anew {
left: 220px
}
#state {
left: 321px;
width: 120px
}
#state .state-chess,#winner .state-chess {
position: absolute;
width: 30px;
height: 30px;
top: 5px;
left: 5px
}
#state .chessName,#winner .chessName {
position: absolute;
width: 60px;
height: 30px;
top: 5px;
left: 40px;.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0