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: 0 };
    terrain.end = { x: canvas.width, y: canvas.height };

    for (let i = 0; i < 50; i++) {
        const object = {
            x: i * 10 * canvas.width / 10,
            width: 20,
            height: Math.random() * 22
        };

        // Calculate the y-coordinate of the terrain line at the x-coordinate of the object
        let terrainY = ((terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x)) * (object.x - terrain.start.x) + terrain.start.y;

        // Set the y-coordinate of the object to the y-coordinate of the terrain line minus the height of the object
        object.y = terrainY - object.height;

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

    for (let object of objects) {
        // Update y-coordinate based on gravity
        object.y += gravity;

        // Calculate the y-coordinate of the terrain line at the x-coordinate of the object
        let terrainY = ((terrain.end.y - terrain.start.y) / (terrain.end.x - terrain.start.x)) * (object.x - terrain.start.x) + terrain.start.y;

        // If the new y-coordinate is below the terrain line, set it to the terrain line
        if (object.y + object.height > terrainY) {
            object.y = terrainY - object.height;
        }
    }

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