Panjat Tanjakan

by SuperStar91

89 lines2.7 KB

<!DOCTYPE html>
<html>
<head>
    <title>Panjat Tanjakan</title>
    <style>
        body { margin:0; background:#87CEEB; font-family:Arial; }
        canvas { display:block; margin:0 auto; background:#87CEEB; }
        #info { text-align:center; padding:10px; font-size:18px; font-weight:bold; }
    </style>
</head>
<body>
    <div id="info">Jarak: 0 m | Bensin: 100% | Gunakan PANAH ATAS/BAWAH untuk main</div>
    <canvas id="game" width="800" height="400"></canvas>

    <script>
    const kanvas = document.getElementById('game');
    const ctx = kanvas.getContext('2d');
    const info = document.getElementById('info');

    // Objek Mobil
    const mobil = {
        x: 100, y: 250, kecepatan: 0, putar: 0, bensin: 100, jarak:0
    };

    // Medan jalan
    const jalan = [];
    for(let i=0; i<500; i++) jalan.push(Math.sin(i*0.02)*30 + Math.sin(i*0.05)*15);

    // Tombol kontrol
    const tombol = {atas:false, bawah:false};
    document.addEventListener('keydown', e=>{
        if(e.key==='ArrowUp') tombol.atas=true;
        if(e.key==='ArrowDown') tombol.bawah=true;
    });
    document.addEventListener('keyup', e=>{
        if(e.key==='ArrowUp') tombol.atas=false;
        if(e.key==='ArrowDown') tombol.bawah=false;
    });

    // Jalankan game
    function main(){
        // Fisika mobil
        if(tombol.atas && mobil.bensin>0){
            mobil.kecepatan += 0.2;
            mobil.bensin -= 0.1;
        }
        if(tombol.bawah) mobil.kecepatan -= 0.1;
        mobil.kecepatan *= 0.98;
        mobil.putar += mobil.kecepatan * 0.03;
        mobil.jarak += Math.abs(mobil.kecepatan)*0.5;

        // Gambar ulang layar
        ctx.clearRect(0,0,kanvas.width,kanvas.height);
        
        // Gambar jalan
        ctx.beginPath();
        for(let i=0; i<kanvas.width+50; i++){
            let pos = i + mobil.jarak;
            ctx.lineTo(i, 300 + jalan[Math.floor(pos)%jalan.length]);
        }
        ctx.lineTo(kanvas.width, 400);
        ctx.lineTo(0,400);
        ctx.fillStyle='#8B4513';
        ctx.fill();

        // Gambar mobil
        ctx.save();
        ctx.translate(mobil.x, mobil.y + jalan[Math.floor(mobil.jarak)%jalan.length] - 20);
        ctx.rotate(mobil.putar);
        ctx.fillStyle='red';
        ctx.fillRect(-20,-10,40,20);
        ctx.beginPath();
        ctx.arc(-15,10,8,0,Math.PI*2);
        ctx.arc(15,10,8,0,Math.PI*2);
        ctx.fillStyle='black';
        ctx.fill();
        ctx.restore();

        // Update info
        info.innerText = `Jarak: ${Math.floor(mobil.jarak)} m | Bensin: ${Math.floor(mobil.bensin)}% | PANAH ATAS = Gas, PANAH BAWAH = Rem`;
        
        if(mobil.bensin<=0) info.innerText += " | GAME OVER! Muat ulang halaman untuk ulang";
        requestAnimationFrame(main);
    }
    main();
    </script>
</body>
</html>

Game Source: Panjat Tanjakan

Creator: SuperStar91

Libraries: none

Complexity: moderate (89 lines, 2.7 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: panjat-tanjakan-superstar91" to link back to the original. Then publish at arcadelab.ai/publish.