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, maximum-scale=1.0, user-scalable=no">
    <title>Neon Rider</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; font-family: 'Segoe UI', sans-serif; }
        canvas { display: block; }
        #ui { 
            position: absolute; top: 20px; width: 100%; text-align: center; 
            color: #fff; font-size: 30px; font-weight: bold; pointer-events: none;
            text-shadow: 0 0 10px #ff00ff;
        }
    </style>
</head>
<body>
    <div id="ui">0</div>
    <canvas id="gameCanvas"></canvas>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreUI = document.getElementById('ui');

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

    // Game Settings
    const lanes = 3;
    const laneWidth = canvas.width / lanes;
    let score = 0;
    let gameActive = true;
    let speed = 7;

    const player = {
        lane: 1, // Start in middle lane
        width: laneWidth * 0.6,
        height: 60,
        color: '#00f2ff'
    };

    const obstacles = [];

    function spawnObstacle() {
        const lane = Math.floor(Math.random() * lanes);
        obstacles.push({
            x: lane * laneWidth + (laneWidth * 0.1),
            y: -100,
            w: laneWidth * 0.8,
            h: 40,
            color: '#ff00ff'
        });
    }

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

        // Move obstacles
        for (let i = obstacles.length - 1; i >= 0; i--) {
            obstacles[i].y += speed;

            // Collision Detection
            const px = player.lane * laneWidth + (laneWidth - player.width) / 2;
            const py = canvas.height - 100;

            if (px < obstacles[i].x + obstacles[i].w &&
                px + player.width > obstacles[i].x &&
                py < obstacles[i].y + obstacles[i].h &&
                py + player.height > obstacles[i].y) {
                gameOver();
            }

            // Remove off-screen obstacles and score
            if (obstacles[i].y > canvas.height) {
                obstacles.splice(i, 1);
                score++;
                scoreUI.innerText = score;
                if (score % 5 === 0) speed += 0.5; // Increase difficulty
            }
        }

        if (Math.random() < 0.03) spawnObstacle();
    }

    function draw() {
        ctx.fillStyle = '#111'; // Dark background
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw Lane Lines
        ctx.strokeStyle = '#333';
        for (let i = 1; i < lanes; i++) {
            ctx.beginPath();
            ctx.moveTo(i * laneWidth, 0);
            ctx.lineTo(i * laneWidth, canvas.height);
            ctx.stroke();
        }

        // Draw Player
        const px = player.lane * laneWidth + (laneWidth - player.width) / 2;
        const py = canvas.height - 100;
        ctx.fillStyle = player.color;
        ctx.shadowBlur = 20;
        ctx.shadowColor = player.color;
        ctx.fillRect(px, py, player.width, player.height);

        // Draw Obstacles
        ctx.shadowBlur = 15;
        obstacles.forEach(obs => {
            ctx.fillStyle = obs.color;
            ctx.shadowColor = obs.color;
            ctx.fillRect(obs.x, obs.y, obs.w, obs.h);
        });

        if (gameActive) {
            update();
            requestAnimationFrame(draw);
        }
    }

    function gameOver() {
        gameActive = false;
        alert("CRASHED! Score: " + score);
        location.reload();
    }

    // Controls for Mobile/Desktop
    window.addEventListener('touchstart', (e) => {
        const touchX = e.touches[0].clientX;
        if (touchX < canvas.width / 2) {
            if (player.lane > 0) player.lane--;
        } else {
            if (player.lane < lanes - 1) player.lane++;
        }
    });

    window.addEventListener('keydown', (e) => {
        if (e.key === "ArrowLeft" && player.lane > 0) player.lane--;
        if (e.key === "ArrowRight" && player.lane < lanes - 1) player.lane++;
    });

    draw();
</script>
</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

4KB

Transfer Size

4KB

Content Size

95.0ms

Dom Content Loaded

156.0ms

First Paint

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