Pastein: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dino Game</title> <style> bo

Загрузка данных
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dino Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f7f7f7;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
        .game-container {
            position: relative;
            border: 2px solid #000;
            background-color: #fff;
        }
        canvas {
            display: block;
            background: linear-gradient(to bottom, #87CEEB 0%, #98FB98 100%);
        }
        .score {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
            font-weight: bold;
            color: #000;
        }
        .instructions {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 18px;
            color: #666;
        }
        .game-over {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            font-size: 24px;
            color: #f00;
            display: none;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="gameCanvas" width="800" height="400"></canvas>
        <div class="score" id="score">Score: 0</div>
        <div class="instructions" id="instructions">
            Нажмите Пробел или кликните, чтобы начать!
        </div>
        <div class="game-over" id="gameOver">
            <div>Игра окончена!</div>
            <div>Ваш счёт: <span id="finalScore">0</span></div>
            <div>Нажмите Пробел, чтобы перезапустить</div>
        </div>
    </div>

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

        let gameRunning = false;
        let score = 0;
        let gameSpeed = 6;
        let gravity = 0.6;
        let isJumping = false;
        let jumpVelocity = 0;
        let groundY = canvas.height - 50;

        const dino = {
            x: 50,
            y: groundY,
            width: 40,
            height: 40,
            dy: 0
        };

        let obstacles = [];
        let lastObstacleX = canvas.width;
        let minGap = 200;

        let clouds = [];

        function initClouds() {
            clouds = [];
            for (let i = 0; i < 5; i++) {
                clouds.push({
                    x: Math.random() * canvas.width,
                    y: Math.random() * 100 + 20,
                    size: Math.random() * 30 + 20
                });
            }
        }

        function drawDino() {
            ctx.fillStyle = '#000';
            ctx.fillRect(dino.x, dino.y, dino.width, dino.height);
            ctx.fillRect(dino.x + dino.width, dino.y - 10, 20, 20);
            ctx.fillRect(dino.x - 15, dino.y + 10, 15, 10);
            ctx.fillRect(dino.x + 5, dino.y + dino.height, 5, 10);
            ctx.fillRect(dino.x + 25, dino.y + dino.height, 5, 10);
            ctx.fillStyle = '#fff';
            ctx.fillRect(dino.x + dino.width + 10, dino.y - 5, 5, 5);
            ctx.fillStyle = '#000';
            ctx.fillRect(dino.x + dino.width + 12, dino.y - 3, 2, 2);
        }

        function drawCloud(cloud) {
            ctx.fillStyle = '#fff';
            ctx.beginPath();
            ctx.arc(cloud.x, cloud.y, cloud.size, 0, Math.PI * 2);
            ctx.arc(cloud.x + cloud.size * 0.6, cloud.y, cloud.size * 0.8, 0, Math.PI * 2);
            ctx.arc(cloud.x + cloud.size * 1.2, cloud.y, cloud.size * 0.7, 0, Math.PI * 2);
            ctx.fill();
        }

        function drawGround() {
            ctx.fillStyle = '#8B4513';
            ctx.fillRect(0, groundY + dino.height, canvas.width, canvas.height - groundY - dino.height);
        }

        function drawObstacle(obstacle) {
            ctx.fillStyle = '#8B4513';
            ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
        }

        function updateDino() {
            if (isJumping) {
                dino.dy += gravity;
                dino.y += dino.dy;
                if (dino.y >= groundY) {
                    dino.y = groundY;
                    isJumping = false;
                    dino.dy = 0;
                }
            }
        }

        function updateObstacles() {
            if (Math.random() < 0.01 && (obstacles.length === 0 || lastObstacleX < canvas.width - minGap)) {
                obstacles.push({
                    x: canvas.width,
                    y: groundY,
                    width: 20,
                    height: 40
                });
                lastObstacleX = canvas.width;
            }

            for (let i = obstacles.length - 1; i >= 0; i--) {
                obstacles[i].x -= gameSpeed;
                if (obstacles[i].x + obstacles[i].width < 0) {
                    obstacles.splice(i, 1);
                    score += 10;
                }
            }
            lastObstacleX -= gameSpeed;
        }

        function updateClouds() {
            for (let cloud of clouds) {
                cloud.x -= gameSpeed * 0.5;
                if (cloud.x + cloud.size * 2 < 0) {
                    cloud.x = canvas.width + Math.random() * 100;
                    cloud.y = Math.random() * 100 + 20;
                }
            }
        }

        function checkCollision() {
            for (let obstacle of obstacles) {
                if (dino.x < obstacle.x + obstacle.width &&
                    dino.x + dino.width > obstacle.x &&
                    dino.y < obstacle.y + obstacle.height &&
                    dino.y + dino.height > obstacle.y) {
                    return true;
                }
            }
            return false;
        }

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

            clouds.forEach(drawCloud);
            drawGround();

            updateDino();
            updateObstacles();
            updateClouds();

            obstacles.forEach(drawObstacle);
            drawDino();

            if (checkCollision()) {
                gameOver();
                return;
            }

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

            if (score % 100 === 0 && score > 0) {
                gameSpeed += 0.1;
            }

            requestAnimationFrame(gameLoop);
        }

        function jump() {
            if (!isJumping && gameRunning) {
                isJumping = true;
                dino.dy = -12;
            }
        }

        function startGame() {
            gameRunning = true;
            instructionsElement.style.display = 'none';
            gameLoop();
        }

        function gameOver() {
            gameRunning = false;
            finalScoreElement.textContent = score;
            gameOverElement.style.display = 'block';
            gameSpeed = 6;
        }

        function restartGame() {
            gameRunning = false;
            score = 0;
            gameSpeed = 6;
            isJumping = false;
            dino.y = groundY;
            dino.dy = 0;
            obstacles = [];
            lastObstacleX = canvas.width;
            initClouds();
            gameOverElement.style.display = 'none';
            instructionsElement.style.display = 'block';
        }

        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                e.preventDefault();
                if (!gameRunning) {
                    if (instructionsElement.style.display !== 'none') {
                        startGame();
                    } else {
                        restartGame();
                    }
                } else {
                    jump();
                }
            }
        });

        canvas.addEventListener('click', () => {
            if (!gameRunning) {
                if (instructionsElement.style.display !== 'none') {
                    startGame();
                } else {
                    restartGame();
                }
            } else {
                jump();
            }
        });

        initClouds();
    </script>
</body>
</html>
Больше возможностей при регистрации:
