diff options
author | elioat <hi@eli.li> | 2023-12-28 12:33:32 -0500 |
---|---|---|
committer | elioat <hi@eli.li> | 2023-12-28 12:33:32 -0500 |
commit | 25f4965000e38bb26b55e589ce063aa2b3bd2b9a (patch) | |
tree | 3d4b0cb11c33af688c6530c6b42219115a24f690 /js/canvas | |
parent | e07ac296c0ae4095c39d1bfd099f1a341326ca00 (diff) | |
download | tour-25f4965000e38bb26b55e589ce063aa2b3bd2b9a.tar.gz |
*
Diffstat (limited to 'js/canvas')
-rw-r--r-- | js/canvas/game.js | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/js/canvas/game.js b/js/canvas/game.js index ea05b7f..9cad0f9 100644 --- a/js/canvas/game.js +++ b/js/canvas/game.js @@ -22,6 +22,22 @@ const player = { const playerSprite = new Image(); playerSprite.src = player.spriteUrl; + +const npc = { + x: 100, // starting x-position + y: 100, // starting y-position + width: 16, // width of the NPC + height: 16, // height of the NPC + color: 'pink' // color of the NPC +}; + +// Function to draw the NPC +function drawNPC() { + ctx.fillStyle = npc.color; + ctx.fillRect(npc.x, npc.y, npc.width, npc.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. @@ -79,11 +95,20 @@ function gameLoop() { if (player.y > canvas.height) { player.y = 1 } + + // detect if the player is touching the NPC + if (player.x < npc.x + npc.width && player.x + player.width > npc.x && player.y < npc.y + npc.height && player.y + player.height > npc.y) { + // collision detected! + console.log('collision detected!'); + // change the color of the NPC + npc.color = 'red'; + } // draw // ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.width, player.height); ctx.drawImage(playerSprite, player.x, player.y, player.width, player.height); + drawNPC(); // next frame requestAnimationFrame(gameLoop); |