Sure! Here's an example of a simple game implemented as a single HTML file, using JavaScript and enclosed in script tags:











    





const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Define player variables
const player = {
    x: 50,
    y: canvas.height - 30,
    width: 50,
    height: 50,
    speed: 5,
    dx: 0,
    dy: 0,
    gravity: 0.5,
    jumpPower: 10
};

// Define obstacles
const obstacles = [];

// Add obstacles to the canvas
function createObstacle(x, y, width, height) {
    obstacles.push({
        x: x,
        y: y,
        width: width,
        height: height
    });
}

// Function to draw the player
function drawPlayer() {
    ctx.fillStyle = "blue";
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

// Function to draw obstacles
function drawObstacles() {
    ctx.fillStyle = "red";
    for (let i = 0; i < obstacles.length; i++) {
        ctx.fillRect(obstacles[i].x, obstacles[i].y, obstacles[i].width, obstacles[i].height);
    }
}

// Function to update game state
function update() {
    // Move player
    player.x += player.dx;
    player.dy += player.gravity;
    player.y += player.dy;

    // Collision detection with ground
    if (player.y + player.height > canvas.height) {
        player.y = canvas.height - player.height;
        player.dy = 0;
    }

    // Check for collisions with obstacles
    for (let i = 0; i < obstacles.length; i++) {
        if (isCollision(player, obstacles[i])) {
            gameOver();
            return;
        }
    }
}

// Function to check collision between two objects
function isCollision(obj1, obj2) {
    return (
        obj1.x < obj2.x + obj2.width &&
        obj1.x + obj1.width > obj2.x &&
        obj1.y < obj2.y + obj2.height &&
        obj1.y + obj1.height > obj2.y
    );
}

// Game loop
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawPlayer();
    drawObstacles();
    update();
    requestAnimationFrame(gameLoop);
}

// Start the game loop
gameLoop();
// Keyboard event listeners
document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowLeft' || event.key === 'Left') {
        player.dx = -5;
    }
    if (event.key === 'ArrowRight' || event.key === 'Right') {
        player.dx = 5;
    }
    if (event.key === 'ArrowUp' || event.key === 'Up') {
        if (player.y === canvas.height - player.height) {
            player.dy = -15;
        }
    }
});

document.addEventListener('keyup', function(event) {
    if (
        (event.key === 'ArrowLeft' || event.key === 'Left') &&
        player.dx < 0
    ) {
        player.dx = 0;
    }
    if (
        (event.key === 'ArrowRight' || event.key === 'Right') &&
        player.dx > 0
    ) {
        player.dx = 0;
    }
});

// Game loop
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Update player position
    player.x += player.dx;
    player.y += player.dy;

    // Handle collisions with obstacles
    for (let i = 0; i < obstacles.length; i++) {
        const obstacle = obstacles[i];

        // Check if the player collides with an obstacle
        if (
            player.x + player.width > obstacle.x &&
            player.x < obstacle.x + obstacle.width &&
            player.y + player.height > obstacle.y &&
            player.y < obstacle.y + obstacle.height
        ) {
            // Game over logic here
            console.log('Game over!');
            return;
        }
    }

    // Clear previous frame
    ctx.clearRect(0, 0, canvas.width, canvas.height);

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

    // Draw the obstacles
    ctx.fillStyle = 'red';
    for (let i = 0; i < obstacles.length; i++) {
        const obstacle = obstacles[i];
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    }

    // Request next frame
    requestAnimationFrame(gameLoop);
}

// Start the game loop
gameLoop();