diff options
author | elioat <elioat@tilde.institute> | 2023-12-31 20:52:09 -0500 |
---|---|---|
committer | elioat <elioat@tilde.institute> | 2023-12-31 20:52:09 -0500 |
commit | f168c43e18645e1811e9bfa0b7704f8e01b164c7 (patch) | |
tree | 68a9f7caf82d9ad3bca2c2ebb59f88b5adf6b88d /js | |
parent | f8f196f590f21440c3fce6bcaa1a7b4cfe7036c8 (diff) | |
download | tour-f168c43e18645e1811e9bfa0b7704f8e01b164c7.tar.gz |
*
Diffstat (limited to 'js')
-rw-r--r-- | js/hill/game.js | 58 |
1 files changed, 47 insertions, 11 deletions
diff --git a/js/hill/game.js b/js/hill/game.js index 094f79f..2dc0716 100644 --- a/js/hill/game.js +++ b/js/hill/game.js @@ -1,9 +1,26 @@ const canvas = document.getElementById('gameCanvas'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; -canvas.style.backgroundColor = '#F8F6F4'; +canvas.style.backgroundColor = '#f0f0f0'; const ctx = canvas.getContext('2d'); +/* +const COLORS = { + player: '#c0c0c0', + particles: '#c0c0c0', + objects: '#e0e0e0', + terrain: '#e0e0e0' +}; +*/ + +const COLORS = { + player: '#2d2d2d', + particles: '#2d2d2d', + objects: '#2d2d2d', + terrain: '#2d2d2d' +}; + + const gravity = 1; const jumpForce = 14.75; @@ -22,7 +39,7 @@ const player = { const terrain = { start: { x: 0, y: 0 }, end: { x: canvas.width, y: canvas.height }, - height: 5 + height: 8 }; const objects = []; @@ -32,10 +49,10 @@ const getRandomInterval = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min); } -setInterval(function() { +const createObject = () => { const object = { x: lastObjectX + 10 * canvas.width / 10, - width: 50, + width: Math.random() * 100, height: Math.random() * 22 }; @@ -46,7 +63,26 @@ setInterval(function() { objects.push(object); lastObjectX = object.x; -}, getRandomInterval(1000, 3000)); +}; + + +// Shout out to Josh Grams! +let lastUpdateTime = 0; +const fps = 60; +const frameDelay = 1000 / fps; + +const update = (currentTime = 0) => { + const deltaTime = currentTime - lastUpdateTime; + + if (deltaTime >= frameDelay) { + createObject(); + lastUpdateTime = currentTime; + } + + requestAnimationFrame(update); +}; + +update(); const initialize = () => { terrain.start = { x: 0, y: 0 }; @@ -62,12 +98,12 @@ const drawPlayer = () => { ctx.fillText(text, player.x, player.y - 12); */ - ctx.fillStyle = '#C4DFDF'; + ctx.fillStyle = COLORS.player; ctx.fillRect(player.x, player.y, player.width, player.height); }; const drawObjects = () => { - ctx.fillStyle = '#D2E9E9'; + ctx.fillStyle = COLORS.objects; objects.forEach(object => { ctx.beginPath(); ctx.arc(object.x, object.y, object.width / 2, 0, Math.PI * 2, true); @@ -79,13 +115,13 @@ const drawTerrain = () => { ctx.beginPath(); ctx.moveTo(terrain.start.x, terrain.start.y); ctx.lineTo(terrain.end.x, terrain.end.y); - ctx.strokeStyle = '#E3F4F4'; + ctx.strokeStyle = COLORS.terrain; ctx.lineWidth = terrain.height; ctx.stroke(); }; const drawParticles = () => { - ctx.fillStyle = '#C4DFDF'; + ctx.fillStyle = COLORS.particles; particles.forEach((particle, index) => { ctx.fillRect(particle.x, particle.y, 5, 5); particle.x += particle.vx; @@ -158,7 +194,7 @@ const gameLoop = () => { y: player.y, vx: Math.random() * 2 - 1, vy: Math.random() * 2 - 1, - lifespan: 17 + lifespan: player.vx * 4 }); checkCollision(); @@ -186,7 +222,7 @@ const playerDoJump = () => { }; const handleKeyDown = event => { - if (event.key === 'Enter' || event.key === ' ') { + if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowUp' || event.key === 'w' || event.key === 'W') { playerDoJump(); } }; |