v1.0.0

README.md

@@ -1,12 +1,6 @@
 # Multiplayer Snake Game
 
-Screenshot on PC
-
-![](screenshot_pc.png)
-
-Screenshot on phone
-
-![](screenshot_phone.png)
+A multiplayer snake game based on express and socket.io.
 
 ## Run
 
@@ -21,7 +15,13 @@ firefox http://localhost:8000
 - [X] simple, clear and responsive UI
 - [x] multiplayer and observers
 
+## Screenshots
+
+Screenshot on PC and Phone
+
+![screenshot](screenshot.png)
+
 ## History
 
-- Version 1.0.0a
-  - alpha version
+- Version 1.0.0
+  - first release

public/client.js

@@ -6,63 +6,38 @@ const enemyColor = '#666'
 const player1Color = '#c33'
 const player2Color = '#33c'
 const appleColor = '#e66916'
-let canvasSize
+let canvasSize,
+    playerNumber = 0
+
+client.on('playerNumber', (number) => {
+    playerNumber = number
+    if (playerNumber == 0) document.getElementById('controller').classList.add('hidden')
+    else document.getElementById('controller').classList.remove('hidden')
+    document.getElementById('player1score').classList.value = ['player1', 'player', 'enemy'][playerNumber]
+    document.getElementById('player2score').classList.value = ['player2', 'enemy', 'player'][playerNumber]
+})
+
+function draw(apple, player1, player2) {
+    const cellSize = canvasSize / 20
 
-function drawGame(game) {
-    const cellSize = canvasSize / game.grids
     context.fillStyle = backgroudColor
     context.fillRect(0, 0, canvasSize, canvasSize)
 
-    const isPlayer = client.id == game.players[0].id || client.id == game.players[1].id
+    context.fillStyle = [player1Color, playerColor, enemyColor][playerNumber]
+    player1.snake.map((cell) => context.fillRect(cellSize * cell.x, cellSize * cell.y, cellSize, cellSize))
 
-    context.fillStyle = isPlayer ? (game.players[0].id == client.id ? playerColor : enemyColor) : player1Color
-    game.players[0].snake.map((cell) => context.fillRect(cellSize * cell.x, cellSize * cell.y, cellSize, cellSize))
-
-    context.fillStyle = isPlayer ? (game.players[1].id == client.id ? playerColor : enemyColor) : player2Color
-    game.players[1].snake.map((cell) => context.fillRect(cellSize * cell.x, cellSize * cell.y, cellSize, cellSize))
+    context.fillStyle = [player2Color, enemyColor, playerColor][playerNumber]
+    player2.snake.map((cell) => context.fillRect(cellSize * cell.x, cellSize * cell.y, cellSize, cellSize))
 
     context.fillStyle = appleColor
-    context.fillRect(cellSize * game.apple.x, cellSize * game.apple.y, cellSize, cellSize)
-
-    // if (!isPlayer) {
-    //     document.getElementById('player1score').innerText = game.players[0].snake.length
-    //     document.getElementById('player2score').innerText = game.players[1].snake.length
-    // }
-
-    if (isPlayer) {
-        document.getElementById('player1score').classList.value = 'player'
-        document.getElementById('player2score').classList.value = 'enemy'
-
-        if (game.players[0].id == client.id) {
-            document.getElementById('player1score').innerText = game.players[0].snake.length
-            document.getElementById('player2score').innerText = game.players[1].snake.length
-        } else {
-            document.getElementById('player1score').innerText = game.players[1].snake.length
-            document.getElementById('player2score').innerText = game.players[0].snake.length
-        }
-    } else {
-        document.getElementById('player1score').classList.value = 'player1'
-        document.getElementById('player1score').innerText = game.players[0].snake.length
-
-        document.getElementById('player2score').classList.value = 'player2'
-        document.getElementById('player2score').innerText = game.players[1].snake.length
-    }
-    // if (game.players[0].id == client.id) {
-    // } else {
-    //     document.getElementById('player1score').innerText = game.players[1].snake.length
-    //     document.getElementById('player2score').innerText = game.players[0].snake.length
-    // }
+    context.fillRect(cellSize * apple.x, cellSize * apple.y, cellSize, cellSize)
 
-    if (!isPlayer) document.getElementById('controller').classList.add('hidden')
-}
-
-const resize = () => {
-    canvasSize = canvas.height = canvas.width
+    document.getElementById('player1score').innerText = player1.snake.length
+    document.getElementById('player2score').innerText = player2.snake.length
 }
+client.on('game', ({ apple, player1, player2 }) => draw(apple, player1, player2))
 
+const resize = () => (canvasSize = canvas.height = canvas.width)
+resize()
 window.addEventListener('resize', resize)
 window.addEventListener('keydown', (e) => client.emit('keydown', e.key))
-
-client.on('game', (game) => drawGame(game))
-
-resize()

public/style.css

@@ -14,51 +14,56 @@ body {
     color: #ccc;
     background-color: #333;
 }
+
 h1 {
-    margin-top: 1em;
+    margin-top: 1rem;
 }
+
 canvas {
-    margin-top: 2em;
+    margin-top: 2rem;
     width: 100%;
     max-width: 600px;
     border: 1px solid #ccc;
 }
+
 #scores {
-    margin-top: 2em;
-    max-width: 600px;
     width: 100%;
+    max-width: 600px;
+    margin-top: 2rem;
+    font-size: 1.5rem;
     display: flex;
     justify-content: space-around;
-    gap: 8px;
-    font-size: 1.5em;
+}
+#scores span {
+    width: 5rem;
+    padding: 0.5rem;
+    text-align: center;
+    border-radius: 0.5rem;
+}
+.player1 {
+    background-color: #c33;
+}
+.player2 {
+    background-color: #33c;
+}
+.player {
+    background-color: #ccc;
+    color: #333;
+}
+.enemy {
+    background-color: #666;
 }
 
 #controller {
     width: 160px;
     height: 120px;
     margin-top: 2rem;
     display: none;
-    /* gap: 8px; */
     grid-template-areas:
         '. U U .'
         'L L R R'
         '. D D .';
 }
-#controller button {
-    font-size: 1.5em;
-    border: 2px solid #ccc;
-    background-color: #666;
-    color: #ccc;
-    border-radius: 100px;
-    width: 50px;
-    height: 50px;
-    outline: none;
-}
-#controller button:hover {
-    color: #666;
-    background-color: yellowgreen;
-}
-
 #up {
     grid-area: U;
 }
@@ -74,6 +79,21 @@ canvas {
 .hidden {
     display: none !important;
 }
+#controller button {
+    font-size: 1.5rem;
+    border: 2px solid #ccc;
+    background-color: #666;
+    color: #ccc;
+    border-radius: 100px;
+    width: 50px;
+    height: 50px;
+    outline: none;
+}
+#controller button:hover {
+    color: #666;
+    background-color: yellowgreen;
+}
+
 @media only screen and (max-width: 600px) {
     body {
         justify-content: start !important;
@@ -85,21 +105,3 @@ canvas {
         display: grid;
     }
 }
-
-#scores span {
-    padding: 0.5rem 1rem;
-}
-
-.player1 {
-    background-color: #c33;
-}
-.player2 {
-    background-color: #33c;
-}
-.player {
-    background-color: #ccc;
-    color: #333;
-}
-.enemy {
-    background-color: #666;
-}