HTML ad tag preview - Powered by Ad Reform

Live Preview

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

300x150

5.87 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>Jungle Tycoon 2D-3D</title>
    <style>
        body { margin: 0; background: #228B22; overflow: hidden; font-family: sans-serif; touch-action: none; }
        #ui { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.8); padding: 10px; border-radius: 8px; z-index: 10; border: 2px solid #f1c40f; }
        #controls { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-around; z-index: 10; }
        .btn { width: 60px; height: 60px; background: rgba(0,0,0,0.6); border: 2px solid #fff; border-radius: 50%; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; }
        .action-bar { position: absolute; right: 10px; top: 100px; display: flex; flex-direction: column; gap: 10px; }
        .act-btn { padding: 10px; background: #f1c40f; border: none; border-radius: 5px; font-weight: bold; }
        canvas { display: block; background: #87CEEB; }
    </style>
</head>
<body>

<div id="ui">
    <b>CASH: $<span id="money">50000</span></b><br>
    <b>LVL: <span id="level">1</span></b><br>
    <small>MAP: JUNGLE & 5-ROADS</small>
</div>

<div class="action-bar">
    <button class="act-btn" onclick="buyCar()">BUY CAR 🚗</button>
    <button class="act-btn" style="background:#fff" onclick="buildHouse()">BUILD HOUSE 🏠</button>
</div>

<div id="controls">
    <div style="display:flex; flex-direction:column; gap:5px">
        <div class="btn" id="up">W</div>
        <div style="display:flex; gap:5px">
            <div class="btn" id="left">A</div>
            <div class="btn" id="down">S</div>
            <div class="btn" id="right">D</div>
        </div>
    </div>
</div>

<canvas id="g"></canvas>

<script>
    const canvas = document.getElementById('g');
    const ctx = canvas.getContext('2d');
    let w, h, playerX = 0, playerY = 0;
    let money = 50000, level = 1;
    let trees = [], houses = [], cars = [];
    let keys = {w:0, a:0, s:0, d:0};

    function init() {
        w = canvas.width = window.innerWidth;
        h = canvas.height = window.innerHeight;
        playerX = w/2; playerY = h/2;

        // Jangal ke ped (Trees)
        for(let i=0; i<50; i++) {
            trees.push({x: Math.random()*2000-1000, y: Math.random()*2000-1000});
        }
    }

    // Controls setup
    const bind = (id, k) => {
        let el = document.getElementById(id);
        el.ontouchstart = (e) => { e.preventDefault(); keys[k] = 1; };
        el.ontouchend = (e) => { e.preventDefault(); keys[k] = 0; };
    };
    bind('up','w'); bind('down','s'); bind('left','a'); bind('right','d');

    function buyCar() {
        if(money >= 10000) {
            money -= 10000;
            cars.push({x: playerX + 20, y: playerY + 20});
            alert("Car Purchased! Business Growth +1");
            updateUI();
        }
    }

    function buildHouse() {
        if(money >= 5000) {
            money -= 5000;
            houses.push({x: playerX, y: playerY - 50});
            updateUI();
        }
    }

    function updateUI() {
        document.getElementById('money').innerText = money;
    }

    function draw() {
        // Background
        ctx.fillStyle = "#228B22"; // Grass Color
        ctx.fillRect(0,0,w,h);

        ctx.save();
        ctx.translate(w/2 - playerX, h/2 - playerY);

        // 5-Lane Road
        ctx.fillStyle = "#333";
        ctx.fillRect(-500, -1000, 300, 2000);
        // Road Lines
        ctx.strokeStyle = "white";
        ctx.setLineDash([20, 20]);
        for(let i=1; i<5; i++) {
            ctx.beginPath();
            ctx.moveTo(-500 + (i*60), -1000);
            ctx.lineTo(-500 + (i*60), 1000);
            ctx.stroke();
        }

        // Ped (Trees) Draw
        trees.forEach(t => {
            ctx.fillStyle = "#5D4037"; ctx.fillRect(t.x, t.y, 10, 20); // Trunk
            ctx.fillStyle = "#2E7D32"; ctx.beginPath(); ctx.arc(t.x+5, t.y-10, 20, 0, Math.PI*2); ctx.fill(); // Leaves
        });

        // Houses Draw
        houses.forEach(house => {
            ctx.fillStyle = "#fff"; ctx.fillRect(house.x, house.y, 60, 60);
            ctx.fillStyle = "red"; ctx.beginPath(); ctx.moveTo(house.x-10, house.y); ctx.lineTo(house.x+70, house.y); ctx.lineTo(house.x+30, house.y-30); ctx.fill();
        });

        // Cars Draw
        cars.forEach(car => {
            ctx.fillStyle = "blue"; ctx.fillRect(car.x, car.y, 30, 50);
            ctx.fillStyle =

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

5KB

Transfer Size

5KB

Content Size

92.0ms

Dom Content Loaded

184.0ms

First Paint

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