HTML ad tag preview - Powered by Ad Reform

Live Preview

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

1920x1080

12.5 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="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survivor Arena</title>

<style>
body {
    margin: 0;
    overflow: hidden;
    background: #0b0b12;
    color: white;
    font-family: sans-serif;
}

canvas {
    display: block;
}

#ui {
    position: absolute;
    top: 10px;
    width: 100%;
    display: flex;
    justify-content: space-around;
    font-size: 16px;
}

#levelUp {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

button {
    margin: 10px;
    padding: 12px;
    font-size: 16px;
}
</style>
</head>

<body>

<div id="ui">
    <div>HP: <span id="hp">100</span></div>
    <div>XP: <span id="xp">0</span></div>
    <div>Level: <span id="lvl">1</span></div>
</div>

<div id="levelUp">
    <h2>Choose Upgrade</h2>
    <button onclick="upgrade('speed')">Speed</button>
    <button onclick="upgrade('fireRate')">Fire Rate</button>
    <button onclick="upgrade('damage')">Damage</button>
</div>

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

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

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

let player = {
    x: canvas.width/2,
    y: canvas.height/2,
    r: 15,
    speed: 4,
    hp: 100,
    fireRate: 500,
    damage: 1
};

let bullets = [];
let enemies = [];
let particles = [];

let xp = 0;
let level = 1;
let gameRunning = true;

let lastShot = 0;

class Enemy {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.r = 10 + Math.random()*10;
        this.speed = 1 + Math.random()*1.5;
        this.hp = 2;
    }

    update() {
        let dx = player.x - this.x;
        let dy = player.y - this.y;
        let dist = Math.hypot(dx, dy);
        this.x += dx/dist * this.speed;
        this.y += dy/dist * this.speed;
    }

    draw() {
        ctx.fillStyle = "red";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
        ctx.fill();
    }
}

class Bullet {
    constructor(x,y,angle) {
        this.x = x;
        this.y = y;
        this.dx = Math.cos(angle)*6;
        this.dy = Math.sin(angle)*6;
        this.r = 5;
    }

    update() {
        this.x += this.dx;
        this.y += this.dy;
    }

    draw() {
        ctx.fillStyle = "yellow";
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
        ctx.fill();
    }
}

function spawnEnemies() {
    if (!gameRunning) return;
    enemies.push(new Enemy());
    setTimeout(spawnEnemies, 800);
}
spawnEnemies();

let touch = {x: player.x, y: player.y};

canvas.addEventListener("touchmove", e => {
    touch.x = e.touches[0].clientX;
    touch.y = e.touches[0].clientY;
});

canvas.addEventListener("mousemove", e => {
    touch.x = e.clientX;
    touch.y = e.clientY;
});

function shoot() {
    let now = Date.now();
    if (now - lastShot > player.fireRate) {
        let angle = Math.atan2(touch.y - player.y, touch.x - player.x);
        bullets.push(new Bullet(player.x, player.y, angle));
        lastShot = now;
    }
}

function update() {
    if (!gameRunning) return;

    // movement
    let dx = touch.x - player.x;
    let dy = touch.y - player.y;
    player.x += dx * 0.1;
    player.y += dy * 0.1;

    shoot();

    bullets.forEach(b => b.update());

    enemies.forEach(e => {
        e.update();

        let dist = Math.hypot(player.x - e.x, player.y - e.y);
        if (dist < player.r + e.r) {
            player.hp -= 1;
            document.getElementById("hp").innerText = player.hp;
            if (player.hp <= 0) gameRunning = false;
        }
    });

    bullets.forEach((b, bi) => {
        enemies.forEach((e, ei) => {
            let dist = Math.hypot(b.x - e.x, b.y - e.y);
            if (dist < b.r + e.r) {
                e.hp -= player.damage;
                bullets.splice(bi,1);

                if (e.hp <= 0) {
                    enemies.splice(ei,1);
                    xp += 10;
                    document.getElementById("xp").innerText = xp;

                    if (xp >= level * 50) {
                        level++;
                        document.getElementById("lvl").innerText = level;
                        gameRunning = false;
                        document.getElementById("levelUp").style.display = "flex";
                    }
                }
            }
        });
    });
}

function draw() {
    ctx.fillStyle = "rgba(0,0,20,0.4)";
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // player
    ctx.fillStyle = "#00f0ff";
    ctx.beginPath();
    ctx.arc(player.x, player.y, player.r, 0, Math.PI*2);
    ctx.fill();

    bullets.forEach(b => b.draw());
    enemies.forEach(e => e.draw());
}

function loop() {
    update();
    draw();
    requestAnimationFrame(loop);
}
loop();

function upgrade(type) {
    if (type === "speed") player.speed += 1;
    if (type === "fireRate") player.fireRate -= 50;
    if (type === "damage") player.damage += 1;

    document.getElementById("levelUp").style.display = "none";
    gameRunning = true;
}

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

109.0ms

Dom Content Loaded

128.0ms

First Paint

109.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