*

1 files changed, 77 insertions, 62 deletions

diff --git a/js/hill/game.js b/js/hill/game.js
index ef7cd65..094f79f 100644
--- a/js/hill/game.js
+++ b/js/hill/game.js
@@ -1,6 +1,7 @@
 const canvas = document.getElementById('gameCanvas');
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
+canvas.style.backgroundColor = '#F8F6F4';
 const ctx = canvas.getContext('2d');
 
 const gravity = 1;
@@ -11,6 +12,7 @@ const player = {
     y: 0,
     vx: 16,
     vy: 16,
+    vm: 32,
     jumpForce: gravity + jumpForce,
     onGround: false,
     width: 20,
@@ -20,79 +22,93 @@ const player = {
 const terrain = {
     start: { x: 0, y: 0 },
     end: { x: canvas.width, y: canvas.height },
-    height: 20
+    height: 5
 };
 
 const objects = [];
+let lastObjectX = 0;
 
-function initialize() {
-    terrain.start = { x: 0, y: 0 };
-    terrain.end = { x: canvas.width, y: canvas.height };
+const getRandomInterval = (min, max) => {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+}
 
-    for (let i = 0; i < 50; i++) {
-        const object = {
-            x: i * 10 * canvas.width / 10,
-            width: 50,
-            height: Math.random() * 22
-        };
+setInterval(function() {
+    const object = {
+        x: lastObjectX + 10 * canvas.width / 10,
+        width: 50,
+        height: Math.random() * 22
+    };
 
-        let terrainY = ((terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x)) * (object.x - terrain.start.x) + terrain.start.y;
+    let terrainY = ((terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x)) * (object.x - terrain.start.x) + terrain.start.y;
 
-        object.y = terrainY - object.height;
+    object.y = terrainY - object.height;
 
-        objects.push(object);
-    }
-}
+    objects.push(object);
 
-function draw() {
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    lastObjectX = object.x;
+}, getRandomInterval(1000, 3000));
 
-    ctx.save();
+const initialize = () => {
+    terrain.start = { x: 0, y: 0 };
+    terrain.end = { x: canvas.width, y: canvas.height };
+};
 
-    ctx.translate(-player.x + canvas.width / 4, -player.y + canvas.height / 2);
+const drawPlayer = () => {
 
-    ctx.fillStyle = '#b6daf9';
-    ctx.fillRect(player.x, player.y, player.width, player.height);
+    /*
+    ctx.fillStyle = 'lightgrey';
+    ctx.font = '22px Arial';
+    const text = `vx: ${player.vx.toFixed(2)}, vy: ${player.vy.toFixed(2)}`;
+    ctx.fillText(text, player.x, player.y - 12);
+    */
 
-    terrain.start.x = player.x - canvas.width;
-    terrain.end.x = player.x + canvas.width;
+    ctx.fillStyle = '#C4DFDF';
+    ctx.fillRect(player.x, player.y, player.width, player.height);
+};
 
-    ctx.fillStyle = '#aaa';
+const drawObjects = () => {
+    ctx.fillStyle = '#D2E9E9';
     objects.forEach(object => {
         ctx.beginPath();
         ctx.arc(object.x, object.y, object.width / 2, 0, Math.PI * 2, true);
         ctx.fill();
     });
+};
 
+const drawTerrain = () => {
     ctx.beginPath();
     ctx.moveTo(terrain.start.x, terrain.start.y);
     ctx.lineTo(terrain.end.x, terrain.end.y);
-    ctx.strokeStyle = '#ddd';
+    ctx.strokeStyle = '#E3F4F4';
     ctx.lineWidth = terrain.height;
     ctx.stroke();
+};
 
-    // ctx.font = '20px Arial';
-    // ctx.fillStyle = 'black';
-    // ctx.fillText('Health: ' + player.health, player.x, player.y - 22);
-
-     ctx.fillStyle = '#a2a2f2';
-     for (let i = particles.length - 1; i >= 0; i--) {
-         let particle = particles[i];
- 
-         ctx.fillRect(particle.x, particle.y, 5, 5);
- 
-         particle.x += particle.vx;
-         particle.y += particle.vy;
- 
-         particle.lifespan--;
- 
-         if (particle.lifespan === 0) {
-             particles.splice(i, 1);
-         }
-     }
+const drawParticles = () => {
+    ctx.fillStyle = '#C4DFDF';
+    particles.forEach((particle, index) => {
+        ctx.fillRect(particle.x, particle.y, 5, 5);
+        particle.x += particle.vx;
+        particle.y += particle.vy;
+        particle.lifespan--;
+        if (particle.lifespan === 0) {
+            particles.splice(index, 1);
+        }
+    });
+};
 
+const draw = () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.save();
+    ctx.translate(-player.x + canvas.width / 4, -player.y + canvas.height / 2);
+    drawPlayer();
+    terrain.start.x = player.x - canvas.width;
+    terrain.end.x = player.x + canvas.width;
+    drawObjects();
+    drawTerrain();
+    drawParticles();
     ctx.restore();
-}
+};
 
 const isColliding = (obj1, obj2) => (
     obj1.x < obj2.x + obj2.width &&
@@ -104,8 +120,10 @@ const isColliding = (obj1, obj2) => (
 const checkCollision = () => {
     objects.forEach(object => {
         if (isColliding(player, object)) {
-            player.health -= 1;
-            console.log('Collision detected!');
+            if (player.vx >= 1) {
+                player.vx -= 0.5;
+                player.vy -= 0.5;
+            }
         }
     });
 };
@@ -157,25 +175,22 @@ window.addEventListener('resize', () => {
     draw();
 });
 
-canvas.addEventListener('click', () => {
+const playerDoJump = () => {
     const terrainY = (terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x) * (player.x - terrain.start.x) + terrain.start.y;
     if (player.y + player.height >= terrainY) {
         player.vy = player.jumpForce * -1;
+        if (player.vx < player.vm) {
+            player.vx += 0.5;
+        }
     }
-});
+};
 
-canvas.addEventListener('touchstart', () => {
-    const terrainY = (terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x) * (player.x - terrain.start.x) + terrain.start.y;
-    if (player.y + player.height >= terrainY) {
-        player.vy = player.jumpForce * -1;
+const handleKeyDown = event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+        playerDoJump();
     }
-});
+};
 
-window.addEventListener('keydown', event => {
-    if (event.key === 'Enter') {
-        const terrainY = (terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x) * (player.x - terrain.start.x) + terrain.start.y;
-        if (player.y + player.height >= terrainY) {
-            player.vy = player.jumpForce * -1;
-        }
-    }
-});
\ No newline at end of file
+canvas.addEventListener('click', playerDoJump);
+canvas.addEventListener('touchstart', playerDoJump);
+window.addEventListener('keydown', handleKeyDown);