Jogo de Balanço de Boneca de Pano: Distância Infinita, Biomas

43 chanclacreates

Abrir no Editor Video Publique Seu Código

Jogo de Balanço de Boneca de Pano: Distância Infinita, Biomas

Recomendado

12 December 2025

Exemplo de código CSS para interruptor de alternância suave

18 February 2025

CodePen Home Dia dos Namorados

23 March 2025

Portfólio de dinheiro

HTML

<!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>

Recomendado

Exemplo de código CSS para interruptor de alternância suave

CodePen Home Dia dos Namorados

Portfólio de dinheiro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS