added arrow key movement

samimjs · samimjs · commit df9b93913c1d · 2018-07-13T17:15:16.000+02:00
diff --git a/Projects/space-game/step02/index.html b/Projects/space-game/step02/index.html
@@ -26,7 +26,7 @@ <h2>You lost the game</h2>
     </div>
     <footer>Left/right keys to move</footer>
   </div>
-  <script src="js/game.js"></script>
+  <script src="js/keyboard.js"></script>
 </body>
 
 </html>
diff --git a/Projects/space-game/step02/js/keyboard.js b/Projects/space-game/step02/js/keyboard.js
@@ -0,0 +1,93 @@
+const KEY_CODE_LEFT = 37;
+const KEY_CODE_RIGHT = 39;
+const KEY_CODE_SPACE = 32;
+
+const GAME_WIDTH = 800;
+const GAME_HEIGHT = 600;
+
+const PLAYER_WIDTH = 20;
+
+const GAME_STATE = {
+  leftPressed: false,
+  rightPressed: false,
+  spacePressed: false,
+  playerX: 0,
+  playerY: 0,
+};
+
+function setPosition(el, x, y) {
+  el.style.transform = `translate(${x}px, ${y}px)`;
+}
+
+function clamp(v, min, max) {
+  if (v < min) {
+    return min;
+  } else if (v > max) {
+    return max;
+  } else {
+    return v;
+  }
+}
+
+function createPlayer(container) {
+  GAME_STATE.playerX = GAME_WIDTH / 2;
+  GAME_STATE.playerY = GAME_HEIGHT - 50;
+  const player = document.createElement("img");
+  player.src = "img/player-red-2.png";
+  player.className = "player";
+  container.appendChild(player);
+  setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function updatePlayer() {
+  if (GAME_STATE.leftPressed) {
+    GAME_STATE.playerX -= 5;
+  }
+  if (GAME_STATE.rightPressed) {
+    GAME_STATE.playerX += 5;
+  }
+
+  GAME_STATE.playerX = clamp(
+    GAME_STATE.playerX,
+    PLAYER_WIDTH,
+    GAME_WIDTH - PLAYER_WIDTH
+  );
+
+  const player = document.querySelector(".player");
+  setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
+}
+
+function init() {
+  const container = document.querySelector(".game");
+  createPlayer(container);
+}
+
+function update(e) {
+  updatePlayer();
+  window.requestAnimationFrame(update);
+}
+
+function onKeyDown(e) {
+  if (e.keyCode === KEY_CODE_LEFT) {
+    GAME_STATE.leftPressed = true;
+  } else if (e.keyCode === KEY_CODE_RIGHT) {
+    GAME_STATE.rightPressed = true;
+  } else if (e.keyCode === KEY_CODE_SPACE) {
+    GAME_STATE.spacePressed = true;
+  }
+}
+
+function onKeyUp(e) {
+  if (e.keyCode === KEY_CODE_LEFT) {
+    GAME_STATE.leftPressed = false;
+  } else if (e.keyCode === KEY_CODE_RIGHT) {
+    GAME_STATE.rightPressed = false;
+  } else if (e.keyCode === KEY_CODE_SPACE) {
+    GAME_STATE.spacePressed = false;
+  }
+}
+
+init();
+window.addEventListener("keydown", onKeyDown);
+window.addEventListener("keyup", onKeyUp);
+window.requestAnimationFrame(update);
