HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
48.1 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, maximum-scale=1.0, user-scalable=no">
    <title>JJK 3D: Gojo vs Sukuna</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }
        body {
            margin: 0;
            background: #000;
            color: white;
            font-family: 'Georgia', serif;
            overflow: hidden;
        }
        /* 3D Viewport canvas container */
        #canvas-container {
            width: 100vw;
            height: 100vh;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 5;
            pointer-events: none;
        }
        .player-info { width: 38%; }
        .name {
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 2px;
            margin-bottom: 5px;
            text-shadow: 2px 2px 4px black;
        }
        #p1-name { color: #00ffff; }
        #p2-name { color: #ff0055; text-align: right; }
        
        .health-bar-container {
            width: 100%;
            height: 18px;
            background: rgba(34,34,34,0.6);
            border: 2px solid rgba(255,255,255,0.2);
            border-radius: 4px;
            overflow: hidden;
        }
        #p1-health { width: 100%; height: 100%; background: linear-gradient(90deg, #0055ff, #00ffff); transition: width 0.1s; }
        #p2-health { width: 100%; height: 100%; background: linear-gradient(90deg, #ff0055, #990022); float: right; transition: width 0.1s; }
        
        #timer {
            font-size: 36px;
            font-weight: bold;
            text-shadow: 0 0 10px #8a2be2;
            font-family: monospace;
        }
        #game-over-screen {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 32px;
            color: #fff;
            text-align: center;
            background: rgba(5, 5, 10, 0.9);
            padding: 30px;
            border: 3px solid #8a2be2;
            border-radius: 10px;
            z-index: 10;
            box-shadow: 0 0 50px rgba(138, 43, 226, 0.8);
        }
        .rematch-btn {
            margin-top: 15px;
            padding: 12px 24px;
            background: #8a2be2;
            color: white;
            border: none;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            pointer-events: auto;
        }
        /* Virtual Controls overlay for Mobile compatibility */
        #mobile-controls {
            position: absolute;
            bottom: 30px;
            left: 20px;
            right: 20px;
            display: flex;
            justify-content: space-between;
            z-index: 5;
        }
        .dpad, .action-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
        .btn {
            width: 65px; height: 65px;
            background: rgba(0, 0, 0, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            color: white; font-weight: bold; font-size: 16px;
            display: flex; align-items: center; justify-content: center;
            touch-action: manipulation;
        }
        .btn:active { background: rgba(255, 255, 255, 0.4); }
        .invisible { opacity: 0; pointer-events: none; }
    </style>
    <!-- Importing Three.js Engine Source code -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

    <div id="ui">
        <div class="player-info">
            <div class="name" id="p1-name">GOJO SATORU</div>
            <div class="health-bar-container"><div id="p1-health"></div></div>
        </div>
        <div id="timer">99</div>
        <div class="player-info">
            <div class="name" id="p2-name">RYOMEN SUKUNA</div>
            <div class="health-bar-container"><div id="p2-health"></div></div>
        </div>
    </div>

    <div id="game-over-screen">
        <span id="winner-text">GOJO SATORU WINS!</span><br>
        <button class="rematch-btn" onclick="resetGame()">NEXT ROUND</button>
    </div>

    <div id="canvas-container"></div>

    <div id="mobile-controls">
        <div class="dpad">
            <div class="invisible"></div>
            <div class="btn" id="btn-up">▲</div>
            <div class="invisible"></div>
            <div class="btn" id="btn-left">◀</div>
            <div class="btn" id="btn-down">▼</div>
            <div class="btn" id="btn-right">▶</div>
        </div>
        <div class="action-buttons">
            <div class="btn" id="btn-light" style="border-color: #00ffff;">👊</div>
            <div class="invisible"></div>
            <div class="btn" id="btn-heavy" style="border-color: #ff0055; background: rgba(138,43,226,0.2);">🔥</div>
        </div>
    </div>

<script>
// --- 3D ENGINE INITIALIZATION ---
const container = document.getElementById('canvas-container');
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x020205);
scene.fog = new THREE.FogExp2(0x020205, 0.015);

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
container.appendChild(renderer.domElement);

// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(0, 40, 20);
dirLight.castShadow = true;
scene.add(dirLight);

// Ground Arena Floor Mesh
const floorGeo = new THREE.PlaneGeometry(100, 30);
const floorMat = new THREE.MeshStandardMaterial({ color: 0x111118, roughness: 0.8 });
const floor = new THREE.Mesh(floorGeo, floorMat);
floor.rotation.x = -Math.PI / 2;
floor.receiveShadow = true;
scene.add(floor);

// Simple Grid Lines for visual 3D reference
const grid = new THREE.GridHelper(100, 50, 0x444466, 0x222233);
grid.position.y = 0.01;
scene.add(grid);

// --- GAME LOGIC GLOBALS ---
const gravity = 0.35;
let gameOver = false;
let gameTimer = 99;
let timerInterval;

const virtualInputs = { left: false, right: false, up: false, down: false, light: false, heavy: false };
const keys = {};
window.addEventListener('keydown', (e) => { keys[e.key.toLowerCase()] = true; });
window.addEventListener('keyup', (e) => { keys[e.key.toLowerCase()] = false; });

function bindTouch(elementId, action) {
    const el = document.getElementById(elementId);
    el.addEventListener('touchstart', (e) => { e.preventDefault(); virtualInputs[action] = true; }, { passive: false });
    el.addEventListener('touchend', (e) => { e.preventDefault(); virtualInputs[action] = false; }, { passive: false });
}
bindTouch('btn-left', 'left'); bindTouch('btn-right', 'right');
bindTouch('btn-up', 'up'); bindTouch('btn-down', 'down');
bindTouch('btn-light', 'light'); bindTouch('btn-heavy', 'heavy');

// Particle Array for Cursed Energy
let fxParticles = [];
function spawnSpecialFX(pos, color, count=10) {
    for (let i = 0; i < count; i++) {
        const pGeo = new THREE.SphereGeometry(Math.random() * 0.15 + 0.05, 4, 4);
        const pMat = new THREE.MeshBasicMaterial({ color: color, transparent: true, opacity: 1 });
        const mesh = new THREE.Mesh(pGeo, pMat);
        mesh.position.copy(pos);
        mesh.position.x += (Math.random() - 0.5) * 2;
        mesh.position.y += (Math.random() - 0.5) * 3;
        scene.add(mesh);
        fxParticles.push({
            mesh: mesh,
            vx: (Math.random() - 0.5) * 0.4,
            vy: (Math.random() - 0.5) * 0.4,
            decay: Math.random() * 0.03 + 0.02
        });
    }
}

// --- FIGHTER OBJECT ENTITY ---
class Fighter3D {
    constructor(xPos, baseColor, name, auraColor) {
        this.name = name;
        this.health = 100;
        this.isGrounded = false;
        this.isAttacking = false;
        this.attackType = null;
        this.attackCooldown = 0;
        this.isBlocking = false;
        this.facingSign = 1; // 1 = Right, -1 = Left

        // Create 3D Composite Object Container
        this.meshGroup = new THREE.Group();
        this.meshGroup.position.set(xPos, 2.5, 0);

        // Body Mesh (Box)
        const bodyGeo = new THREE.BoxGeometry(1.5, 3.5, 1.5);
        const bodyMat = new THREE.MeshStandardMaterial({ color: baseColor, roughness: 0.5 });
        this.bodyMesh = new THREE.Mesh(bodyGeo, bodyMat);
        this.bodyMesh.castShadow = true;
        this.meshGroup.add(this.bodyMesh);

        // Glowing Eye Mesh Segment
        const eyeGeo = new THREE.BoxGeometry(1.6, 0.2, 0.4);
        const eyeMat = new THREE.MeshBasicMaterial({ color: auraColor });
        this.eyeMesh = new THREE.Mesh(eyeGeo, eyeMat);
        this.eyeMesh.position.set(0.2, 1.2, 0.6); // Front side highlight orientation
        this.meshGroup.add(this.eyeMesh);

        // Attack Box Ring Indicator (Invisible unless casting technique)
        const ringGeo = new THREE.RingGeometry(0.1, 1.8, 16);
        const ringMat = new THREE.MeshBasicMaterial({ color: auraColor, side: THREE.DoubleSide, transparent: true, opacity: 0 });
        this.attackRing = new THREE.Mesh(ringGeo, ringMat);
        this.attackRing.rotation.y = Math.PI / 2;
        this.attackRing.position.set(2, 0, 0);
        this.meshGroup.add(this.attackRing);

        scene.add(this.meshGroup);
    }

    updatePhysics() {
        // Handle custom gravity modifiers
        let currentGravity = gravity;
        if (this.name === 'Gojo' && this.meshGroup.position.y > 2.5 && (virtualInputs.up || keys['w'])) {
            currentGravity = gravity * 0.4; // Limitless air glide
        }

        // Apply internal velocities manually directly onto 3D matrix space
        if (this.meshGroup.position.y > 2.5) {
            this.meshGroup.position.y += this.vy;
            this.vy -= currentGravity;
        } else {
            this.meshGroup.position.y = 2.5;
            this.vy = 0;
            this.isGrounded = true;
        }

        this.meshGroup.position.x += this.vx;

        // Wall boundary hard boundaries limits
        if (this.meshGroup.position.x < -30) this.meshGroup.position.x = -30;
        if (this.meshGroup.position.x > 30) this.meshGroup.position.x = 30;

        // Dynamic visual turning state adjustments based on positioning tracking variables
        this.eyeMesh.position.x = 0.2 * this.facingSign;
        this.attackRing.position.x = 2.2 * this.facingSign;

        // Progress attack cooldown cycles
        if (this.attackCooldown > 0) this.attackCooldown--;
        if (this.attackCooldown === 0) {
            this.isAttacking = false;
            this.attackRing.material.opacity = 0;
        }
    }

    triggerAttack(type) {
        if (this.attackCooldown > 0 || this.isBlocking) return;
        this.isAttacking = true;
        this.attackType = type;
        this.attackCooldown = type === 'light' ? 15 : 35;
        this.attackRing.material.opacity = 0.7;
        
        if (type === 'heavy') {
            spawnSpecialFX(this.meshGroup.position, this.name === 'Gojo' ? 0x00ffff : 0xff0055, 20);
        }
    }
}

// Generate characters
const gojo = new Fighter3D(-12, 0x11111a, 'Gojo', 0x00ffff); // Dark blue garb, Cyan energy
const sukuna = new Fighter3D(12, 0x2d1a1e, 'Sukuna', 0xff0055); // Crimson garb, Pink/Red energy

gojo.vy = 0; gojo.vx = 0;
sukuna.vy = 0; sukuna.vx = 0;

// --- COLLISION MATRIX LOGIC ---
function checkProximityAttackHit(attacker, defender) {
    const distance = Math.abs(attacker.meshGroup.position.x - defender.meshGroup.position.x);
    const heightDiff = Math.abs(attacker.meshGroup.position.y - defender.meshGroup.position.y);
    
    // Evaluate check values matching character orientation scaling bounds
    const reach = attacker.attackType === 'light' ? 3.5 : 5.5;
    const pathCorrect = (defender.meshGroup.position.x - attacker.meshGroup.position.x) * attacker.facingSign > 0;

    return (distance <= reach && heightDiff < 4 && pathCorrect);
}

// Timer Loop
function startTimer() {
    clearInterval(timerInterval);
    timerInterval = setInterval(() => {
        if (gameTimer > 0 && !gameOver) {
            gameTimer--;
            document.getElementById('timer').innerText = gameTimer;
        } else if (gameTimer === 0 && !gameOver) {
            endGame();
        }
    }, 1000);
}

function endGame() {
    gameOver = true;
    document.getElementById('game-over-screen').style.display = 'block';
    const text = document.getElementById('winner-text');
    if (gojo.health === sukuna.health) text.innerText = "TIE DEADLOCK GAME!";
    else text.innerText = gojo.health > sukuna.health ? "GOJO SATORU WINS!" : "RYOMEN SUKUNA WINS!";
}

function resetGame() {
    gojo.health = 100; sukuna.health = 100;
    gojo.meshGroup.position.set(-12, 2.5, 0);
    sukuna.meshGroup.position.set(12, 2.5, 0);
    gameTimer = 99; gameOver = false;
    document.getElementById('p1-health').style.width = '100%';
    document.getElementById('p2-health').style.width = '100%';
    document.getElementById('game-over-screen').style.display = 'none';
    startTimer();
}

// Processing User Controls Layout Execution Loops
function processControlSystem() {
    gojo.vx = 0;
    gojo.isBlocking = false;

    if (!gameOver) {
        // Player 1 Gojo Manual Keyboard + Virtual Input registers mapping
        if (virtualInputs.left || keys['a']) gojo.vx = -0.25;
        if (virtualInputs.right || keys['d']) gojo.vx = 0.25;
        if ((virtualInputs.up || keys['w']) && gojo.isGrounded) { gojo.vy = 6.5; gojo.isGrounded = false; }
        if (virtualInputs.down || keys['s']) { gojo.isBlocking = true; gojo.bodyMesh.material.color.setHex(0xffffff); } 
        else { gojo.bodyMesh.material.color.setHex(0x11111a); }

        if (virtualInputs.light || keys['f']) gojo.triggerAttack('light');
        if (virtualInputs.heavy || keys['g']) gojo.triggerAttack('heavy');

        // Player 2 Sukuna AI Fight System Matrix Automation logic
        sukuna.vx = 0;
        sukuna.isBlocking = false;
        const targetDistance = gojo.meshGroup.position.x - sukuna.meshGroup.position.x;

        if (Math.abs(targetDistance) > 4.5) {
            sukuna.vx = targetDistance > 0 ? 0.18 : -0.18; // Speed values match pacing
            if (Math.random() < 0.015 && sukuna.isGrounded) { sukuna.vy = 6.0; sukuna.isGrounded = false; }
        } else {
            // Close Range AI Triggers
            if (Math.random() < 0.05) {
                sukuna.triggerAttack(Math.random() > 0.4 ? 'heavy' : 'light');
            }
            if (Math.random() < 0.02) {
                sukuna.isBlocking = true;
            }
        }
    }
}

// --- ENGINE RE-RENDER INTERACTION EXECUTION LOOP ---
function animate() {
    requestAnimationFrame(animate);

    processControlSystem();

    // Dynamically flip facing vectors based on positioning lines
    gojo.facingSign = gojo.meshGroup.position.x < sukuna.meshGroup.position.x ? 1 : -1;
    sukuna.facingSign = sukuna.meshGroup.position.x < gojo.meshGroup.position.x ? 1 : -1;

    // Advance 3D coordinate translations
    gojo.updatePhysics();
    sukuna.updatePhysics();

    // Attack evaluations
    if (gojo.isAttacking && gojo.attackCooldown === 12 && checkProximityAttackHit(gojo, sukuna)) {
        let dmg = gojo.attackType === 'light' ? 7 : 18;
        if (sukuna.isBlocking) dmg *= 0.2;
        sukuna.health -= dmg;
        spawnSpecialFX(sukuna.meshGroup.position, 0x00ffff, 8);
    }
    if (sukuna.isAttacking && sukuna.attackCooldown === 12 && checkProximityAttackHit(sukuna, gojo)) {
        let dmg = sukuna.attackType === 'light' ? 8 : 22;
        if (gojo.isBlocking) dmg *= 0.02; // Infinity filters 98% damage
        gojo.health -= dmg;
        spawnSpecialFX(gojo.meshGroup.position, 0xff0055, 8);
    }

    // Update HTML bars values layout graphics
    if (gojo.health < 0) gojo.health = 0;
    if (sukuna.health < 0) sukuna.health = 0;
    document.getElementById('p1-health').style.width = gojo.health + '%';
    document.getElementById('p2-health').style.width = sukuna.health + '%';

    if ((gojo.health <= 0 || sukuna.health <= 0) && !gameOver) endGame();

    // Processing floating FX system instances mechanics
    for (let i = fxParticles.length - 1; i >= 0; i--) {
        let p = fxParticles[i];
        p.mesh.position.x += p.vx;
        p.mesh.position.y += p.vy;
        p.mesh.material.opacity -= p.decay;
        if (p.mesh.material.opacity <= 0) {
            scene.remove(p.mesh);
            p.mesh.geometry.dispose();
            p.mesh.material.dispose();
            fxParticles.splice(i, 1);
        }
    }

    // Dynamic 3D Camera Tracking: Automatically centers, raises, tracks and floats mid-distance between both players
    const midpointX = (gojo.meshGroup.position.x + sukuna.meshGroup.position.x) / 2;
    const distanceBetween = Math.abs(gojo.meshGroup.position.x - sukuna.meshGroup.position.x);
    
    // Zoom out/in fluidly based on player spacing gap widths
    const idealCamZ = Math.max(16, distanceBetween * 0.95 + 6);
    camera.position.x += (midpointX - camera.position.x) * 0.1;
    camera.position.y += (Math.max(4.5, 3 + (distanceBetween * 0.1)) - camera.position.y) * 0.1;
    camera.position.z += (idealCamZ - camera.position.z) * 0.1;
    camera.lookAt(midpointX, 2.5, 0);

    renderer.render(scene, camera);
}

// Window resizing scaling support
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

startTimer();
animate();
</script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
137KB
Transfer Size
608KB
Content Size
952.0ms
Dom Content Loaded
104.0ms
First Paint
953.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