zhaoxin/luzhanqi
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

初步设计兵站布局

Browse Source
This commit is contained in:
赵鑫 2022-08-05 13:12:02 +08:00
parent cfae266bc6
commit 6182738ec0
2 changed files with 146 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
public/index.html
View File

@ -15,7 +15,99 @@
<body> <body>
<div id="game"> <div id="game">
<div id="gameboard"></div> <div id="gameboard">
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>大本营</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>大本营</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player=''>兵 站</fort>
<fort data-player='' class="shanjie">山 界</fort>
<fort data-player=''>兵 站</fort>
<fort data-player='' class="shanjie">山 界</fort>
<fort data-player=''>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1' class="xingying">行 营</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
</line>
<line>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
<fort data-player='player1'>兵 站</fort>
</line>
</div>
<div id="sidebar"> <div id="sidebar">
<div id="display"> <div id="display">
<h1>陆 战 棋</h1> <h1>陆 战 棋</h1>
@ -32,31 +124,31 @@
</div> </div>
<div id="pieceContainer"> <div id="pieceContainer">
<div class="title">棋 子 </div> <div class="title">棋 子 </div>
<div class="piece player2">军 旗</div> <div class="piece player1">军 旗</div>
<div class="piece player2">司 令</div> <div class="piece player1">司 令</div>
<div class="piece player2">军 长</div> <div class="piece player1">军 长</div>
<div class="piece player2">师 长</div> <div class="piece player1">师 长</div>
<div class="piece player2">师 长</div> <div class="piece player1">师 长</div>
<div class="piece player2">旅 长</div> <div class="piece player1">旅 长</div>
<div class="piece player2">旅 长</div> <div class="piece player1">旅 长</div>
<div class="piece player2">团 长</div> <div class="piece player1">团 长</div>
<div class="piece player2">团 长</div> <div class="piece player1">团 长</div>
<div class="piece player2">营 长</div> <div class="piece player1">营 长</div>
<div class="piece player2">营 长</div> <div class="piece player1">营 长</div>
<div class="piece player2">连 长</div> <div class="piece player1">连 长</div>
<div class="piece player2">连 长</div> <div class="piece player1">连 长</div>
<div class="piece player2">连 长</div> <div class="piece player1">连 长</div>
<div class="piece player2">排 长</div> <div class="piece player1">排 长</div>
<div class="piece player2">排 长</div> <div class="piece player1">排 长</div>
<div class="piece player2">排 长</div> <div class="piece player1">排 长</div>
<div class="piece player2">工 兵</div> <div class="piece player1">工 兵</div>
<div class="piece player2">工 兵</div> <div class="piece player1">工 兵</div>
<div class="piece player2">工 兵</div> <div class="piece player1">工 兵</div>
<div class="piece player2">地 雷</div> <div class="piece player1">地 雷</div>
<div class="piece player2">地 雷</div> <div class="piece player1">地 雷</div>
<div class="piece player2">地 雷</div> <div class="piece player1">地 雷</div>
<div class="piece player2">炸 弹</div> <div class="piece player1">炸 弹</div>
<div class="piece player2">炸 弹</div> <div class="piece player1">炸 弹</div>
</div> </div>
</div> </div>
</div> </div>

28
public/style.css
View File

@ -24,6 +24,34 @@ body {
width: 982px; width: 982px;
height: 1248px; height: 1248px;
background-image: url(board.png); background-image: url(board.png);
display: flex;
flex-direction: column;
justify-content: space-between;
}
#gameboard line {
width: 982px;
display: flex;
justify-content: space-between;
}
#gameboard fort {
display: inline-block;
width: 90px;
height: 50px;
border: 2px red dashed;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
font-weight: 900;
}
#gameboard fort.xingying,
#gameboard fort.shanjie {
margin-top: -20px;
height: 90px;
border-radius: 50%;
} }
#sidebar { #sidebar {