diff options
author | elioat <hi@eli.li> | 2023-10-30 15:40:53 -0400 |
---|---|---|
committer | elioat <hi@eli.li> | 2023-10-30 15:40:53 -0400 |
commit | 49cd6866163f168c95d3b18692710464440fc0ab (patch) | |
tree | c0319a4b22f0563fca833d787140b3c7d603793c /js/canvas | |
parent | 529faba7db17d06b4e31034e5193ccf9b8f1bcbf (diff) | |
download | tour-49cd6866163f168c95d3b18692710464440fc0ab.tar.gz |
*
Diffstat (limited to 'js/canvas')
-rw-r--r-- | js/canvas/game.js | 51 | ||||
-rw-r--r-- | js/canvas/index.html | 1 |
2 files changed, 29 insertions, 23 deletions
diff --git a/js/canvas/game.js b/js/canvas/game.js index 7b02bde..e8ef51f 100644 --- a/js/canvas/game.js +++ b/js/canvas/game.js @@ -13,7 +13,7 @@ ctx.fillStyle = "#e0f8cf"; ctx.fillRect(0, 0, canvas.width, canvas.height); // create a rectangle -const rect = { +const player = { x: 50, y: 50, width: 16, @@ -23,62 +23,67 @@ const rect = { colorAlt: "pink" }; -// draw the rectangle -ctx.fillStyle = rect.color; -ctx.fillRect(rect.x, rect.y, rect.width, rect.height); - -// move the rectangle -rect.x += 5; - -// clear the canvas -ctx.clearRect(0, 0, canvas.width, canvas.height); - -// draw the rectangle -ctx.fillStyle = rect.color; -ctx.fillRect(rect.x, rect.y, rect.width, rect.height); - // add keyboard input +// FIXME: this input is blocking, allowing for only 1 key to be read at a time +// this means that if you wanna do 2 things at 1 time you cannot. +// For more info, <https://medium.com/@dovern42/handling-multiple-key-presses-at-once-in-vanilla-javascript-for-game-controllers-6dcacae931b7> document.addEventListener("keydown", (event) => { switch (event.code) { case "ArrowLeft": case "KeyH": case "KeyA": - rect.x -= rect.step; + player.x -= player.step; break; case "ArrowRight": case "KeyL": case "KeyD": - rect.x += rect.step; + player.x += player.step; break; case "ArrowUp": case "KeyK": case "KeyW": - rect.y -= rect.step; + player.y -= player.step; break; case "ArrowDown": case "KeyJ": case "KeyS": - rect.y += rect.step; + player.y += player.step; break; case "KeyZ": case "KeyN": - rect.color = "#65ff00"; + player.color = "#65ff00"; break; case "KeyX": case "KeyM": - rect.color = rect.colorAlt; + player.color = player.colorAlt; break; } }); + // game loop function gameLoop() { // clear the canvas ctx.clearRect(0, 0, canvas.width, canvas.height); + // looping canvas space + // this feels like a hack... + if (player.x < 0) { + player.x = canvas.width - 1 + } + if (player.x > canvas.width) { + player.x = 1 + } + if (player.y < 0) { + player.y = canvas.height - 1 + } + if (player.y > canvas.height) { + player.y = 1 + } + // draw the rectangle - ctx.fillStyle = rect.color; - ctx.fillRect(rect.x, rect.y, rect.width, rect.height); + ctx.fillStyle = player.color; + ctx.fillRect(player.x, player.y, player.width, player.height); // request the next frame requestAnimationFrame(gameLoop); diff --git a/js/canvas/index.html b/js/canvas/index.html index 7b5df21..2d887fe 100644 --- a/js/canvas/index.html +++ b/js/canvas/index.html @@ -7,6 +7,7 @@ <style type="text/css"> body { padding: 1em 0; + background-color: darkgray; } #gameCanvas { border: 1px solid black; |