path: root/js/starting-place/game.js

// Get the canvas and context
const canvas = document.getElementById('game');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundColor = '#f0f0f0';
const ctx = canvas.getContext('2d');

(function(){

    // Define game colors
    const COLORS = {
        player: '#2d2d2d',
        particles: '#2d2d2d',
        objects: '#2d2d2d',
        terrain: '#2d2d2d'
    };

    // Define game physics
    const physics = {
        gravity: 1,
        jumpForce: 0.5
    };

    // Define player properties
    const player = {
        x: 200,
        y: 0,
        vx: 0,
        vy: 10,
        vm: 32,
        jumpForce: physics.gravity + physics.jumpForce,
        onGround: false,
        width: 20,
        height: 20,
        distanceTraveled: 0
    };

    // Define terrain properties
    const terrain = {
        start: { x: 0, y: canvas.height - 40 },
        end: { x: canvas.width, y: canvas.height },
        height: 8
    };

    // Define game objects
    const objects = [];

    // Update game state
    function update() {
        // Update player
        player.x += player.vx;
        player.y += player.vy;

        // Check collision with terrain
        if (player.y + player.height >= terrain.start.y) {
            player.y = terrain.start.y - player.height;
            player.vy = 0;
            player.onGround = true;
        } else {
            player.onGround = false;
        }

        // Update objects
        for (let object of objects) {
            object.y += physics.gravity;
        }
    }

    // Render game state
    function draw() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw player
        ctx.fillStyle = COLORS.player;
        ctx.fillRect(player.x, player.y, player.width, player.height);

        // Draw terrain
        ctx.fillStyle = COLORS.terrain;
        ctx.fillRect(terrain.start.x, terrain.start.y, terrain.end.x - terrain.start.x, terrain.height);

        // Draw objects
        for (let object of objects) {
            ctx.fillStyle = COLORS.objects;
            ctx.fillRect(object.x, object.y, object.width, object.height);
        }
    }

    // Handle keydown event
    document.addEventListener('keydown', function(event) {
        if (event.code === 'Space' || event.code === 'ArrowUp') {
            if (player.onGround) {
                player.vy = -player.jumpForce;
                player.onGround = false;
            }
        }
    });

    // Game loop
    function gameLoop() {
        update();
        draw();

        // Request next frame
        requestAnimationFrame(gameLoop);
    }

    // Start game loop
    gameLoop();

})();