Compare commits
2 Commits
fd23ad7db0
...
5018eefddb
| Author | SHA1 | Date | |
|---|---|---|---|
| 5018eefddb | |||
| 04b6dea183 |
@ -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>
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
79
server.js
79
server.js
@ -3,7 +3,7 @@ const app = express()
|
|||||||
app.use(express.static('public'))
|
app.use(express.static('public'))
|
||||||
const host = process.env.HOST || '0.0.0.0'
|
const host = process.env.HOST || '0.0.0.0'
|
||||||
const port = process.env.PORT || 3000
|
const port = process.env.PORT || 3000
|
||||||
const server = app.listen(port, host, () => console.log(`陆战棋游戏运行在：http://${host}:${port}/`))
|
const server = app.listen(port, host, () => console.log(`陆战棋游戏服务运行在 http://${host}:${port}/`))
|
||||||
const io = require('socket.io')(server)
|
const io = require('socket.io')(server)
|
||||||
|
|
||||||
const clients = []
|
const clients = []
|
||||||
@ -56,81 +56,4 @@ io.on('connection', (client) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// console.log(`${client.handshake.address} 来了`)
|
|
||||||
// client.emit('client', '旁观者')
|
|
||||||
|
|
||||||
// if (players.length < 2) {
|
|
||||||
// players.push(client)
|
|
||||||
// if (players.length == 2) {
|
|
||||||
// // 游戏开始
|
|
||||||
// console.log('玩家就位，游戏开始')
|
|
||||||
// currentPlayer = players[0]
|
|
||||||
// io.emit('currentPlayer', currentPlayer === players[0] ? 'player1' : 'player2')
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// if (players.length > 0 && client.id == players[0].id) client.emit('client', '玩家1')
|
|
||||||
// else if (players.length == 2 && client.id == players[1].id) client.emit('client', '玩家2')
|
|
||||||
// else client.emit('client', '旁观者')
|
|
||||||
|
|
||||||
// client.on('click', () => {
|
|
||||||
// if (client == currentPlayer) {
|
|
||||||
// // 切换玩家
|
|
||||||
// if (currentPlayer === players[0]) {
|
|
||||||
// currentPlayer = players[1]
|
|
||||||
// io.emit('currentPlayer', 'player2')
|
|
||||||
// } else {
|
|
||||||
// currentPlayer = players[0]
|
|
||||||
// io.emit('currentPlayer', 'player1')
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
|
|
||||||
// client.on('disconnect', () => {
|
|
||||||
// io.emit('client', '旁观者')
|
|
||||||
// if (players.includes(client)) {
|
|
||||||
// const playerNumber = players.indexOf(client)
|
|
||||||
// players.splice(playerNumber, 1)
|
|
||||||
// }
|
|
||||||
// if (players.length == 2) {
|
|
||||||
// // 游戏开始
|
|
||||||
// console.log('玩家就位，游戏开始')
|
|
||||||
// currentPlayer = players[0]
|
|
||||||
// io.emit('currentPlayer', currentPlayer === players[0] ? 'player1' : 'player2')
|
|
||||||
// }
|
|
||||||
// if (players.length > 0 && client.id == players[0].id) client.emit('client', '玩家1')
|
|
||||||
// else if (players.length == 2 && client.id == players[1].id) client.emit('client', '玩家2')
|
|
||||||
// else client.emit('client', '旁观者')
|
|
||||||
// })
|
|
||||||
|
|
||||||
// if (players.length < 2) {
|
|
||||||
// players.push(client)
|
|
||||||
// console.log(`玩家${players.length}加入了[${client.handshake.address}]`)
|
|
||||||
// if (players.length == 2) {
|
|
||||||
// // 广播当前是player1（玩家1, 黑色）
|
|
||||||
// currentPlayer = players[0]
|
|
||||||
// io.emit('currentPlayer', 'player1')
|
|
||||||
// // 向玩家1发出点击许可
|
|
||||||
// currentPlayer.emit('yourTurn')
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// console.log(`旁观者${client.handshake.address}来了`)
|
|
||||||
// if (currentPlayer === players[0]) {
|
|
||||||
// io.emit('currentPlayer', 'player1')
|
|
||||||
// } else {
|
|
||||||
// io.emit('currentPlayer', 'player2')
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// client.on('click', () => {
|
|
||||||
// console.log(client.handshake.address, '点了按钮')
|
|
||||||
// if (currentPlayer === players[0]) {
|
|
||||||
// io.emit('currentPlayer', 'player2')
|
|
||||||
// currentPlayer = players[1]
|
|
||||||
// } else {
|
|
||||||
// io.emit('currentPlayer', 'player1')
|
|
||||||
// currentPlayer = players[0]
|
|
||||||
// }
|
|
||||||
// currentPlayer.emit('yourTurn')
|
|
||||||
// })
|
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user