*

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();
     }
 };