HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
18.3 KB
Share this result

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

Open in browser
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Upgraded Mario Mobile</title>
<style>
    body { margin:0; overflow:hidden; background:#87CEEB; }
    canvas { display:block; background:#87CEEB; }
    #controls {
        position: fixed;
        bottom: 10px;
        width: 100%;
        display: flex;
        justify-content: space-around;
        z-index: 10;
        pointer-events: all;
    }
    .btn {
        width: 90px;
        height: 90px;
        background: rgba(0,0,0,0.35);
        border-radius: 50%;
        display: flex;
        align-items:center;
        justify-content:center;
        color:white;
        font-size: 28px;
        user-select:none;
    }
</style>
</head>
<body>

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

<div id="controls">
    <div class="btn" id="btnLeft">⟵</div>
    <div class="btn" id="btnJump">⬆</div>
    <div class="btn" id="btnRight">⟶</div>
</div>

<script>
// -----------------------------------------
// Setup
// -----------------------------------------
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// -----------------------------------------
// Player
// -----------------------------------------
let player = {
    x: 100,
    y: 0,
    w: 40,
    h: 50,
    vx: 0,
    vy: 0,
    speed: 0.4,
    maxSpeed: 4,
    friction: 0.85,
    jumpPower: -12,
    onGround: false,
    spriteFrame: 0
};

const gravity = 0.5;

// -----------------------------------------
// Game objects
// -----------------------------------------
let platforms = [
    {x:0, y:canvas.height-40, w:3000, h:40},
    {x:200, y:canvas.height-140, w:160, h:20},
    {x:450, y:canvas.height-200, w:160, h:20},
    {x:800, y:canvas.height-160, w:160, h:20},
    {x:1200, y:canvas.height-210, w:160, h:20},
];

let coins = [
    {x:230, y:canvas.height-180, taken:false},
    {x:500, y:canvas.height-240, taken:false},
    {x:850, y:canvas.height-200, taken:false},
    {x:1230, y:canvas.height-250, taken:false},
];

let enemies = [
    {x:600, y:canvas.height-80, w:40, h:40, dir:1},
    {x:1000, y:canvas.height-80, w:40, h:40, dir:-1}
];

let cameraX = 0;
let score = 0;

// -----------------------------------------
// Controls
// -----------------------------------------
let left = false, right = false, jump = false;

function bindButton(id, handler) {
    const b = document.getElementById(id);
    b.addEventListener("touchstart", e => { e.preventDefault(); handler(true); });
    b.addEventListener("touchend",   e => { e.preventDefault(); handler(false); });
}

bindButton("btnLeft", v => left = v);
bindButton("btnRight", v => right = v);
bindButton("btnJump", v => jump = v);

// -----------------------------------------
// Main Loop
// -----------------------------------------
function loop() {
    requestAnimationFrame(loop);

    // Horizontal movement
    if (left)  player.vx -= player.speed;
    if (right) player.vx += player.speed;

    // Limit speed
    player.vx *= player.friction;
    if (player.vx > player.maxSpeed) player.vx = player.maxSpeed;
    if (player.vx < -player.maxSpeed) player.vx = -player.maxSpeed;

    // Jump
    if (jump && player.onGround) {
        player.vy = player.jumpPower;
        player.onGround = false;
    }

    // Gravity
    player.vy += gravity;

    // Apply velocity
    player.x += player.vx;
    player.y += player.vy;

    // Reset ground
    player.onGround = false;

    // Platform collision
    for (let p of platforms) {
        if (player.x < p.x + p.w &&
            player.x + player.w > p.x &&
            player.y < p.y + p.h &&
            player.y + player.h > p.y) {

            if (player.vy > 0 && player.y + player.h - p.y < 20) {
                player.y = p.y - player.h;
                player.vy = 0;
                player.onGround = true;
            }
        }
    }

    // Enemy movement
    for (let e of enemies) {
        e.x += e.dir * 1.5;
        // Simple AI: bounce
        if (Math.random() < 0.005) e.dir *= -1;

        // Player touched enemy = death
        if (player.x < e.x + e.w &&
            player.x + player.w > e.x &&
            player.y < e.y + e.h &&
            player.y + player.h > e.y) {

            respawn();
        }
    }

    // Coin collection
    for (let c of coins) {
        if (!c.taken &&
            player.x < c.x + 20 &&
            player.x + player.w > c.x &&
            player.y < c.y + 20 &&
            player.y + player.h > c.y) {
            c.taken = true;
            score++;
        }
    }

    // Respawn if falling
    if (player.y > canvas.height + 200) {
        respawn();
    }

    // Camera follows player
    cameraX = player.x - canvas.width/2;

    // -------------------------------------
    // Drawing
    // -------------------------------------
    ctx.clearRect(0,0,canvas.width,canvas.height);

    // Background (simple parallax)
    ctx.fillStyle = "#70B8FF";
    ctx.fillRect(0,0,canvas.width,canvas.height);

    // Platforms
    ctx.fillStyle = "#008000";
    for (let p of platforms) {
        ctx.fillRect(p.x - cameraX, p.y, p.w, p.h);
    }

    // Coins
    ctx.fillStyle = "gold";
    for (let c of coins) {
        if (!c.taken)
            ctx.beginPath(), ctx.arc(c.x - cameraX + 10, c.y + 10, 10, 0, Math.PI*2), ctx.fill();
    }

    // Enemies
    ctx.fillStyle = "brown";
    for (let e of enemies) {
        ctx.fillRect(e.x - cameraX, e.y, e.w, e.h);
    }

    // Player (simple animation)
    ctx.fillStyle = "#0000FF";
    ctx.fillRect(player.x - cameraX, player.y, player.w, player.h);

    // Score
    ctx.fillStyle = "white";
    ctx.font = "32px Arial";
    ctx.fillText("Coins: " + score, 20, 40);
}

// -----------------------------------------
// Respawn function
// -----------------------------------------
function respawn() {
    player.x = 100;
    player.y = 0;
    player.vx = 0;
    player.vy = 0;
}

// Start game
loop();
</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
112.0ms
Dom Content Loaded
120.0ms
First Paint
112.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