Caminata de temuometría

198 chanclacreates

Abrir en el editor Publica tu código

Recomendado

18 November 2025

Un código del texto

30 August 2024

Efecto de desplazamiento de tarjeta 3D

10 March 2025

Un código de Shab._0

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>
        /* 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

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));