Colosseum Gunfighter 3D: Ultimate Edition
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>'>