1+ const KEY_CODE_LEFT = 37;
2+ const KEY_CODE_RIGHT = 39;
3+ const KEY_CODE_SPACE = 32;
4+
5+ const GAME_WIDTH = 800;
6+ const GAME_HEIGHT = 600;
7+
8+ const PLAYER_WIDTH = 20;
9+
10+ const GAME_STATE = {
11+ leftPressed: false,
12+ rightPressed: false,
13+ spacePressed: false,
14+ playerX: 0,
15+ playerY: 0,
16+ };
17+
18+ function setPosition(el, x, y) {
19+ el.style.transform = `translate(${x}px, ${y}px)`;
20+ }
21+
22+ function clamp(v, min, max) {
23+ if (v < min) {
24+ return min;
25+ } else if (v > max) {
26+ return max;
27+ } else {
28+ return v;
29+ }
30+ }
31+
32+ function createPlayer(container) {
33+ GAME_STATE.playerX = GAME_WIDTH / 2;
34+ GAME_STATE.playerY = GAME_HEIGHT - 50;
35+ const player = document.createElement("img");
36+ player.src = "img/player-red-2.png";
37+ player.className = "player";
38+ container.appendChild(player);
39+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
40+ }
41+
42+ function updatePlayer() {
43+ if (GAME_STATE.leftPressed) {
44+ GAME_STATE.playerX -= 5;
45+ }
46+ if (GAME_STATE.rightPressed) {
47+ GAME_STATE.playerX += 5;
48+ }
49+
50+ GAME_STATE.playerX = clamp(
51+ GAME_STATE.playerX,
52+ PLAYER_WIDTH,
53+ GAME_WIDTH - PLAYER_WIDTH
54+ );
55+
56+ const player = document.querySelector(".player");
57+ setPosition(player, GAME_STATE.playerX, GAME_STATE.playerY);
58+ }
59+
60+ function init() {
61+ const container = document.querySelector(".game");
62+ createPlayer(container);
63+ }
64+
65+ function update(e) {
66+ updatePlayer();
67+ window.requestAnimationFrame(update);
68+ }
69+
70+ function onKeyDown(e) {
71+ if (e.keyCode === KEY_CODE_LEFT) {
72+ GAME_STATE.leftPressed = true;
73+ } else if (e.keyCode === KEY_CODE_RIGHT) {
74+ GAME_STATE.rightPressed = true;
75+ } else if (e.keyCode === KEY_CODE_SPACE) {
76+ GAME_STATE.spacePressed = true;
77+ }
78+ }
79+
80+ function onKeyUp(e) {
81+ if (e.keyCode === KEY_CODE_LEFT) {
82+ GAME_STATE.leftPressed = false;
83+ } else if (e.keyCode === KEY_CODE_RIGHT) {
84+ GAME_STATE.rightPressed = false;
85+ } else if (e.keyCode === KEY_CODE_SPACE) {
86+ GAME_STATE.spacePressed = false;
87+ }
88+ }
89+
90+ init();
91+ window.addEventListener("keydown", onKeyDown);
92+ window.addEventListener("keyup", onKeyUp);
93+ window.requestAnimationFrame(update);
0 commit comments