Marche thermique

265 chanclacreates

Ouvrir dans l'éditeur Publiez votre code

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