Webleb - Extraits de Code - Jeu de balançoire Ragdoll : Distance infinie, Biomes

HTML CSS JS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布娃娃奥德赛：无限</title>
    <style>
        body { margin: 0; overflow: hidden; background: #020617; font-family: 'Segoe UI', sans-serif; color: white; }
        canvas { display: block; cursor: crosshair; }
        .hud { position: absolute; top: 20px; width: 100%; display: flex; justify-content: space-around; pointer-events: none; font-size: 24px; font-weight: 900; text-shadow: 2px 2px 5px #000; z-index: 10; }
        #menu { position: absolute; inset: 0; background: rgba(0,0,0,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; text-align: center; }
        .btn { background: #38bdf8; color: #020617; border: none; padding: 12px 35px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 1.2rem; transition: 0.2s; margin-top: 10px; }
        .btn:hover { background: white; transform: scale(1.05); }
        .skin-btn { width: 35px; height: 35px; border-radius: 50%; border: 3px solid white; display: inline-block; cursor: pointer; margin: 5px; transition: 0.2s; }
        #username-input { padding: 12px; border-radius: 5px; border: 2px solid #38bdf8; background: #0f172a; color: white; font-size: 1rem; width: 250px; text-align: center; margin-bottom: 15px; outline: none; }
        .leaderboard-box { margin-top: 20px; background: rgba(255,255,255,0.1); padding: 15px; border-radius: 10px; width: 280px; }
        .leaderboard-title { color: #fbbf24; font-size: 1.2rem; margin-bottom: 10px; border-bottom: 1px solid #444; padding-bottom: 5px; }
        .score-entry { display: flex; justify-content: space-between; font-size: 0.9rem; margin: 4px 0; color: #cbd5e1; }
        #dev-tag { color: #10b981; font-size: 0.8rem; margin-top: 5px; display: none; font-weight: bold; }
    </style>
</head>
<body>
    <div id="menu">
        <h1 style="color: #38bdf8; letter-spacing: 3px; font-size: 2.5rem; margin: 10px;">精准摆荡</h1>
        <input type="text" id="username-input" placeholder="输入您的名称..." maxlength="12">
        <div id="dev-tag">开发者模式已激活（无敌状态）</div>
        <div id="skins" style="margin-bottom: 10px; margin-top: 10px;">
            <div class="skin-btn" style="background:#38bdf8" onclick="setSkin('#38bdf8')"></div>
            <div class="skin-btn" style="background:#f43f5e" onclick="setSkin('#f43f5e')"></div>
            <div class="skin-btn" style="background:#10b981" onclick="setSkin('#10b981')"></div>
            <div class="skin-btn" style="background:#f59e0b" onclick="setSkin('#f59e0b')"></div>
        </div>
        <button class="btn" onclick="startGame()">开启旅程</button>
        <div class="leaderboard-box">
            <div class="leaderboard-title">排行榜</div>
            <div id="leaderboard-list">
                <div style="font-size: 0.8rem; color: #64748b;">输入名称查看分数</div>
            </div>
        </div>
    </div>

const GRAVITY = 0.45, FRICTION = 0.995, MAX_VEL = 30, WINCH_SPEED = 3.0, SWING_FORCE = 0.7, MIN_ROPE_LEN = 25;

const BIOMES = [
    { threshold: 0, name: '森林', bg: '#064e3b', floor: '#14532d', accent: '#10b981' },
    { threshold: 800, name: '平原', bg: '#1e3a1e', floor: '#3f6212', accent: '#a3e635' },
    { threshold: 2000, name: '平原', bg: '#451a03', floor: '#b45309', accent: '#f59e0b' },
    { threshold: 3500, name: '群山', bg: '#0f172a', floor: '#334155', accent: '#94a3b8' },
    { threshold: 5500, name: '沼泽', bg: '#022c22', floor: '#064e3b', accent: '#4ade80' },
    { threshold: 7500, name: '海洋', bg: '#0c4a6e', floor: '#fde047', accent: '#38bdf8' },
    { threshold: 10000, name: '苔原', bg: '#075985', floor: '#cbd5e1', accent: '#e2e8f0' },
    { threshold: 12500, name: '空白', bg: '#020617', floor: 'transparent', accent: '#c084fc' }
];

function setSkin(color) { selectedSkin = color; }
const nameInput = document.getElementById('username-input');

nameInput.addEventListener('input', () => {
    const name = nameInput.value.trim();
    isDev = (name === "Ching Chong");
    document.getElementById('dev-tag').style.display = isDev ? "block" : "none";
    updateLeaderboardDisplay(name);
});

function saveScore(name, score) {
    if (!name || score <= 0) return;
    let scores = JSON.parse(localStorage.getItem('scores_' + name)) || [];
    scores.push(score); scores.sort((a, b) => b - a);
    localStorage.setItem('scores_' + name, JSON.stringify(scores.slice(0, 5)));
}

function startGame() {
    const name = nameInput.value.trim();
    if (!name) { alert("Please enter a username!"); return; }
    currentPlayer = name; 
    isDev = (name === "Ching Chong");
    gameState = 'playing';
    document.getElementById('menu').style.display = 'none';
    resetGame(); 
    requestAnimationFrame(loop);
}

class Point {
    constructor(x, y, r, c) { this.x=x; this.y=y; this.oldX=x; this.oldY=y; this.r=r; this.c=c; }
    update() {
        let vx = (this.x - this.oldX) * FRICTION, vy = (this.y - this.oldY) * FRICTION;
        this.oldX = this.x; this.oldY = this.y;
        this.x += vx; this.y += vy + GRAVITY;
    }
}

class Constraint {
    constructor(p1, p2, len) { this.p1=p1; this.p2=p2; this.len=len || Math.hypot(p1.x-p2.x, p1.y-p2.y); }
    resolve() {
        let dx = this.p2.x - this.p1.x, dy = this.p2.y - this.p1.y, dist = Math.hypot(dx, dy);
        let diff = (this.len - dist) / (dist || 1) * 0.5;
        this.p1.x -= dx * diff; this.p1.y -= dy * diff;
        this.p2.x += dx * diff; this.p2.y += dy * diff;
    }
}

class Particle {
    constructor(x, y, color) {
        this.x = x; this.y = y; this.vx = (Math.random() - 0.5) * 15; this.vy = (Math.random() - 0.5) * 15;
        this.life = 1.0; this.color = color; this.size = Math.random() * 8 + 4;
    }
    update() { this.x += this.vx; this.y += this.vy; this.vy += 0.2; this.life -= 0.02; }
    draw() { ctx.globalAlpha = this.life; ctx.fillStyle = this.color; ctx.fillRect(this.x - cameraX, this.y, this.size, this.size); ctx.globalAlpha = 1; }
}

function handleDeath() {
    let score = Math.floor(player.b.x / 10);
    saveScore(currentPlayer, score); 
    gameState = 'menu';
    document.getElementById('menu').style.display = 'flex'; 
    updateLeaderboardDisplay(currentPlayer);
}

function loop() {
    if(gameState !== 'playing') return;
    let score = Math.floor(player.b.x / 10);
    document.getElementById('score').innerText = `${score}m - ${BIOMES[currentBiomeIndex].name}`;

let newIndex = BIOMES.findIndex((b, i) => score >= b.threshold && (!BIOMES[i+1] || score < BIOMES[i+1].threshold));
    if(newIndex > currentBiomeIndex) {
        currentBiomeIndex = newIndex;
        for(let i=0; i<30; i++) particles.push(new Particle(player.b.x, player.b.y, BIOMES[newIndex].accent));
    }
    
    const curBiome = BIOMES[currentBiomeIndex];
    ctx.fillStyle = curBiome.bg; ctx.fillRect(0, 0, width, height);
    cameraX += (player.b.x - cameraX - width/4) * 0.08;
    
    if (curBiome.floor !== 'transparent') {
        ctx.fillStyle = curBiome.floor; ctx.fillRect(0, height - 50, width, 50);
    }

stars.forEach(s => { ctx.fillStyle = "white"; ctx.beginPath(); ctx.arc(s.x, s.y, s.s, 0, Math.PI*2); ctx.fill(); });
    trees.forEach(t => { if(t.x > cameraX - 200 && t.x < cameraX + width + 200) drawSprite(t, t.x - cameraX, height - 50); });
    anchors.forEach(a => {
        ctx.fillStyle = curBiome.accent; ctx.beginPath(); ctx.arc(a.x - cameraX, a.y, 8, 0, Math.PI*2); ctx.fill();
        ctx.strokeStyle = "white"; ctx.stroke();
    });

if (grapple) {
        ctx.strokeStyle = "white"; ctx.lineWidth = 2;
        ctx.beginPath(); ctx.moveTo(player.rh.x - cameraX, player.rh.y); ctx.lineTo(grapple.anchor.x - cameraX, grapple.anchor.y); ctx.stroke();
        if (grapple.len > MIN_ROPE_LEN) grapple.len -= WINCH_SPEED;
        let dx = player.rh.x - grapple.anchor.x, dy = player.rh.y - grapple.anchor.y, dist = Math.hypot(dx, dy);
        if (dist > grapple.len) {
            let diff = (grapple.len - dist) / dist;
            player.rh.x += dx * diff; player.rh.y += dy * diff;
            player.b.x += SWING_FORCE; 
        }
    }

for(let i=0; i<10; i++) constraints.forEach(c => c.resolve());
    points.forEach(p => { 
        p.update(); ctx.fillStyle = p.c; ctx.beginPath(); ctx.arc(p.x - cameraX, p.y, p.r, 0, Math.PI*2); ctx.fill();
        if (p.y > height - 50) handleDeath();
    });

enemies.forEach(e => {
        ctx.save(); ctx.translate(e.x - cameraX, e.y);
        const time = Date.now() * 0.005 + e.seed;
        let effectiveY = e.y;

if (e.type === '森林') {
            ctx.rotate(Math.sin(time * 0.8) * 0.6); ctx.fillStyle = '#22c55e';
            ctx.beginPath(); ctx.moveTo(0, -15); ctx.quadraticCurveTo(15, 0, 0, 15); ctx.quadraticCurveTo(-15, 0, 0, -15); ctx.fill();
            e.y += Math.sin(time) * 0.5;
        } else if (e.type === '平原') {
            ctx.strokeStyle = 'white'; ctx.lineWidth = 2; ctx.beginPath();
            ctx.moveTo(-15, Math.sin(time * 3) * 10); ctx.lineTo(0, 0); ctx.lineTo(15, Math.sin(time * 3) * 10); ctx.stroke();
            e.y += Math.sin(time);
        } else if (e.type === '平原') {
            ctx.rotate(time * 3); ctx.strokeStyle = '#d97706'; ctx.lineWidth = 2;
            for(let i=0; i<8; i++) { ctx.rotate(Math.PI/4); ctx.beginPath(); ctx.ellipse(0, 0, 15, 8, 0, 0, Math.PI*2); ctx.stroke(); }
            e.x -= 3;
        } else if (e.type === '群山') {
            ctx.rotate(time * 0.5); ctx.fillStyle = '#64748b'; ctx.beginPath();
            ctx.moveTo(-15, -10); ctx.lineTo(15, -15); ctx.lineTo(20, 10); ctx.lineTo(-10, 15); ctx.closePath(); ctx.fill();
        } else if (e.type === '沼泽') {
            // Firefly
            ctx.shadowBlur = 15; ctx.shadowColor = "#fde047"; ctx.fillStyle = "#fde047";
            ctx.beginPath(); ctx.arc(0, 0, 6, 0, Math.PI*2); ctx.fill();
            ctx.shadowBlur = 0;
            e.y += Math.sin(time * 2) * 2; e.x += Math.cos(time) * 1.5;
        } else if (e.type === '海洋') {
            const jump = Math.sin(time) * 200; effectiveY = e.y + jump;
            ctx.translate(0, jump); ctx.fillStyle = '#38bdf8';
            ctx.beginPath(); ctx.ellipse(0, 0, 25, 12, 0, 0, Math.PI*2); ctx.fill();
        } else if (e.type === '苔原') {
            ctx.strokeStyle = 'white'; ctx.lineWidth = 1;
            for(let i=0; i<6; i++) { ctx.rotate(Math.PI/3); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(0,15); ctx.stroke(); }
            e.y += 2; ctx.rotate(time);
        } else if (e.type === '空白') {
            ctx.rotate(time); ctx.fillStyle = '#c084fc';
            for(let i=0; i<5; i++) { ctx.rotate((Math.PI * 2) / 5); ctx.beginPath(); ctx.moveTo(0, -20 - Math.sin(time*2)*5); ctx.lineTo(5, 0); ctx.lineTo(-5, 0); ctx.fill(); }
        }
        ctx.restore();
        
        if(!isDev && Math.hypot(player.b.x - e.x, player.b.y - effectiveY) < 35) handleDeath();
    });

particles.forEach((p, i) => { p.update(); p.draw(); if(p.life <= 0) particles.splice(i, 1); });
    if (anchors[anchors.length-1].x < cameraX + width + 500) spawnWorld(anchors[anchors.length-1].x);
    requestAnimationFrame(loop);
}
</script>
</body>
</html>

Preview

Open Advanced Editor

HTML CSS JS

const GRAVITY = 0.45, FRICTION = 0.995, MAX_VEL = 30, WINCH_SPEED = 3.0, SWING_FORCE = 0.7, MIN_ROPE_LEN = 25;

function setSkin(color) { selectedSkin = color; }
const nameInput = document.getElementById('username-input');

enemies.forEach(e => {
        ctx.save(); ctx.translate(e.x - cameraX, e.y);
        const time = Date.now() * 0.005 + e.seed;
        let effectiveY = e.y;

Preview

Validating your code, please wait...