HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
480x850
142 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">
<title>Colosseum Gunfighter 3D: Ultimate Edition</title>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,user-scalable=no">
<style>
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #0d0906;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .game-container {
    width: 100%;
    height: 100%;
    max-width: 480px;
    max-height: 850px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
    border-radius: 12px;
    overflow: hidden;
    background: #0d0906;
  }
  iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
  }
</style>
</head>
<body>

<div class="game-container">
  <iframe srcdoc='<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colosseum Gunfighter 3D: Pro Edition</title>
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,user-scalable=no">
<style>
:root{--bg:#0d0906;--pan:#1c130d;--gold:#f39c12;--gold2:#d35400;--red:#e74c3c;--txt:#fdf3e7;--mut:#95a5a6;--ok:#2ecc71}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
html,body{height:100%;margin:0;background:var(--bg);overflow:hidden;font-family:Segoe UI, Tahoma, Geneva, Verdana, sans-serif;color:var(--txt);touch-action:none}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
.hide{display:none!important}
.scr{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;
 padding:25px;background:radial-gradient(circle, #2c1d11 0%, #0d0906 100%)}
h1{margin:0;font-size:26px;color:var(--gold);text-shadow:0 3px 6px rgba(0,0,0,0.9);letter-spacing:1px}
p{margin:0;font-size:13px;color:var(--mut);max-width:350px;line-height:1.5}
.btn{background:linear-gradient(to bottom, var(--gold), var(--gold2));color:#fff;border:none;padding:12px 26px;font-size:15px;font-weight:bold;border-radius:8px;cursor:pointer;box-shadow:0 6px 12px rgba(0,0,0,0.5)}
.btn:active{transform:scale(0.95)}
.btn-hard{background:linear-gradient(to bottom, #e74c3c, #c0392b)!important;}
.panel{background:var(--pan);border:2px solid var(--gold);border-radius:12px;padding:15px;width:100%;max-width:350px;max-height:50vh;overflow-y:auto}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:8px}
.card{background:rgba(0,0,0,0.4);border:1px solid var(--mut);border-radius:6px;padding:8px;text-align:center;cursor:pointer;font-size:12px}
.card.selected{border-color:var(--gold);background:rgba(243,156,18,0.2)}
#hud{position:fixed;top:10px;left:10px;right:10px;display:flex;justify-content:space-between;pointer-events:none;z-index:10;font-weight:bold;font-size:13px;text-shadow:0 2px 4px #000}
.bar{width:90px;height:10px;background:#222;border:2px solid #555;border-radius:5px;overflow:hidden;display:inline-block;vertical-align:middle;margin-left:5px}
.fill{height:100%;background:var(--ok);width:100%;transition:width 0.2s ease}
.stats-box{color:var(--gold);font-size:14px;margin-bottom:6px;font-weight:bold}
</style>
<script src="https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.min.js"></script>
</head>
<body>

<div id="hud" class="hide">
  <div><span id="h-mode-lbl">Easy</span> | Boss <span id="h-boss">1</span>/20 | $<span id="h-cash">0</span></div>
  <div>HP: <div class="bar"><div id="h-hp" class="fill"></div></div></div>
</div>

<div id="scr-menu" class="scr">
  <h1>COLOSSEUM 3D</h1>
  <p>Future Epic 3D Battles! Choose your difficulty and conquer 20 Stages.</p>
  <button class="btn" onclick="selectDifficulty('EASY')">PLAY EASY MODE</button>
  <button class="btn btn-hard" onclick="selectDifficulty('HARD')">PLAY HARD MODE</button>
  <button class="btn" onclick="openGarage()" style="background:linear-gradient(to bottom, #444, #222)">GARAGE</button>
</div>

<div id="scr-tut" class="scr hide">
  <h1>HOW TO PLAY</h1>
  <p>• **Boss 1 & 2:** Martial Arts combat!<br>• **Boss 3+:** Auto-firing futuristic weapons!<br>• **Double-tap:** Instant dodge roll.<br>• Scale through 20 intense arenas!</p>
  <button class="btn" onclick="launchGame()">ENTER ARENA</button>
</div>

<div id="scr-garage" class="scr hide">
  <h1>GARAGE</h1>
  <div class="stats-box">Cash: $<span id="g-cash">0</span></div>
  <div class="panel">
    <p style="color:var(--gold);font-weight:bold">Fighter</p>
    <div id="char-list" class="grid"></div>
    <p style="color:var(--gold);font-weight:bold;margin-top:10px">Weapon</p>
    <div id="weapon-list" class="grid"></div>
  </div>
  <button class="btn" onclick="closeGarage()">BACK</button>
</div>

<div id="scr-end" class="scr hide">
  <h1 id="end-title">VICTORY!</h1>
  <p id="end-desc">You conquered all 20 Bosses!</p>
  <button class="btn" onclick="location.reload()">MAIN MENU</button>
</div>

<script>
let scene, camera, renderer;
let playerMesh, bossMesh;
let bullets3D = [], bossBullets3D = [];
let curBossIdx = 0;
let cash = 0, score = 0;
let playerHP = 100, maxPlayerHP = 100;
let gameState = "MENU";
let gameMode = "EASY"; // EASY or HARD

let player = { x: 0, z: 6, radius: 1.2 };
let boss = { x: 0, z: -6, radius: 2.0, hp: 300, maxHp: 300 };

let selectedChar = 0;
let selectedWeapon = 0;

const characters = [
  { name: "Clint", color: 0x8d5524, hpBonus: 0 },
  { name: "Calamity", color: 0xd35400, hpBonus: 30 },
  { name: "Django", color: 0x2c3e50, hpBonus: 60 },
  { name: "Wyatt", color: 0xf1c40f, hpBonus: 100 }
];

const weapons = [
  { name: "Laser Blaster", dmg: 30, rate: 18 },
  { name: "Plasma Shotgun", dmg: 60, rate: 32 },
  { name: "Pulse Rifle", dmg: 40, rate: 7 },
  { name: "Railgun", dmg: 50, rate: 14 }
];
for(let i=5; i<=20; i++) weapons.push({ name: "Mk " + i, dmg: 35 + i*6, rate: Math.max(4, 18 - i) });

function init3D() {
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x0d0906);
  scene.fog = new THREE.FogExp2(0x0d0906, 0.025);

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.set(0, 14, 16);
  camera.lookAt(0, 0, -2);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.shadowMap.enabled = true;
  document.body.appendChild(renderer.domElement);

  const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
  scene.add(ambientLight);

  const dirLight = new THREE.DirectionalLight(0xffeedd, 1.2);
  dirLight.position.set(10, 25, 10);
  scene.add(dirLight);

  const floorGeo = new THREE.CylinderGeometry(16, 16, 0.6, 32);
  const floorMat = new THREE.MeshStandardMaterial({ color: 0x1c130d, roughness: 0.8 });
  const floor = new THREE.Mesh(floorGeo, floorMat);
  floor.position.y = -0.3;
  scene.add(floor);

  // Advanced 3D Player Construct
  const playerGroup = new THREE.Group();
  const bodyGeo = new THREE.CapsuleGeometry(0.6, 1.2, 4, 8);
  const bodyMat = new THREE.MeshStandardMaterial({ color: characters[selectedChar].color, roughness: 0.3, metalness: 0.2 });
  const bodyMesh = new THREE.Mesh(bodyGeo, bodyMat);
  bodyMesh.position.y = 1;
  playerGroup.add(bodyMesh);

  // Head
  const headGeo = new THREE.SphereGeometry(0.35, 12, 12);
  const headMat = new THREE.MeshStandardMaterial({ color: 0xffdbac, roughness: 0.5 });
  const headMesh = new THREE.Mesh(headGeo, headMat);
  headMesh.position.y = 1.9;
  playerGroup.add(headMesh);

  playerMesh = playerGroup;
  playerMesh.position.set(player.x, 0, player.z);
  scene.add(playerMesh);

  createBossMesh();

  window.addEventListener("resize", () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  });
}

function createBossMesh() {
  if(bossMesh) scene.remove(bossMesh);
  
  let multiplier = gameMode === "HARD" ? 1.8 : 1.0;
  let baseHp = (300 + (curBossIdx * 140)) * multiplier;
  if(curBossIdx >= 5) baseHp += (Math.pow(curBossIdx, 2.2) * 300) * multiplier;
  
  boss.maxHp = Math.floor(baseHp);
  boss.hp = boss.maxHp;

  let sizeScale = 1 + (curBossIdx * 0.04);
  const bossGroup = new THREE.Group();

  const bossGeo = new THREE.IcosahedronGeometry(boss.radius * sizeScale, 2);
  const bossMat = new THREE.MeshStandardMaterial({ 
    color: new THREE.Color("hsl(" + (curBossIdx * 18) + ", 90%, 50%)"), 
    roughness: 0.2,
    metalness: 0.6,
    wireframe: false
  });
  const coreMesh = new THREE.Mesh(bossGeo, bossMat);
  coreMesh.position.y = 2;
  bossGroup.add(coreMesh);

  // Glowing rings around advanced boss
  const ringGeo = new THREE.TorusGeometry(boss.radius * sizeScale * 1.3, 0.1, 8, 24);
  const ringMat = new THREE.MeshBasicMaterial({ color: 0xff3333 });
  const ringMesh = new THREE.Mesh(ringGeo, ringMat);
  ringMesh.rotation.x = Math.PI / 2;
  ringMesh.position.y = 2;
  bossGroup.add(ringMesh);

  bossMesh = bossGroup;
  bossMesh.position.set(boss.x, 0, boss.z);
  scene.add(bossMesh);
  document.getElementById("h-boss").innerText = curBossIdx + 1;
}

function selectDifficulty(mode) {
  gameMode = mode;
  document.getElementById("h-mode-lbl").innerText = mode === "HARD" ? "Hard" : "Easy";
  showScreen("scr-tut");
}

function showScreen(id) {
  document.querySelectorAll(".scr").forEach(s => s.classList.add("hide"));
  document.getElementById(id).classList.remove("hide");
}

function launchGame() {
  document.getElementById("hud").classList.remove("hide");
  document.querySelectorAll(".scr").forEach(s => s.classList.add("hide"));
  gameState = "GAME";
  maxPlayerHP = 100 + characters[selectedChar].hpBonus;
  playerHP = maxPlayerHP;
  updateHUD();
  if(!scene) init3D();
}

function openGarage() {
  showScreen("scr-garage");
  document.getElementById("g-cash").innerText = cash;
  renderGarage();
}

function closeGarage() { showScreen("scr-menu"); }

function renderGarage() {
  let cList = document.getElementById("char-list");
  cList.innerHTML = "";
  characters.forEach((c, i) => {
    let div = document.createElement("div");
    div.className = "card " + (selectedChar === i ? "selected" : "");
    div.innerHTML = "<strong>" + c.name + "</strong><br><small style=\"color:var(--ok)\">+" + c.hpBonus + " HP</small>";
    div.onclick = () => { 
      selectedChar = i; 
      renderGarage(); 
    };
    cList.appendChild(div);
  });

  let wList = document.getElementById("weapon-list");
  wList.innerHTML = "";
  if(curBossIdx < 2) {
    wList.innerHTML = "<div style=\"grid-column: span 2; color:var(--mut); font-size:11px;\">Weapons Locked for Boss 1 & 2</div>";
  } else {
    weapons.slice(0, 4).forEach((w, i) => {
      let div = document.createElement("div");
      div.className = "card " + (selectedWeapon === i ? "selected" : "");
      div.innerHTML = "<strong>" + w.name + "</strong><br><small>Dmg: " + w.dmg + "</small>";
      div.onclick = () => { selectedWeapon = i; renderGarage(); };
      wList.appendChild(div);
    });
  }
}

function updateHUD() {
  document.getElementById("h-cash").innerText = cash;
  document.getElementById("h-hp").style.width = Math.max(0, (playerHP / maxPlayerHP) * 100) + "%";
}

let isTouching = false, pointerX = 0, pointerY = 0, lastTapTime = 0, playerIsDodging = false, dodgeTimer = 0;

window.addEventListener("pointerdown", e => {
  if(gameState !== "GAME") return;
  let now = Date.now();
  if(now - lastTapTime < 350) { playerIsDodging = true; dodgeTimer = 40; }
  lastTapTime = now;
  isTouching = true;
  pointerX = (e.clientX / window.innerWidth) * 2 - 1;
  pointerY = -(e.clientY / window.innerHeight) * 2 + 1;

  if(curBossIdx < 2) {
    let dist = Math.hypot(player.x - boss.x, player.z - boss.z);
    if(dist < 5.5) { boss.hp -= (gameMode === "HARD" ? 30 : 45); checkBossWin(); }
  }
});

window.addEventListener("pointermove", e => {
  if(!isTouching || gameState !== "GAME") return;
  pointerX = (e.clientX / window.innerWidth) * 2 - 1;
  pointerY = -(e.clientY / window.innerHeight) * 2 + 1;
});
window.addEventListener("pointerup", () => { isTouching = false; });

let fireCooldown = 0;
function updateGame() {
  if(gameState !== "GAME") return;

  if(playerIsDodging) {
    dodgeTimer--;
    if(dodgeTimer <= 0) playerIsDodging = false;
  }

  if(isTouching) {
    player.x += pointerX * 0.12;
    player.z -= pointerY * 0.12;
    player.x = Math.max(-11, Math.min(11, player.x));
    player.z = Math.max(2, Math.min(11, player.z));
    playerMesh.position.set(player.x, 0, player.z);
  }

  if(curBossIdx >= 2) {
    fireCooldown++;
    let w = weapons[selectedWeapon];
    if(fireCooldown >= w.rate) {
      fireCooldown = 0;
      const bulletGeo = new THREE.SphereGeometry(0.2, 8, 8);
      const bulletMat = new THREE.MeshBasicMaterial({ color: 0x00ffcc });
      const bMesh = new THREE.Mesh(bulletGeo, bulletMat);
      bMesh.position.set(player.x, 1, player.z - 1);
      scene.add(bMesh);
      bullets3D.push({ mesh: bMesh, dmg: w.dmg });
    }
  }

  bullets3D.forEach((b, idx) => {
    b.mesh.position.z -= 0.7;
    let dist = Math.hypot(b.mesh.position.x - boss.x, b.mesh.position.z - boss.z);
    if(dist < 2.6) {
      boss.hp -= b.dmg;
      scene.remove(b.mesh);
      bullets3D.splice(idx, 1);
      checkBossWin();
    } else if(b.mesh.position.z < -22) {
      scene.remove(b.mesh);
      bullets3D.splice(idx, 1);
    }
  });

  let attackChance = gameMode === "HARD" ? 0.07 : 0.04;
  if(Math.random() < attackChance + (curBossIdx * 0.003)) {
    const bGeo = new THREE.SphereGeometry(0.45, 8, 8);
    const bMat = new THREE.MeshBasicMaterial({ color: 0xff3333 });
    const bm = new THREE.Mesh(bGeo, bMat);
    bm.position.set(boss.x, 2, boss.z);
    let angle = Math.atan2(player.x - boss.x, player.z - boss.z);
    let speed = gameMode === "HARD" ? 0.32 : 0.25;
    bossBullets3D.push({ mesh: bm, vx: Math.sin(angle)*speed, vz: Math.cos(angle)*speed });
    scene.add(bm);
  }

  bossBullets3D.forEach((b, idx) => {
    b.mesh.position.x += b.vx;
    b.mesh.position.z += b.vz;
    let dist = Math.hypot(b.mesh.position.x - player.x, b.mesh.position.z - player.z);
    if(dist < 1.6) {
      scene.remove(b.mesh);
      bossBullets3D.splice(idx, 1);
      if(!playerIsDodging) {
        let dmgAmount = gameMode === "HARD" ? 25 : 15;
        playerHP -= dmgAmount;
        updateHUD();
        if(playerHP <= 0) {
          gameState = "END";
          document.getElementById("hud").classList.add("hide");
          document.getElementById("end-title").innerText = "DEFEATED";
          document.getElementById("end-desc").innerText = "Mode: " + gameMode + " | Reached Boss " + (curBossIdx + 1) + "/20. Cash: $" + cash;
          showScreen("scr-end");
        }
      }
    }
  });
}

function checkBossWin() {
  if(boss.hp <= 0) {
    cash += gameMode === "HARD" ? 200 : 120;
    score += 1000 + (curBossIdx * 250);
    curBossIdx++;
    updateHUD();
    if(curBossIdx >= 20) {
      gameState = "END";
      document.getElementById("hud").classList.add("hide");
      document.getElementById("end-title").innerText = "VICTORY!";
      document.getElementById("end-desc").innerText = "Beaten all 20 Bosses on " + gameMode + " mode! Total Cash: $" + cash;
      showScreen("scr-end");
    } else {
      createBossMesh();
    }
  }
}

function animate() {
  requestAnimationFrame(animate);
  if(gameState === "GAME") {
    updateGame();
    if(bossMesh) {
      bossMesh.position.y = Math.sin(Date.now() * 0.005) * 0.4;
      bossMesh.rotation.y += 0.02;
    }
  }
  if(renderer && scene && camera) renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>'></iframe>
</div>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
170KB
Transfer Size
635KB
Content Size
104.0ms
Dom Content Loaded
144.0ms
First Paint
260.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