HTML ad tag preview - Powered by Ad Reform

Live Preview

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

304x154

561 Bytes

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 Snake</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; font-family: sans-serif; }
        canvas { background: #050505; border: 2px solid #333; box-shadow: 0 0 20px #0ff; }
        #ui { position: absolute; top: 20px; color: #0ff; font-size: 24px; text-shadow: 0 0 5px #0ff; pointer-events: none; }
    </style>
</head>
<body>
    <div id="ui">SCORE: 0</div>
    <canvas id="gameCanvas"></canvas>

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

    // Set canvas to a square that fits the screen
    const size = Math.min(window.innerWidth, window.innerHeight) - 40;
    canvas.width = size;
    canvas.height = size;

    const grid = 20;
    const tileCount = canvas.width / grid;

    let score = 0;
    let snake = [{x: 10, y: 10}];
    let food = {x: 5, y: 5};
    let dx = 0;
    let dy = 0;
    let nextDx = 0;
    let nextDy = 0;

    function gameLoop() {
        update();
        draw();
        setTimeout(gameLoop, 100); // Speed control
    }

    function update() {
        dx = nextDx;
        dy = nextDy;

        if (dx === 0 && dy === 0) return; // Wait for first move

        const head = {x: snake[0].x + dx, y: snake[0].y + dy};

        // Wall Collision
        if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) return reset();

        // Self Collision
        for (let i = 0; i < snake.length; i++) {
            if (head.x === snake[i].x && head.y === snake[i].y) return reset();
        }

        snake.unshift(head);

        // Food Collision
        if (head.x === food.x && head.y === food.y) {
            score++;
            scoreUI.innerText = `SCORE: ${score}`;
            spawnFood();
        } else {
            snake.pop();
        }
    }

    function draw() {
        ctx.fillStyle = '#050505';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw Snake
        snake.forEach((part, i) => {
            ctx.fillStyle = i === 0 ? '#0ff' : '#008888';
            ctx.shadowBlur = i === 0 ? 10 : 0;
            ctx.shadowColor = '#0ff';
            ctx.fillRect(part.x * grid, part.y * grid, grid - 2, grid - 2);
        });

        // Draw Food
        ctx.fillStyle = '#f0f';
        ctx.shadowBlur = 15;

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

3KB

Transfer Size

3KB

Content Size

96.0ms

Dom Content Loaded

116.0ms

First Paint

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