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

设计界面布局、棋子样式等

Browse Source
This commit is contained in:
赵鑫 2022-08-05 01:12:14 +08:00
parent 04b6dea183
commit 5018eefddb
2 changed files with 128 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
public/index.html
View File

@ -5,14 +5,61 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@200;300;400;500;600;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>陆战棋游戏</title> <title>陆战棋</title>
</head> </head>
<body> <body>
<h1>陆战棋游戏</h1> <div id="game">
<h2 id="role"></h2> <div id="gameboard"></div>
<button id="gameButton">玩家1</button> <div id="sidebar">
<div id="display">
<h1>陆 战 棋</h1>
<h2 class="player1">黑方: 10.10.10.20</h2>
<h2 class="player2">红方: </h2>
<h2>当前时间: 12 : 25</h2>
<h2>本局时间: 00 : 00</h2>
<div id="buttons-container">
<button>参 战</button>
<button>就 绪</button>
<button>认 输</button>
<button>离 开</button>
</div>
</div>
<div id="pieces-container">
<div class="title">棋 子 </div>
<div class="piece player2">军 旗</div>
<div class="piece player2">司 令</div>
<div class="piece player2">军 长</div>
<div class="piece player2">师 长</div>
<div class="piece player2">师 长</div>
<div class="piece player2">旅 长</div>
<div class="piece player2">旅 长</div>
<div class="piece player2">团 长</div>
<div class="piece player2">团 长</div>
<div class="piece player2">营 长</div>
<div class="piece player2">营 长</div>
<div class="piece player2">连 长</div>
<div class="piece player2">连 长</div>
<div class="piece player2">连 长</div>
<div class="piece player2">排 长</div>
<div class="piece player2">排 长</div>
<div class="piece player2">排 长</div>
<div class="piece player2">工 兵</div>
<div class="piece player2">工 兵</div>
<div class="piece player2">工 兵</div>
<div class="piece player2">地 雷</div>
<div class="piece player2">地 雷</div>
<div class="piece player2">地 雷</div>
<div class="piece player2">炸 弹</div>
<div class="piece player2">炸 弹</div>
</div>
</div>
</div>
<script src="/socket.io/socket.io.min.js"></script> <script src="/socket.io/socket.io.min.js"></script>
<script src="game.js"></script> <script src="game.js"></script>
</body> </body>

83
public/style.css
View File

@ -1,13 +1,84 @@
button { * {
padding: 0.5rem; margin: 0px;
color: lightgray; padding: 0px;
cursor: pointer; box-sizing: border-box;
font-family: 'Noto Serif SC', serif;
}
body {
width: 1280px;
padding: 1rem;
margin: 0 auto;
background-color: #6a6;
}
#game {
width: 100%;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
#gameboard {
width: 982px;
height: 1248px;
background-image: url(board.png);
}
#sidebar {
}
#display {
width: 240px;
height: 440px;
color: #030;
display: flex;
flex-flow: column;
gap: 20px;
}
#buttons-container,
#pieces-container {
width: 240px;
padding: 20px;
gap: 20px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
border: 4px #363 dashed;
} }
.player1 { .player1 {
color: black; color: #333;
} }
.player2 { .player2 {
color: red; color: #833;
}
button,
.piece {
width: 80px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
font-weight: 900;
border-radius: 4px;
border: double 3px black;
text-shadow: 0 1px 0px white;
box-shadow: 1px 1px 2px black;
background: linear-gradient(to bottom, #fff, #ccc, #ddd);
}
.title {
width: 80px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: 900;
} }