160 lines
7.4 KiB
HTML
160 lines
7.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<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">
|
|
<title>陆战棋</title>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="game">
|
|
<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="display">
|
|
<h1>陆 战 棋</h1>
|
|
<h2>当前时间: <time id="timeNow">00 : 00</time></h2>
|
|
<h2>本局时间: <time id="timeGame">00 : 00</time></h2>
|
|
<h2 class="player1">黑方: <span id="player1"></span></h2>
|
|
<h2 class="player2">红方: <span id="player2"></span></h2>
|
|
<div id="buttonContainer">
|
|
<button id="buttonJoin">参 战</button>
|
|
<button id="buttonReady">就 绪</button>
|
|
<button id="buttonSurrender">认 输</button>
|
|
<button id="buttonLeave">离 开</button>
|
|
</div>
|
|
</div>
|
|
<div id="pieceContainer">
|
|
<div class="title">棋 子 </div>
|
|
<div class="piece player1">军 旗</div>
|
|
<div class="piece player1">司 令</div>
|
|
<div class="piece player1">军 长</div>
|
|
<div class="piece player1">师 长</div>
|
|
<div class="piece player1">师 长</div>
|
|
<div class="piece player1">旅 长</div>
|
|
<div class="piece player1">旅 长</div>
|
|
<div class="piece player1">团 长</div>
|
|
<div class="piece player1">团 长</div>
|
|
<div class="piece player1">营 长</div>
|
|
<div class="piece player1">营 长</div>
|
|
<div class="piece player1">连 长</div>
|
|
<div class="piece player1">连 长</div>
|
|
<div class="piece player1">连 长</div>
|
|
<div class="piece player1">排 长</div>
|
|
<div class="piece player1">排 长</div>
|
|
<div class="piece player1">排 长</div>
|
|
<div class="piece player1">工 兵</div>
|
|
<div class="piece player1">工 兵</div>
|
|
<div class="piece player1">工 兵</div>
|
|
<div class="piece player1">地 雷</div>
|
|
<div class="piece player1">地 雷</div>
|
|
<div class="piece player1">地 雷</div>
|
|
<div class="piece player1">炸 弹</div>
|
|
<div class="piece player1">炸 弹</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/socket.io/socket.io.min.js"></script>
|
|
<script src="client.js"></script>
|
|
</body>
|
|
|
|
</html>
|