Web PHP Trial

PHP Code Editor

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Dino Chrome HD Fix</title>
    <style>
        body { margin: 0; background: #f7f7f7; font-family: Arial, sans-serif; overflow: hidden; touch-action: none; }
        #game-container { position: relative; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; }
        canvas { background: #fff; border-bottom: 2px solid #535353; width: 100%; max-width: 600px; }
        .modal { position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,0.9); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; }
        .btn { padding: 18px 45px; font-size: 22px; background: #535353; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; -webkit-tap-highlight-color: transparent; }
        #score { position: absolute; top: 20px; right: 20px; font-size: 24px; color: #535353; font-weight: bold; font-family: monospace; }
        .hidden { display: none !important; }
    </style>
</head>
<body>

<div id="game-container">
    <div id="score">00000</div>
    <canvas id="dinoCanvas"></canvas>
    <div id="gameModal" class="modal">
        <h1 style="color:#535353; margin-bottom: 10px;">DINO RUN</h1>
        <p id="statusTxt" style="color:#888;">Tap Tombol untuk Mulai</p>
        <button class="btn" id="mainBtn">START GAME</button>
    </div>
</div>

canvas.width = 600;
canvas.height = 200;

let isPlaying = false;
let score = 0;
let speed = 6;
let obstacles = [];
let animId;

function spawnObstacle() {
    if (!isPlaying) return;
    obstacles.push({ x: canvas.width, y: 155, w: 20, h: 35 });
    let next = Math.random() * (2000 - 900) + 900;
    setTimeout(spawnObstacle, next);
}

function loop() {
    if (!isPlaying) return;
    ctx.clearRect(0, 0, canvas.width, canvas.height);

// Garis Tanah
    ctx.strokeStyle = "#535353";
    ctx.beginPath(); ctx.moveTo(0, 190); ctx.lineTo(canvas.width, 190); ctx.stroke();

// Dino Physics
    dino.dy += dino.gravity;
    dino.y += dino.dy;
    if (dino.y > 145) { dino.y = 145; dino.dy = 0; dino.grounded = true; }
    dino.draw();

// Obstacles
    for (let i = obstacles.length - 1; i >= 0; i--) {
        let o = obstacles[i];
        o.x -= speed;
        
        // Draw Cactus
        ctx.fillStyle = "#535353";
        ctx.fillRect(o.x, o.y, o.w, o.h);
        ctx.fillRect(o.x - 5, o.y + 10, 5, 15); // Left arm
        ctx.fillRect(o.x + 20, o.y + 5, 5, 15); // Right arm

// Collision Logic
        if (dino.x < o.x + o.w && dino.x + dino.w > o.x && dino.y + dino.h > o.y) {
            gameOver();
        }
        if (o.x + o.w < 0) obstacles.splice(i, 1);
    }

score++;
    scoreEl.innerText = Math.floor(score/10).toString().padStart(5, '0');
    if (score % 1000 === 0) speed += 0.5;

animId = requestAnimationFrame(loop);
}

function startGame() {
    // Reset State
    isPlaying = true;
    score = 0;
    speed = 6;
    obstacles = [];
    dino.y = 145;
    dino.dy = 0;
    
    // UI Update
    modal.classList.add('hidden');
    
    // Start Logic
    spawnObstacle();
    loop();
}

function gameOver() {
    isPlaying = false;
    cancelAnimationFrame(animId);
    statusTxt.innerText = "SKOR AKHIR: " + Math.floor(score/10);
    mainBtn.innerText = "RESTART";
    modal.classList.remove('hidden');
}

// Handler Khusus Mobile & Desktop
mainBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    startGame();
});

window.addEventListener('touchstart', (e) => {
    if (isPlaying) {
        dino.jump();
        e.preventDefault();
    }
}, { passive: false });

window.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
        if (!isPlaying) startGame();
        else dino.jump();
    }
});
</script>
</body>
</html>