filipedeschamps · RaphaCarrara · Nov 11, 2021 · Nov 12, 2021
diff --git a/playground/Arapha/client.html b/playground/Arapha/client.html
@@ -0,0 +1,99 @@
+<HTML>
+    <HEAD>
+        <meta charset="utf-8"
+        <title>Meu primeiro jogo multiplayer</title>
+        <style>
+            #screen {
+                border: 10px solid #CCC;
+                image-rendering: pixelated;
+                image-rendering: crisp-edges;
+                image-rendering: -moz-crisp-edges;
+                width: 400px;
+                height: 400px;
+            }
+        </style>
+
+    </HEAD>
+    <BODY>
+        <canvas id="screen" width="10" height="10" ></canvas>
+        <script>
+
+            const screen = document.getElementById("screen")
+            const context = screen.getContext("2d")
+            const currentPlayerId = 'player1'
+
+            const game = {
+                players: {
+                    'player1': {x:1, y:1},
+                    'player2': {x:9, y:9}
+                },
+                fruits: {
+                    'fruit1': {x:3, y:1}
+                }
+            }
+
+            function createGame() {
+                function movePlayer(comand) {
+                    console.log(`movendo ${comand.playerId} com ${comand.keyPressed}`)
+                }
+                return {
+                    movePlayer
+                }
+            }
+
+            document.addEventListener('keydown', handlekeydown)
+
+            function handlekeydown (event) {
+
+                const keyPressed = event.key
+                const player = game.players[currentPlayerId]
+
+                if (keyPressed === 'ArrowUp' && player.y - 1 >= 0) {
+                    player.y = player.y - 1
+                    return
+                }
+
+                if (keyPressed === 'ArrowRight' && player.x + 1 < screen.width) {
+                    player.x = player.x + 1
+                    return
+                }
+
+                if (keyPressed === 'ArrowDown' && player.y + 1 < screen.height) {
+                    player.y = player.y + 1
+                    return
+                }
+
+                if (keyPressed === 'ArrowLeft' && player.x - 1 >= 0) {
+                    player.x = player.x - 1
+                    return
+                }
+
+            }
+
+            renderScreen()
+
+            function renderScreen() {
+
+                context.fillStyle = 'white'
+                context.clearRect (0, 0, 10, 10)
+
+                for (const playerId in game.players) {
+                    const player = game.players [playerId]
+                    context.fillStyle = 'black'
+                    context.fillRect (player.x, player.y, 1, 1)
+                }
+
+                for (const fruitId in game.fruits) {
+                    const fruit = game.fruits [fruitId]
+                    context.fillStyle = 'green'
+                    context.fillRect (fruit.x, fruit.y, 1, 1)
+                }
+
+                requestAnimationFrame(renderScreen)
+
+            }
+
+
+        </script>    
+    </BODY>
+    </HTML>