Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!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>3D Fighter</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { background: #0a0a0f; overflow: hidden; font-family: 'Arial Black', sans-serif; touch-action: none; }
#canvas { display: block; }
#ui { position: fixed; top: 0; left: 0; width: 100%; pointer-events: none; z-index: 10; }
#health-bars {
display: flex; justify-content: space-between; align-items: center;
padding: 10px 12px 0;
}
.fighter-info { width: 42%; }
.fighter-name { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; color: #fff; }
.fighter-info.right .fighter-name { text-align: right; }
.health-bar-bg { height: 16px; background: #1a1a2e; border: 2px solid #333; border-radius: 3px; overflow: hidden; }
.health-bar { height: 100%; width: 100%; border-radius: 2px; transition: width 0.2s ease; }
#p1-health { background: linear-gradient(90deg, #e63946, #ff6b6b); }
#p2-health { background: linear-gradient(270deg, #4361ee, #4cc9f0); float: right; }
.fighter-info.right .health-bar-bg { direction: rtl; }
#timer-box {
background: #12122a; border: 2px solid #4361ee; color: #fff;
font-size: 20px; font-weight: 900; width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
border-radius: 8px; box-shadow: 0 0 20px #4361ee55;
}
#round-display { text-align: center; color: #f72585; font-size: 9px; letter-spacing: 3px; margin-top: 2px; }
#message {
position: fixed; top: 40%; left: 50%; transform: translate(-50%,-50%);
font-size: 40px; font-weight: 900; color: #fff;
text-shadow: 0 0 30px #f72585, 0 0 60px #4361ee;
letter-spacing: 4px; text-transform: uppercase;
display: none; z-index: 20; text-align: center;
animation: pulse 0.5s ease infinite alternate;
}
@keyframes pulse { from { transform: translate(-50%,-50%) scale(1); } to { transform: translate(-50%,-50%) scale(1.08); } }
#combo-p1, #combo-p2 {
position: fixed; font-size: 16px; font-weight: 900;
opacity: 0; transition: opacity 0.3s; text-transform: uppercase; letter-spacing: 2px;
top: 80px;
}
#combo-p1 { left: 12px; color: #ff6b6b; text-shadow: 0 0 15px #e63946; }
#combo-p2 { right: 12px; color: #4cc9f0; text-shadow: 0 0 15px #4361ee; text-align: right; }
/* ── Touch Controls ── */
#touch-controls {
position: fixed; bottom: 0; left: 0; width: 100%;
height: 200px; z-index: 15; pointer-events: none;
}
/* P1 Left Side */
#p1-controls {
position: absolute; left: 0; bottom: 0; width: 50%; height: 200px;
pointer-events: all;
}
#p1-dpad {
position: absolute; left: 10px; bottom: 16px;
display: grid; grid-template-columns: 52px 52px 52px;
grid-template-rows: 52px 52px; gap: 4px;
}
#p1-actions {
position: absolute; right: 10px; bottom: 16px;
display: grid; grid-template-columns: 56px 56px; gap: 6px;
}
/* P2 Right Side */
#p2-controls {
position: absolute; right: 0; bottom: 0; width: 50%; height: 200px;
pointer-events: all;
}
#p2-dpad {
position: absolute; right: 10px; bottom: 16px;
display: grid; grid-template-columns: 52px 52px 52px;
grid-template-rows: 52px 52px; gap: 4px;
}
#p2-actions {
position: absolute; left: 10px; bottom: 16px;
display: grid; grid-template-columns: 56px 56px; gap: 6px;
}
.btn {
border-radius: 12px; border: 2px solid; font-weight: 900;
font-size: 11px; letter-spacing: 1px; display: flex;
align-items: center; justify-content: center; user-select: none;
cursor: pointer; transition: opacity 0.1s;
-webkit-tap-highlight-color: transparent;
}
.btn:active, .btn.pressed { opacity: 0.6; }
.p1-btn { background: #e6394622; border-color: #e63946; color: #ff6b6b; }
.p2-btn { background: #4361ee22; border-color: #4361ee; color: #4cc9f0; }
.dpad-btn { width: 52px; height: 52px; font-size: 18px; border-radius: 10px; }
.dpad-empty { width: 52px; height: 52px; }
.action-btn { width: 56px; height: 56px; font-size: 10px; border-radius: 50%; }
.jump-btn { grid-column: 2; }
/* center divider */
#divider {
position: absolute; left: 50%; top: 0; bottom: 0;
width: 1px; background: #ffffff11; pointer-events: none;
}
#win-screen {
display: none; position: fixed; inset: 0; background: #000000cc;
z-index: 30; align-items: center; justify-content: center; flex-direction: column;
}
#win-screen h1 { font-size: 44px; color: #f72585; letter-spacing: 6px; text-shadow: 0 0 40px #f72585; text-align: center; }
#win-screen p { color: #fff; margin-top: 12px; font-size: 16px; letter-spacing: 3px; }
#restart-btn {
margin-top: 24px; padding: 14px 40px; background: #4361ee;
color: #fff; border: none; font-size: 16px; font-weight: 900;
letter-spacing: 3px; border-radius: 8px; cursor: pointer;
pointer-events: all; text-transform: uppercase;
box-shadow: 0 0 30px #4361ee88;
}
#p1-label, #p2-label {
position: absolute; top: 8px; font-size: 9px; letter-spacing: 2px;
font-weight: 900; opacity: 0.5;
}
#p1-label { left: 12px; color: #ff6b6b; }
#p2-label { right: 12px; color: #4cc9f0; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="ui">
<div id="health-bars">
<div class="fighter-info left">
<div class="fighter-name">🔴 RYU</div>
<div class="health-bar-bg"><div class="health-bar" id="p1-health"></div></div>
</div>
<div style="text-align:center;">
<div id="timer-box">99</div>
<div id="round-display">ROUND 1</div>
</div>
<div class="fighter-info right">
<div class="fighter-name">KEN 🔵</div>
<div class="health-bar-bg"><div class="health-bar" id="p2-health"></div></div>
</div>
</div>
</div>
<div id="message"></div>
<div id="combo-p1"></div>
<div id="combo-p2"></div>
<div id="win-screen">
<h1 id="win-text">PLAYER 1 WINS!</h1>
<p>K.O.!</p>
<button id="restart-btn" onclick="restartGame()">REMATCH</button>
</div>
<!-- Touch Controls -->
<div id="touch-controls">
<div id="divider"></div>
<!-- P1 Left side -->
<div id="p1-controls">
<div id="p1-label">P1</div>
<!-- D-Pad -->
<div id="p1-dpad">
<div class="dpad-empty"></div>
<div class="btn dpad-btn p1-btn" id="p1-up">↑</div>
<div class="dpad-empty"></div>
<div class="btn dpad-btn p1-btn" id="p1-left">←</div>
<div class="dpad-empty"></div>
<div class="btn dpad-btn p1-btn" id="p1-right">→</div>
</div>
<!-- Action buttons -->
<div id="p1-actions">
<div class="btn action-btn p1-btn" id="p1-punch">👊<br>PUNCH</div>
<div class="btn action-btn p1-btn" id="p1-kick">🦵<br>KICK</div>
<div class="btn action-btn p1-btn" id="p1-block" style="grid-column:span 2; border-radius:12px; height:40px;">🛡 BLOCK</div>
</div>
</div>
<!-- P2 Right side -->
<div id="p2-controls">
<div id="p2-label" style="right:12px; left:auto;">P2</div>
<!-- D-Pad -->
<div id="p2-dpad">
<div class="dpad-empty"></div>
<div class="btn dpad-btn p2-btn" id="p2-up">↑</div>
<div class="dpad-empty"></div>
<div class="btn dpad-btn p2-btn" id="p2-left">←</div>
<div class="dpad-empty"></div>
<div class="btn dpad-btn p2-btn" id="p2-right">→</div>
</div>
<!-- Action buttons -->
<div id="p2-actions">
<div class="btn action-btn p2-btn" id="p2-punch">👊<br>PUNCH</div>
<div class="btn action-btn p2-btn" id="p2-kick">🦵<br>KICK</div>
<div class="btn action-btn p2-btn" id="p2-block" style="grid-column:span 2; border-radius:12px; height:40px;">🛡 BLOCK</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script>
// ─── Scene ───────────────────────────────────────────────────────
const canvas = document.getElementById('canvas');
const renderer = new THREE.WebGLRenderer({ canvas, antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
renderer.shadowMap.enabled = true;
renderer.setClearColor(0x0a0a0f);
const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x0a0a0f, 20, 50);
const camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 4, 12);
camera.lookAt(0, 2, 0);
// Lights
scene.add(new THREE.AmbientLight(0x222244, 1));
const sun = new THREE.DirectionalLight(0xffffff, 1.5);
sun.position.set(5, 10, 5); sun.castShadow = true; scene.add(sun);
const redLight = new THREE.PointLight(0xff2244, 2, 15);
redLight.position.set(-5, 3, 3); scene.add(redLight);
const blueLight = new THREE.PointLight(0x4488ff, 2, 15);
blueLight.position.set(5, 3, 3); scene.add(blueLight);
// Floor
const floor = new THREE.Mesh(
new THREE.PlaneGeometry(20, 20),
new THREE.MeshStandardMaterial({ color: 0x1a1a2e, roughness: 0.8 })
);
floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; scene.add(floor);
scene.add(new THREE.GridHelper(20, 20, 0x4361ee22, 0x4361ee22));
// Pillars
for (let i = -3; i <= 3; i += 1.5) {
const p = new THREE.Mesh(
new THREE.BoxGeometry(0.3, 6, 0.3),
new THREE.MeshStandardMaterial({ color: 0x12122a })
);
p.position.set(i * 2, 3, -6); scene.add(p);
}
// Floor line
const line = new THREE.Mesh(
new THREE.BoxGeometry(14, 0.05, 0.1),
new THREE.MeshStandardMaterial({ color: 0xf72585, emissive: 0xf72585, emissiveIntensity: 0.5 })
);
line.position.set(0, 0.01, 0); scene.add(line);
// ─── Fighter ─────────────────────────────────────────────────────
function createFighter(color, emissive) {
const g = new THREE.Group();
const mat = new THREE.MeshStandardMaterial({ color, roughness: 0.4, metalness: 0.2, emissive, emissiveIntensity: 0.3 });
const dark = new THREE.MeshStandardMaterial({ color: 0x111122, roughness: 0.6 });
const torso = new THREE.Mesh(new THREE.BoxGeometry(0.7, 0.9, 0.4), mat);
torso.position.y = 1.5; torso.castShadow = true; g.add(torso);
const head = new THREE.Mesh(new THREE.BoxGeometry(0.5, 0.5, 0.45), mat);
head.position.y = 2.25; g.add(head);
const eyeMat = new THREE.MeshStandardMaterial({ color: 0xffffff, emissive: 0xffffff, emissiveIntensity: 1 });
[-0.13, 0.13].forEach(x => {
const eye = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.08, 0.05), eyeMat);
eye.position.set(x, 2.27, 0.23); g.add(eye);
});
[-0.2, 0.2].forEach((x, i) => {
const leg = new THREE.Mesh(new THREE.BoxGeometry(0.28, 0.85, 0.3), i === 0 ? mat : dark);
leg.position.set(x, 0.65, 0); leg.castShadow = true; g.add(leg);
});
[-0.47, 0.47].forEach((x, i) => {
const arm = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.8, 0.22), i === 0 ? dark : mat);
arm.position.set(x, 1.5, 0); arm.castShadow = true; g.add(arm);
if (i === 1) g.userData.rightArm = arm;
});
[-0.2, 0.2].forEach(x => {
const foot = new THREE.Mesh(new THREE.BoxGeometry(0.3, 0.15, 0.45), dark);
foot.position.set(x, 0.18, 0.08); g.add(foot);
});
return g;
}
// ─── State ───────────────────────────────────────────────────────
let p1, p2;
let p1Health = 100, p2Health = 100;
let p1Vel = { x: 0, y: 0 }, p2Vel = { x: 0, y: 0 };
let p1OnGround = true, p2OnGround = true;
let p1Blocking = false, p2Blocking = false;
let p1Combo = 0, p2Combo = 0;
let lastP1Attack = 0, lastP2Attack = 0;
let gameActive = true, timer = 99;
let timerInterval, particles = [], animTime = 0;
// Virtual keys (touch + keyboard)
const vkeys = {};
// ─── Touch Buttons ───────────────────────────────────────────────
function bindBtn(id, key) {
const el = document.getElementById(id);
if (!el) return;
const on = (e) => { e.preventDefault(); vkeys[key] = true; el.classList.add('pressed'); };
const off = (e) => { e.preventDefault(); vkeys[key] = false; el.classList.remove('pressed'); };
el.addEventListener('touchstart', on, { passive: false });
el.addEventListener('touchend', off, { passive: false });
el.addEventListener('touchcancel', off, { passive: false });
el.addEventListener('mousedown', on);
el.addEventListener('mouseup', off);
}
bindBtn('p1-left', 'p1_left');
bindBtn('p1-right', 'p1_right');
bindBtn('p1-up', 'p1_jump');
bindBtn('p1-punch', 'p1_punch');
bindBtn('p1-kick', 'p1_kick');
bindBtn('p1-block', 'p1_block');
bindBtn('p2-left', 'p2_left');
bindBtn('p2-right', 'p2_right');
bindBtn('p2-up', 'p2_jump');
bindBtn('p2-punch', 'p2_punch');
bindBtn('p2-kick', 'p2_kick');
bindBtn('p2-block', 'p2_block');
// Keyboard fallback
document.addEventListener('keydown', e => {
if (e.key === 'a') vkeys['p1_left'] = true;
if (e.key === 'd') vkeys['p1_right'] = true;
if (e.key === 'w') vkeys['p1_jump'] = true;
if (e.key === 'f') vkeys['p1_punch'] = true;
if (e.key === 'g') vkeys['p1_kick'] = true;
if (e.key === 'h') vkeys['p1_block'] = true;
if (e.key === 'ArrowLeft') vkeys['p2_left'] = true;
if (e.key === 'ArrowRight') vkeys['p2_right'] = true;
if (e.key === 'ArrowUp') vkeys['p2_jump'] = true;
if (e.key === 'k') vkeys['p2_punch'] = true;
if (e.key === 'l') vkeys['p2_kick'] = true;
if (e.key === ';') vkeys['p2_block'] = true;
});
document.addEventListener('keyup', e => {
if (e.key === 'a') vkeys['p1_left'] = false;
if (e.key === 'd') vkeys['p1_right'] = false;
if (e.key === 'w') vkeys['p1_jump'] = false;
if (e.key === 'f') vkeys['p1_punch'] = false;
if (e.key === 'g') vkeys['p1_kick'] = false;
if (e.key === 'h') vkeys['p1_block'] = false;
if (e.key === 'ArrowLeft') vkeys['p2_left'] = false;
if (e.key === 'ArrowRight') vkeys['p2_right'] = false;
if (e.key === 'ArrowUp') vkeys['p2_jump'] = false;
if (e.key === 'k') vkeys['p2_punch'] = false;
if (e.key === 'l') vkeys['p2_kick'] = false;
if (e.key === ';') vkeys['p2_block'] = false;
});
// ─── Particles ───────────────────────────────────────────────────
function spawnHit(pos, color) {
for (let i = 0; i < 10; i++) {
const m = new THREE.Mesh(
new THREE.SphereGeometry(0.06 + Math.random() * 0.08, 4, 4),
new THREE.MeshStandardMaterial({ color, emissive: color, emissiveIntensity: 2 })
);
m.position.copy(pos);
m.userData.vel = new THREE.Vector3((Math.random()-.5)*.2, Math.random()*.15+.05, (Math.random()-.5)*.1);
m.userData.life = 1.0;
scene.add(m); particles.push(m);
}
}
function updateParticles() {
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.userData.life -= 0.04;
p.position.add(p.userData.vel);
p.userData.vel.y -= 0.008;
p.material.opacity = p.userData.life;
p.material.transparent = true;
if (p.userData.life <= 0) { scene.remove(p); particles.splice(i, 1); }
}
}
// ─── UI ──────────────────────────────────────────────────────────
function updateHealthBars() {
document.getElementById('p1-health').style.width = Math.max(0, p1Health) + '%';
document.getElementById('p2-health').style.width = Math.max(0, p2Health) + '%';
}
function showMessage(txt, dur = 1500) {
const m = document.getElementById('message');
m.textContent = txt; m.style.display = 'block';
setTimeout(() => m.style.display = 'none', dur);
}
function showCombo(player, count) {
const el = document.getElementById(player === 1 ? 'combo-p1' : 'combo-p2');
el.textContent = count > 1 ? `${count}x COMBO!` : 'HIT!';
el.style.opacity = '1';
clearTimeout(el._t);
el._t = setTimeout(() => el.style.opacity = '0', 800);
}
// ─── Attack ──────────────────────────────────────────────────────
function tryAttack(attacker, defender, num, type) {
const now = Date.now();
if (now - (num === 1 ? lastP1Attack : lastP2Attack) < 350) return;
const dist = Math.abs(attacker.position.x - defender.position.x);
if (dist < (type === 'kick' ? 2.0 : 1.6)) {
let dmg = type === 'kick' ? 12 : 8;
const blocking = num === 1 ? p2Blocking : p1Blocking;
if (blocking) dmg = Math.floor(dmg * 0.2);
if (num === 1) {
p2Health = Math.max(0, p2Health - dmg); p2Combo++; p1Combo = 0;
showCombo(1, p2Combo);
spawnHit(defender.position.clone().add(new THREE.Vector3(0,1.5,0)), 0x4361ee);
} else {
p1Health = Math.max(0, p1Health - dmg); p1Combo++; p2Combo = 0;
showCombo(2, p1Combo);
spawnHit(defender.position.clone().add(new THREE.Vector3(0,1.5,0)), 0xe63946);
}
const dir = attacker.position.x < defender.position.x ? 1 : -1;
if (num === 1) p2Vel.x = dir * 0.12; else p1Vel.x = dir * 0.12;
updateHealthBars(); checkKO();
}
if (num === 1) lastP1Attack = now; else lastP2Attack = now;
}
function checkKO() {
if (p1Health <= 0 || p2Health <= 0) {
gameActive = false; clearInterval(timerInterval);
const w = p1Health > p2Health ? 'PLAYER 1' : 'PLAYER 2';
showMessage('K.O.!', 2000);
setTimeout(() => {
document.getElementById('win-text').textContent = w + ' WINS!';
document.getElementById('win-screen').style.display = 'flex';
}, 800);
}
}
// ─── Init ────────────────────────────────────────────────────────
function initFighters() {
if (p1) scene.remove(p1);
if (p2) scene.remove(p2);
p1 = createFighter(0xe63946, 0x880011);
p1.position.set(-3, 0, 0); scene.add(p1);
p2 = createFighter(0x4361ee, 0x001188);
p2.position.set(3, 0, 0); p2.rotation.y = Math.PI; scene.add(p2);
}
// ─── Update ──────────────────────────────────────────────────────
const SPEED = 0.07, JUMP = 0.18, GRAVITY = 0.012, BOUND = 6.5;
function update() {
if (!gameActive) return;
animTime += 0.08;
p1Blocking = !!vkeys['p1_block'];
if (vkeys['p1_left']) p1Vel.x = -SPEED;
else if (vkeys['p1_right']) p1Vel.x = SPEED;
else p1Vel.x *= 0.7;
if (vkeys['p1_jump'] && p1OnGround) { p1Vel.y = JUMP; p1OnGround = false; }
if (vkeys['p1_punch']) tryAttack(p1, p2, 1, 'punch');
if (vkeys['p1_kick']) tryAttack(p1, p2, 1, 'kick');
p2Blocking = !!vkeys['p2_block'];
if (vkeys['p2_left']) p2Vel.x = -SPEED;
else if (vkeys['p2_right']) p2Vel.x = SPEED;
else p2Vel.x *= 0.7;
if (vkeys['p2_jump'] && p2OnGround) { p2Vel.y = JUMP; p2OnGround = false; }
if (vkeys['p2_punch']) tryAttack(p2, p1, 2, 'punch');
if (vkeys['p2_kick']) tryAttack(p2, p1, 2, 'kick');
p1Vel.y -= GRAVITY; p2Vel.y -= GRAVITY;
p1.position.x += p1Vel.x; p1.position.y += p1Vel.y;
p2.position.x += p2Vel.x; p2.position.y += p2Vel.y;
if (p1.position.y <= 0) { p1.position.y = 0; p1Vel.y = 0; p1OnGround = true; }
if (p2.position.y <= 0) { p2.position.y = 0; p2Vel.y = 0; p2OnGround = true; }
p1.position.x = Math.max(-BOUND, Math.min(BOUND, p1.position.x));
p2.position.x = Math.max(-BOUND, Math.min(BOUND, p2.position.x));
if (p1.position.x < p2.position.x) { p1.rotation.y = 0; p2.rotation.y = Math.PI; }
else { p1.rotation.y = Math.PI; p2.rotation.y = 0; }
if (p1OnGround) p1.children[0].position.y = 1.5 + Math.sin(animTime*2)*0.03;
if (p2OnGround) p2.children[0].position.y = 1.5 + Math.sin(animTime*2+1)*0.03;
if (Math.abs(p1Vel.x) > 0.01 && p1OnGround) {
p1.children[2].rotation.x = Math.sin(animTime*6)*0.5;
p1.children[3].rotation.x = -Math.sin(animTime*6)*0.5;
}
if (Math.abs(p2Vel.x) > 0.01 && p2OnGround) {
p2.children[2].rotation.x = Math.sin(animTime*6)*0.5;
p2.children[3].rotation.x = -Math.sin(animTime*6)*0.5;
}
if (p1.userData.rightArm) p1.userData.rightArm.rotation.z = p1Blocking ? 0.8 : 0;
if (p2.userData.rightArm) p2.userData.rightArm.rotation.z = p2Blocking ? 0.8 : 0;
const midX = (p1.position.x + p2.position.x) / 2;
camera.position.x += (midX * 0.3 - camera.position.x) * 0.05;
const dist = Math.abs(p1.position.x - p2.position.x);
camera.position.z += (10 + dist * 0.5 - camera.position.z) * 0.04;
camera.lookAt(midX, 2, 0);
redLight.position.set(-5 + Math.sin(animTime)*0.5, 3, 3);
blueLight.position.set(5 + Math.cos(animTime)*0.5, 3, 3);
updateParticles();
}
// ─── Timer ───────────────────────────────────────────────────────
function startTimer() {
timerInterval = setInterval(() => {
if (!gameActive) return;
timer--;
document.getElementById('timer-box').textContent = timer;
if (timer <= 10) document.getElementById('timer-box').style.color = '#f72585';
if (timer <= 0) {
gameActive = false; clearInterval(timerInterval);
const w = p1Health > p2Health ? 'PLAYER 1' : p2Health > p1Health ? 'PLAYER 2' : 'DRAW';
setTimeout(() => {
document.getElementById('win-text').textContent = w === 'DRAW' ? 'DRAW!' : w + ' WINS!';
document.getElementById('win-screen').style.display = 'flex';
}, 500);
}
}, 1000);
}
function restartGame() {
p1Health = 100; p2Health = 100; p1Combo = 0; p2Combo = 0;
timer = 99; gameActive = true;
document.getElementById('timer-box').textContent = '99';
document.getElementById('timer-box').style.color = '#fff';
document.getElementById('win-screen').style.display = 'none';
updateHealthBars(); initFighters();
clearInterval(timerInterval); startTimer();
showMessage('FIGHT!', 1200);
}
function animate() {
requestAnimationFrame(animate);
update();
renderer.render(scene, camera);
}
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
initFighters(); updateHealthBars(); startTimer(); showMessage('FIGHT!', 1200); animate();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
2
Domains
142KB
Transfer Size
612KB
Content Size
2,110.0ms
Dom Content Loaded
192.0ms
First Paint
2,111.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...