HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
908x508
3.26 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>Ibu Gems</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            background: linear-gradient(to bottom, #87CEEB, #E0F6FF);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            font-family: 'Arial', sans-serif;
            overflow: hidden;
        }
        h1 {
            color: #FF6B35;
            font-size: 3rem;
            text-shadow: 3px 3px 0 #8B4513, -1px -1px 0 #FFD700;
            margin-bottom: 10px;
            letter-spacing: 3px;
        }
        #gameCanvas {
            border: 4px solid #8B4513;
            border-radius: 10px;
            background: linear-gradient(to bottom, #87CEEB 60%, #228B22 60%);
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        }
        .controls {
            margin-top: 15px;
            display: flex;
            gap: 15px;
        }
        button {
            padding: 12px 30px;
            font-size: 1.2rem;
            font-weight: bold;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        button:hover {
            transform: scale(1.1);
        }
        .play-btn {
            background: linear-gradient(45deg, #FF6B35, #FF8C00);
            color: white;
            box-shadow: 0 4px 15px rgba(255,107,53,0.4);
        }
        .reset-btn {
            background: linear-gradient(45deg, #4CAF50, #45a049);
            color: white;
            box-shadow: 0 4px 15px rgba(76,175,80,0.4);
        }
        #score {
            color: #FFD700;
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: 2px 2px 0 #8B4513;
            margin-top: 10px;
        }
        .instructions {
            color: #333;
            background: rgba(255,255,255,0.8);
            padding: 10px 20px;
            border-radius: 10px;
            margin-top: 10px;
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <h1>🎯 IBU GEMS 💎</h1>
    <canvas id="gameCanvas" width="900" height="500"></canvas>
    <div id="score">Score: 0 | Balls: 3</div>
    <div class="controls">
        <button class="play-btn" onclick="launchBird()">LAUNCH! 🚀</button>
        <button class="reset-btn" onclick="resetGame()">NEW GAME 🔄</button>
    </div>
    <div class="instructions">
        🎮 Drag the gem back and release to launch! | Destroy all gems to win!
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // Game state
        let score = 0;
        let balls = 3;
        let gameRunning = false;
        let dragging = false;
        
        // Slingshot position
        const slingshot = { x: 150, y: 350 };
        
        // Bird/gem
        let bird = {
            x: slingshot.x,
            y: slingshot.y,
            vx: 0,
            vy: 0,
            radius: 20,
            inPlay: false
        };
        
        // Targets (gems to destroy)
        let targets = [];
        let blocks = [];
        
        // Physics constants
        const gravity = 0.3;
        const friction = 0.98;
        
        function initTargets() {
            targets = [];
            blocks = [];
            
            // Create pyramid of blocks
            const startX = 700;
            const startY = 380;
            const blockW = 40;
            const blockH = 40;
            
            // Bottom row
            for (let i = 0; i < 4; i++) {
                blocks.push({
                    x: startX + i * blockW,
                    y: startY,
                    w: blockW,
                    h: blockH,
                    color: '#8B4513',
                    active: true
                });
            }
            // Second row
            for (let i = 0; i < 3; i++) {
                blocks.push({
                    x: startX + 20 + i * blockW,
                    y: startY - blockH,
                    w: blockW,
                    h: blockH,
                    color: '#A0522D',
                    active: true
                });
            }
            // Top row
            for (let i = 0; i < 2; i++) {
                blocks.push({
                    x: startX + 40 + i * blockW,
                    y: startY - blockH * 2,
                    w: blockW,
                    h: blockH,
                    color: '#CD853F',
                    active: true
                });
            }
            
            // Add target gems
            targets.push({ x: startX + 60, y: startY - 50, radius: 18, color: '#32CD32', active: true });
            targets.push({ x: startX + 100, y: startY - 20, radius: 15, color: '#FFD700', active: true });
            targets.push({ x: startX + 140, y: startY - 50, radius: 18, color: '#32CD32', active: true });
        }
        
        function drawBackground() {
            // Sky
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height * 0.6);
            gradient.addColorStop(0, '#87CEEB');
            gradient.addColorStop(1, '#E0F6FF');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height * 0.6);
            
            // Ground
            ctx.fillStyle = '#228B22';
            ctx.fillRect(0, canvas.height * 0.6, canvas.width, canvas.height * 0.4);
            
            // Grass line
            ctx.strokeStyle = '#32CD32';
            ctx.lineWidth = 5;
            ctx.beginPath();
            ctx.moveTo(0, canvas.height * 0.6);
            ctx.lineTo(canvas.width, canvas.height * 0.6);
            ctx.stroke();
            
            // Clouds
            ctx.fillStyle = 'rgba(255,255,255,0.8)';
            drawCloud(100, 80, 40);
            drawCloud(400, 120, 50);
            drawCloud(700, 60, 35);
        }
        
        function drawCloud(x, y, size) {
            ctx.beginPath();
            ctx.arc(x, y, size, 0, Math.PI * 2);
            ctx.arc(x + size * 0.8, y - size * 0.2, size * 0.7, 0, Math.PI * 2);
            ctx.arc(x + size * 1.5, y, size * 0.8, 0, Math.PI * 2);
            ctx.fill();
        }
        
        function drawSlingshot() {
            // Left fork
            ctx.fillStyle = '#
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
7KB
Transfer Size
7KB
Content Size
84.0ms
Dom Content Loaded
200.0ms
First Paint
85.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