*

2 files changed, 163 insertions, 0 deletions

diff --git a/js/hill/game.js b/js/hill/game.js
new file mode 100644
index 0000000..b6a43e0
--- /dev/null
+++ b/js/hill/game.js
@@ -0,0 +1,143 @@
+const canvas = document.getElementById('gameCanvas');
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+const ctx = canvas.getContext('2d');
+
+const gravity = 1;
+const jumpForce = 14.75;
+
+const player = {
+    x: 200,
+    y: 0,
+    vx: 2,
+    vy: 2,
+    jumpForce: gravity + jumpForce,
+    onGround: false,
+    width: 20,
+    height: 20,
+    health: 10
+};
+
+const terrain = {
+    start: { x: 0, y: 0 },
+    end: { x: canvas.width, y: canvas.height },
+    height: 20
+};
+
+const objects = [];
+
+function initialize() {
+    terrain.start = { x: 0, y: canvas.height - 22 };
+    terrain.end = { x: canvas.width, y: canvas.height - 22 };
+
+    for (let i = 0; i < 50; i++) {
+        const object = {
+            x: i * 10 * canvas.width / 10,
+            y: terrain.start.y - Math.random() * 22,
+            width: 20,
+            height: Math.random() * 22
+        };
+        objects.push(object);
+    }
+}
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.save();
+
+    ctx.translate(-player.x + canvas.width / 4, -player.y + canvas.height / 2);
+
+    ctx.fillStyle = 'blue';
+    ctx.fillRect(player.x, player.y, player.width, player.height);
+
+    terrain.start.x = player.x - canvas.width;
+    terrain.end.x = player.x + canvas.width;
+
+    ctx.fillStyle = 'brown';
+    objects.forEach(object => {
+        ctx.beginPath();
+        ctx.arc(object.x, object.y, object.width / 2, 0, Math.PI * 2, true);
+        ctx.fill();
+    });
+
+    ctx.beginPath();
+    ctx.moveTo(terrain.start.x, terrain.start.y);
+    ctx.lineTo(terrain.end.x, terrain.end.y);
+    ctx.strokeStyle = 'green';
+    ctx.lineWidth = terrain.height;
+    ctx.stroke();
+
+    ctx.font = '20px Arial';
+    ctx.fillStyle = 'black';
+    ctx.fillText('Health: ' + player.health, player.x, player.y - 22);
+
+    ctx.restore();
+}
+
+const isColliding = (obj1, obj2) => (
+    obj1.x < obj2.x + obj2.width &&
+    obj1.x + obj1.width > obj2.x &&
+    obj1.y < obj2.y + obj2.height &&
+    obj1.y + obj1.height > obj2.y
+);
+
+const checkCollision = () => {
+    objects.forEach(object => {
+        if (isColliding(player, object)) {
+            player.health -= 1;
+            console.log('Collision detected!');
+        }
+    });
+};
+
+const gameLoop = () => {
+    player.vy += gravity;
+
+    player.x += player.vx;
+    player.y += player.vy;
+
+    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.y = terrainY - player.height;
+        player.vy = 0;
+    }
+
+    checkCollision();
+
+    initialize();
+    draw();
+    requestAnimationFrame(gameLoop);
+};
+
+gameLoop();
+
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    draw();
+});
+
+canvas.addEventListener('click', () => {
+    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;
+    }
+});
+
+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;
+    }
+});
+
+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
diff --git a/js/hill/index.html b/js/hill/index.html
new file mode 100644
index 0000000..d9bcd91
--- /dev/null
+++ b/js/hill/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>hill</title>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+        #gameCanvas {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas"></canvas>
+    <script src="game.js"></script>
+</body>
+</html>