Caminata de temuometría

Abrir en el editor Publica tu código

Recomendado

6 September 2025

Estructura HTML de la barra de progreso animada CSS

27 May 2025

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>史诗冒险游戏</title>
    <style>
        /* Styles as in the original PHP version */
    </style>
</head>
<body>

<h1>史诗冒险游戏</h1>

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>史诗冒险游戏</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #1a1a1a;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
            font-family: 'Courier New', Courier, monospace;
        }
        canvas {
            background-color: #2b3e50;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            border-bottom: 5px solid #fff;
        }
        #ui {
            position: absolute;
            top: 20px;
            color: white;
            text-align: center;
            width: 800px;
            pointer-events: none;
        }
    </style>
</head>
<body>

<div id="ui">
        <h2 id="scoreDisplay">分数: 0</h2>
        <p id="instruction">按空格键或单击鼠标跳转</p>
    </div>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

// Game Variables
    let frames = 0;
    let score = 0;
    let gameSpeed = 6;
    let isGameOver = false;

// Player Object
    const player = {
        x: 100,
        y: 300,
        size: 30,
        dy: 0,
        jumpForce: 11,
        gravity: 0.6,
        grounded: false,
        angle: 0,
        
        draw() {
            ctx.save();
            ctx.translate(this.x + this.size / 2, this.y + this.size / 2);
            ctx.rotate(this.angle * Math.PI / 180);
            
            // Draw Player Cube
            ctx.fillStyle = '#00ffcc';
            ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
            ctx.strokeStyle = '#fff';
            ctx.lineWidth = 2;
            ctx.strokeRect(-this.size / 2, -this.size / 2, this.size, this.size);
            
            ctx.restore();
        },
        
        update() {
            // Apply Gravity
            this.dy += this.gravity;
            this.y += this.dy;

// Ground Collision
            if (this.y + this.size >= canvas.height) {
                this.y = canvas.height - this.size;
                this.dy = 0;
                this.grounded = true;
                
                // Snap rotation to nearest 90 degrees when landing
                this.angle = Math.round(this.angle / 90) * 90;
            } else {
                this.grounded = false;
                // Rotate while in the air
                this.angle += 5; 
            }
        },

jump() {
            if (this.grounded) {
                this.dy = -this.jumpForce;
                this.grounded = false;
            }
        }
    };

// Obstacles Array
    const obstacles = [];

class Obstacle {
        constructor() {
            this.x = canvas.width;
            this.size = 30;
            this.y = canvas.height - this.size;
            // 0 = Block, 1 = Spike
            this.type = Math.random() > 0.5 ? 0 : 1; 
        }

draw() {
            if (this.type === 0) {
                // Draw Block
                ctx.fillStyle = '#ff3366';
                ctx.fillRect(this.x, this.y, this.size, this.size);
                ctx.strokeStyle = '#fff';
                ctx.strokeRect(this.x, this.y, this.size, this.size);
            } else {
                // Draw Spike
                ctx.fillStyle = '#ffcc00';
                ctx.beginPath();
                ctx.moveTo(this.x + this.size / 2, this.y); // Top point
                ctx.lineTo(this.x, this.y + this.size);     // Bottom left
                ctx.lineTo(this.x + this.size, this.y + this.size); // Bottom right
                ctx.closePath();
                ctx.fill();
                ctx.stroke();
            }
        }

update() {
            this.x -= gameSpeed;
            this.draw();
        }
    }

// Input Handling
    window.addEventListener('keydown', (e) => {
        if (e.code === 'Space' || e.code === 'ArrowUp') {
            if (isGameOver) resetGame();
            else player.jump();
        }
    });

window.addEventListener('mousedown', () => {
        if (isGameOver) resetGame();
        else player.jump();
    });

// Collision Detection
    function checkCollision(obs) {
        // Tighten the hitbox slightly to make the game fairer
        const hitboxPadding = 5; 
        
        if (
            player.x + hitboxPadding < obs.x + obs.size &&
            player.x + player.size - hitboxPadding > obs.x &&
            player.y + hitboxPadding < obs.y + obs.size &&
            player.y + player.size - hitboxPadding > obs.y
        ) {
            isGameOver = true;
        }
    }

// Game Loop
    function animate() {
        if (isGameOver) {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'white';
            ctx.font = '40px Courier New';
            ctx.fillText('游戏结束', canvas.width / 2 - 100, canvas.height / 2);
            ctx.font = '20px Courier New';
            ctx.fillText('点击或按空格键重新开始', canvas.width / 2 - 180, canvas.height / 2 + 40);
            return;
        }

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

// Background Grid Effect (Optional, adds GD feel)
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
        for(let i = 0; i < canvas.width; i += 40) {
            ctx.beginPath(); ctx.moveTo(i - (frames * gameSpeed % 40), 0); ctx.lineTo(i - (frames * gameSpeed % 40), canvas.height); ctx.stroke();
        }

player.update();
        player.draw();

// Handle Obstacles
        if (frames % 60 === 0) { // Spawn rate
            obstacles.push(new Obstacle());
            // Occasionally spawn a double obstacle
            if (Math.random() > 0.7) {
                setTimeout(() => obstacles.push(new Obstacle()), 200);
            }
        }

for (let i = 0; i < obstacles.length; i++) {
            obstacles[i].update();
            checkCollision(obstacles[i]);

// Remove off-screen obstacles and add score
            if (obstacles[i].x + obstacles[i].size < 0) {
                obstacles.splice(i, 1);
                score++;
                document.getElementById('scoreDisplay').innerText = `Score: ${score}`;
                
                // Increase speed gradually
                if (score % 10 === 0) gameSpeed += 0.5;
            }
        }

frames++;
        requestAnimationFrame(animate);
    }

function resetGame() {
        obstacles.length = 0;
        frames = 0;
        score = 0;
        gameSpeed = 6;
        player.y = 300;
        player.dy = 0;
        player.angle = 0;
        document.getElementById('scoreDisplay').innerText = `Score: ${score}`;
        isGameOver = false;
        animate();
    }

// Start Game
    animate();

</script>
</body>
</html>

CSS

JS

document.addEventListener('DOMContentLoaded', function () {
    introduction();
    renderChoiceForm();
});

function introduction() {
    displayMessage("Welcome to the Epic Adventure Game!");
    sleep(1000);
    displayMessage("You wake up in a mysterious forest.");
    sleep(1000);
    displayMessage("In front of you, there are three paths leading in different directions.");
    sleep(1000);
}

function renderChoiceForm() {
    var container = document.getElementById('game-container');

var form = document.createElement('form');
    form.method = 'post';

var label = document.createElement('label');
    label.htmlFor = 'path';
    label.innerText = 'Which path will you choose? Enter 1, 2, or 3:';

var input = document.createElement('input');
    input.type = 'text';
    input.name = 'path';
    input.id = 'path';
    input.required = true;

var button = document.createElement('button');
    button.type = 'submit';
    button.innerText = 'Submit';
    button.addEventListener('click', handleChoice);

form.appendChild(label);
    form.appendChild(input);
    form.appendChild(button);

container.appendChild(form);
}

function handleChoice(event) {
    event.preventDefault();
    var path = document.getElementById('path').value;

switch (path) {
        case "1":
            path1();
            break;
        case "2":
            path2();
            break;
        case "3":
            path3();
            break;
        default:
            displayMessage("Invalid choice. Please try again.");
            renderChoiceForm();
            break;
    }
}

function path1() {
    displayMessage("You've chosen path 1!");
    // Implement the logic for path 1 here...
}

function path2() {
    displayMessage("You've chosen path 2!");
    // Implement the logic for path 2 here...
}

function path3() {
    displayMessage("You've chosen path 3!");
    // Implement the logic for path 3 here...
}

function displayMessage(message) {
    var container = document.getElementById('game-container');
    var paragraph = document.createElement('p');
    paragraph.innerText = message;
    container.appendChild(paragraph);
}

function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));

Caminata de temuometría

Recomendado

Estructura HTML de la barra de progreso animada CSS

Un código de alejandrokundrah

El safari de microinteracción

HTML

CSS

JS

Recomendado

Estructura HTML de la barra de progreso animada CSS

Un código de alejandrokundrah

El safari de microinteracción

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS