<!DOCTYPE html> <html lang="ru"> <head> <meta ...

Question

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sonic Obama: Harry Potter Edition</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #111; color: #fff; font-family: 'Courier New', Courier, monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; } h1 { color: #ffcc00; text-shadow: 3px 3px #ff0000; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 2px; } .subtitle { color: #00ffcc; font-weight: bold; margin-bottom: 15px; } #gameCanvas { border: 4px solid #fff; box-shadow: 0 0 20px rgba(0, 255, 200, 0.5); background: #5c94fc; image-rendering: pixelated; } .controls-info { margin-top: 15px; color: #ccc; font-size: 14px; text-align: center; } .key { background: #333; color: #fff; padding: 2px 6px; border-radius: 4px; border: 1px solid #555; } </style> </head> <body>

text
<h1>HARRY POTTER</h1>
<div class="subtitle">OBAMA SONIC 10</div>

<canvas id="gameCanvas" width="600" height="400"></canvas>

<div class="controls-info">
    Управление: <span class="key">A</span> / <span class="key">D</span> или <span class="key">←</span> <span class="key">→</span> — Бег | 
    <span class="key">W</span> / <span class="key">Пробел</span> или <span class="key">↑</span> — Прыжок
</div>

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

    // Отключаем сглаживание для пиксель-арта
    ctx.imageSmoothingEnabled = false;

    // Игровой мир
    const GRAVITY = 0.5;
    let score = 0;
    let tulipsCollected = 0;

    // Клавиши
    const keys = {
        left: false,
        right: false,
        up: false
    };

    // Игрок (Sonic Obama)
    const player = {
        x: 50,
        y: 200,
        width: 32,
        height: 40,
        vx: 0,
        vy: 0,
        speed: 5,
        jumpPower: -11,
        grounded: false,
        facing: 'right'
    };

    // Платформы
    const platforms = [
        { x: 0, y: 350, width: 600, height: 50 }, // Земля
        { x: 120, y: 260, width: 100, height: 20 },
        { x: 280, y: 200, width: 120, height: 20 },
        { x: 450, y: 270, width: 100, height: 20 }
    ];

    // Монеты "10"
    const coins = [
        { x: 150, y: 220, collected: false },
        { x: 320, y: 160, collected: false },
        { x: 480, y: 230, collected: false },
        { x: 50, y: 300, collected: false }
    ];

    // Тюльпаны
    const tulips = [
        { x: 200, y: 230, collected: false },
        { x: 370, y: 170, collected: false }
    ];

    // Обработчики ввода
    window.addEventListener('keydown', (e) => {
        if (e.code === 'KeyA' || e.code === 'ArrowLeft') keys.left = true;
        if (e.code === 'KeyD' || e.code === 'ArrowRight') keys.right = true;
        if (e.code === 'KeyW' || e.code === 'Space' || e.code === 'ArrowUp') {
            if (!keys.up && player.grounded) {
                player.vy = player.jumpPower;
                player.grounded = false;
            }
            keys.up = true;
        }
    });

    window.addEventListener('keyup', (e) => {
        if (e.code === 'KeyA' || e.code === 'ArrowLeft') keys.left = false;
        if (e.code === 'KeyD' || e.code === 'ArrowRight') keys.right = false;
        if (e.code === 'KeyW' || e.code === 'Space' || e.code === 'ArrowUp') keys.up = false;
    });

    // Рисуем пиксельного Соника (Sonic Obama)
    function drawPlayer() {
        ctx.save();
        ctx.translate(player.x + player.width / 2, player.y + player.height / 2);
        if (player.facing === 'left') {
            ctx.scale(-1, 1);
        }

        // Синее тело / Иглы Соника
        ctx.fillStyle = '#0044ff';
        ctx.fillRect(-14, -18, 28, 28);
        ctx.fillRect(-18, -10, 8, 12); // Иглы сзади

        // Лицо (мордочка)
        ctx.fillStyle = '#ffcc99';
        ctx.fillRect(-6, -6, 18, 14);

        // Глаза
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, -12, 10, 10);
        ctx.fillStyle = '#000000';
        ctx.fillRect(4, -8, 4, 6);

        // К красным кроссовкам!
        ctx.fillStyle = '#ff0000';
        ctx.fillRect(-12, 10, 12, 10); // Левый ботинок
        ctx.fillRect(2, 10, 14, 10);  // Правый ботинок
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(-12, 8, 12, 3);  // Белая полоса
        ctx.fillRect(2, 8, 14, 3);

        // Зеленый галстук-бабочка (как на фото!)
        ctx.fillStyle = '#00cc44';
        ctx.fillRect(-4, 2, 8, 6);
        ctx.fillStyle = '#ffff00';
        ctx.fillRect(-1, 4, 2, 2);

        ctx.restore();
    }

    // Отрисовка монет "10"
    function drawCoins() {
        coins.forEach(coin => {
            if (!coin.collected) {
                ctx.fillStyle = '#ffd700';
                ctx.beginPath();
                ctx.arc(coin.x, coin.y, 12, 0, Math.PI * 2);
                ctx.fill();
                ctx.strokeStyle = '#b8860b';
                ctx.lineWidth = 2;
                ctx.stroke();

                // Надпись "10"
                ctx.fillStyle = '#000';
                ctx.font = 'bold 10px sans-serif';
                ctx.textAlign = 'center';
                ctx.textBaseline = 'middle';
                ctx.fillText('10', coin.x, coin.y);
            }
        });
    }

    // Отрисовка тюльпанов
    function drawTulips() {
        tulips.forEach(t => {
            if (!t.collected) {
                // Стебель
                ctx.fillStyle = '#228b22';
                ctx.fillRect(t.x - 1, t.y, 3, 12);
                // Бутон
                ctx.fillStyle = '#ff0055';
                ctx.beginPath();
                ctx.arc(t.x, t.y - 3, 6, 0, Math.PI, true);
                ctx.fill();
                ctx.fillRect(t.x - 6, t.y - 3, 12, 4);
            }
        });
    }

    // Главный цикл обновления
    function update() {
        // Движение по X
        if (keys.left) {
            player.vx = -player.speed;
            player.facing = 'left';
        } else if (keys.right) {
            player.vx = player.speed;
            player.facing = 'right';
        } else {
            player.vx = 0;
        }

        // Гравитация
        player.vy += GRAVITY;

        // Применяем скорость
        player.x += player.vx;
        player.y += player.vy;

        // Коллизия с границами экрана
        if (player.x < 0) player.x = 0;
        if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;

        // Коллизия с платформами
        player.grounded = false;
        platforms.forEach(p => {
            if (player.x < p.x + p.width &&
                player.x + player.width > p.x &&
                player.y + player.height >= p.y &&
                player.y + player.height <= p.y + p.height &&
                player.vy >= 0) {
                
                player.grounded = true;
                player.vy = 0;
                player.y = p.y - player.height;
            }
        });

        // Сбор монет
        coins.forEach(coin => {
            if (!coin.collected) {
                let dx = (player.x + player.width / 2) - coin.x;
                let dy = (player.y + player.height / 2) - coin.y;
                let dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 20) {
                    coin.collected = true;
                    score += 10;
                }
            }
        });

        // Сбор тюльпанов
        tulips.forEach(t => {
            if (!t.collected) {
                let dx = (player.x + player.width / 2) - t.x;
                let dy = (player.y + player.height / 2) - t.y;
                let dist = Math.sqrt(dx * dx + dy * dy);
                if (dist < 20) {
                    t.collected = true;
                    tulipsCollected += 1;
                }
            }
        });
    }

    // Отрисовка кадра
    function render() {
        // Задний фон (Замок / Белый дом)
        ctx.fillStyle = '#70a5ff';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Белый Дом / Замок на фоне
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(200, 180, 200, 170);
        ctx.fillStyle = '#e0e0e0';
        ctx.fillRect(220, 140, 160, 40);
        // Колонны
        ctx.fillStyle = '#ccc';
        for (let i = 0; i < 5; i++) {
            ctx.fillRect(220 + i * 35, 180, 10, 170);
        }

        // Платформы
        platforms.forEach((p, index) => {
            ctx.fillStyle = index === 0 ? '#4a8505' : '#8b5a2b';
            ctx.fillRect(p.x, p.y, p.width, p.height);
            if (index === 0) {
                ctx.fillStyle = '#66b014';
                ctx.fillRect(p.x, p.y, p.width, 8); // Трава
            }
        });

        // Предметы
        drawCoins();
        drawTulips();

        // Игрок
        drawPlayer();

        // Интерфейс (UI)
        ctx.fillStyle = '#ffff00';
        ctx.font = 'bold 16px "Courier New"';
        ctx.fillText(`COINS: ${score}`, 20, 30);

        ctx.fillStyle = '#ff3366';
        ctx.fillText(`TULIPS: ${tulipsCollected}`, 150, 30);

        ctx.fillStyle = '#ffffff';
        ctx.fillText(`OBAMA 10`, 480, 30);
    }

    // Игровой цикл
    function gameLoop() {
        update();
        render();
        requestAnimationFrame(gameLoop);
    }

    // Запуск
    gameLoop();
</script>

</body> </html>

Answer 1

Вижу HTML/JS-код мини-игры “Sonic Obama: Harry Potter Edition” на Canvas.

Что именно сделать с ним: исправить баги, улучшить физику и платформы, добавить врагов/уровни/звук, переделать визуал, адаптировать под телефон или собрать готовый .html-файл?

<!DOCTYPE html> <html lang="ru"> <head> <meta ...

Question

Réflexion

Réponse

Partager cette Q&R