HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1920x1080

22 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Air War 2D</title>

<style>
body{
    margin:0;
    overflow:hidden;
    background:black;
    font-family:monospace;
    color:#00ff66;
}

canvas{
    display:block;
    background:#000;
}

#ui{
    position:absolute;
    top:10px;
    left:10px;
    background:rgba(0,0,0,.7);
    border:1px solid #00ff66;
    padding:10px;
    z-index:10;
}
</style>
</head>

<body>

<div id="ui">

✈️ AIR WAR TERMINAL<br><br>

❤️ HP: <span id="hp">100</span><br>
🔫 Ammo: <span id="ammo">999</span><br>
🏆 Kill: <span id="kill">0</span><br><br>

🎮 CONTROL<br>
W = ATAS<br>
S = BAWAH<br>
A = KIRI<br>
D = KANAN<br>
SPACE = TEMBAK

</div>

<canvas id="game"></canvas>

<script>

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

canvas.width = innerWidth;
canvas.height = innerHeight;

let keys = {};

document.addEventListener("keydown", e=>{

    keys[e.key.toLowerCase()] = true;

    if(e.code === "Space"){
        shoot();
    }
});

document.addEventListener("keyup", e=>{

    keys[e.key.toLowerCase()] = false;
});

let player = {

    x:100,
    y:300,
    speed:5,
    hp:100,
    ammo:999
};

let bullets = [];
let enemies = [];
let kills = 0;

function updateUI(){

    document.getElementById("hp").innerText = player.hp;
    document.getElementById("ammo").innerText = player.ammo;
    document.getElementById("kill").innerText = kills;
}

function shoot(){

    bullets.push({

        x:player.x + 35,
        y:player.y,
        speed:10
    });

    player.ammo--;

    updateUI();
}

function spawnEnemy(){

    enemies.push({

        x:canvas.width + 100,
        y:Math.random() * canvas.height,
        speed:2 + Math.random()*2
    });
}

setInterval(spawnEnemy, 1200);

function movePlayer(){

    if(keys["w"]) player.y -= player.speed;
    if(keys["s"]) player.y += player.speed;
    if(keys["a"]) player.x -= player.speed;
    if(keys["d"]) player.x += player.speed;

    if(player.x < 0) player.x = 0;
    if(player.y < 0) player.y = 0;

    if(player.x > canvas.width)
        player.x = canvas.width;

    if(player.y > canvas.height)
        player.y = canvas.height;
}

function drawPlayer(){

    ctx.fillStyle = "#00ffff";

    // badan pesawat
    ctx.beginPath();
    ctx.moveTo(player.x + 35, player.y);
    ctx.lineTo(player.x - 20, player.y - 12);
    ctx.lineTo(player.x - 10, player.y);
    ctx.lineTo(player.x - 20, player.y + 12);
    ctx.closePath();
    ctx.fill();

    // sayap atas
    ctx.beginPath();
    ctx.moveTo(player.x - 5, player.y - 5);
    ctx.lineTo(player.x - 25, player.y - 20);
    ctx.lineTo(player.x - 5, player.y - 10);
    ctx.closePath();
    ctx.fill();

    // sayap bawah
    ctx.beginPath();
    ctx.moveTo(player.x - 5, player.y + 5);
    ctx.lineTo(player.x - 25, player.y + 20);
    ctx.lineTo(player.x - 5, player.y + 10);
    ctx.closePath();
    ctx.fill();

    // ekor
    ctx.beginPath();
    ctx.moveTo(player.x - 18, player.y - 5);
    ctx.lineTo(player.x - 30, player.y - 18);
    ctx.lineTo(player.x - 20, player.y - 5);
    ctx.closePath();
    ctx.fill();
}

function drawBullets(){

    ctx.fillStyle = "yellow";

    bullets.forEach((b,bi)=>{

        b.x += b.speed;

        ctx.fillRect(b.x,b.y,12,3);

        if(b.x > canvas.width){

            bullets.splice(bi,1);
        }
    });
}

function drawEnemies(){

    ctx.fillStyle = "red";

    enemies.forEach((e,ei)=>{

        e.x -= e.speed;

        // badan pesawat enemy
        ctx.beginPath();

        ctx.moveTo(e.x - 35, e.y);
        ctx.lineTo(e.x + 20, e.y - 12);
        ctx.lineTo(e.x + 10, e.y);
        ctx.lineTo(e.x + 20, e.y + 12);

        ctx.closePath();

        ctx.fill();

        // sayap atas
        ctx.beginPath();
        ctx.moveTo(e.x + 5, e.y - 5);
        ctx.lineTo(e.x + 25, e.y - 20);
        ctx.lineTo(e.x + 5, e.y - 10);
        ctx.closePath();
        ctx.fill();

        // sayap bawah
        ctx.beginPath();
        ctx.moveTo(e.x + 5, e.y + 5);
        ctx.lineTo(e.x + 25, e.y + 20);
        ctx.lineTo(e.x + 5, e.y + 10);
        ctx.closePath();
        ctx.fill();

        // tabrak player
        let dist = Math.hypot(player.x - e.x, player.y - e.y);

        if(dist < 30){

            player.hp -= 20;

            enemies.splice(ei,1);

            updateUI();

            if(player.hp <= 0){

                alert("💀 GAME OVER");

                location.reload();
            }
        }

        // kena bullet
        bullets.forEach((b,bi)=>{

            let d = Math.hypot(b.x - e.x, b.y - e.y);

            if(d < 25){

                enemies.splice(ei,1);
                bullets.splice(bi,1);

                kills++;

                updateUI();
            }
        });
    });
}

function drawStars(){

    for(let i=0;i<80;i++){

        ctx.fillStyle = "white";

        ctx.fillRect(
            Math.random()*canvas.width,
            Math.random()*canvas.height,
            1,
            1
        );
    }
}

function gameLoop(){

    ctx.clearRect(0,0,canvas.width,canvas.height);

    drawStars();

    movePlayer();

    drawPlayer();

    drawBullets();

    drawEnemies();

    requestAnimationFrame(gameLoop);
}

updateUI();

gameLoop();

</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

6KB

Transfer Size

6KB

Content Size

185.0ms

Dom Content Loaded

196.0ms

First Paint

185.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests