Basic Dinosaur Game Code Implementation

Answered using OpenAI o1 mini by OpenAI o1

Question:

Generate code for a basic dinosaur game, the dinosaur game should be similar to google chrome's offline dinosaur game. Whereby, the dino jumps over blocks or cactus. After each successful jump the score increases, if it collides with the blocks, the game ends, then it displays the score upto the point of collision. Use html, css and javascript, then share the full code having combined all files in the html file. Make sure all the mechanisms you include work correctly

Answer:

Sure! Below is a simple implementation of a dinosaur game similar to the Google Chrome offline dinosaur game. The game is created using HTML, CSS, and JavaScript, all combined into a single HTML file. You can copy and paste the code into an HTML file and open it in your browser to play the game.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dinosaur Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #f7f7f7;
        }
        #gameCanvas {
            display: block;
            margin: 0 auto;
            background-color: #fff;
            border: 2px solid #000;
        }
        #score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 24px;
            font-family: Arial, sans-serif;
        }
        #gameOver {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 48px;
            font-family: Arial, sans-serif;
            display: none;
        }
    </style>
</head>
<body>
    <div id="score">Score: 0</div>
    <div id="gameOver">Game Over!<br>Score: <span id="finalScore"></span></div>
    <canvas id="gameCanvas" width="800" height="200"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        const gameOverElement = document.getElementById('gameOver');
        const finalScoreElement = document.getElementById('finalScore');

        let dino = { x: 50, y: 150, width: 20, height: 20, dy: 0, gravity: 0.6, jumpPower: -10, isJumping: false };
        let obstacles = [];
        let score = 0;
        let gameOver = false;

        document.addEventListener('keydown', function(event) {
            if (event.code === 'Space' && !dino.isJumping) {
                dino.dy = dino.jumpPower;
                dino.isJumping = true;
            }
        });

        function spawnObstacle() {
            const obstacle = { x: canvas.width, y: 160, width: 20, height: 20 };
            obstacles.push(obstacle);
        }

        function update() {
            if (gameOver) return;

            // Update dino position
            dino.dy += dino.gravity;
            dino.y += dino.dy;

            if (dino.y >= 150) {
                dino.y = 150;
                dino.isJumping = false;
                dino.dy = 0;
            }

            // Update obstacles
            for (let i = 0; i < obstacles.length; i++) {
                obstacles[i].x -= 5;

                // Check for collision
                if (dino.x < obstacles[i].x + obstacles[i].width &&
                    dino.x + dino.width > obstacles[i].x &&
                    dino.y < obstacles[i].y + obstacles[i].height &&
                    dino.y + dino.height > obstacles[i].y) {
                    gameOver = true;
                    finalScoreElement.textContent = score;
                    gameOverElement.style.display = 'block';
                }
            }

            // Remove off-screen obstacles
            obstacles = obstacles.filter(obstacle => obstacle.x + obstacle.width > 0);

            // Increase score
            score++;
            scoreElement.textContent = `Score: ${score}`;

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

            // Draw dino
            ctx.fillStyle = 'green';
            ctx.fillRect(dino.x, dino.y, dino.width, dino.height);

            // Draw obstacles
            ctx.fillStyle = 'red';
            for (let obstacle of obstacles) {
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            }

            requestAnimationFrame(update);
        }

        function startGame() {
            score = 0;
            obstacles = [];
            gameOver = false;
            dino.y = 150;
            dino.dy = 0;
            gameOverElement.style.display = 'none';
            scoreElement.textContent = `Score: ${score}`;
            update();
            setInterval(spawnObstacle, 2000);
        }

        startGame();
    </script>
</body>
</html>

How to Play:

  1. Copy the code above into a text editor and save it as dinosaur_game.html.
  2. Open the file in a web browser.
  3. Press the Space key to make the dinosaur jump over the obstacles (red blocks).
  4. The score increases as you successfully jump over obstacles.
  5. The game ends when the dinosaur collides with an obstacle, and the final score is displayed.

Feel free to modify the code to add more features or improve the game! Enjoy!