HTML ad tag preview - Powered by Ad Reform

Live Preview

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

1920x1080

14.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="ar">
<head>
<meta charset="UTF-8">
<title>3D Team Battle Royale</title>
<style>
body{margin:0;overflow:hidden;background:#000;}
canvas{display:block;}

#ui{
position:fixed;
top:10px;left:10px;
color:white;
font-family:sans-serif;
z-index:10;
}

#menu{
position:fixed;inset:0;
background:black;
color:white;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:20;
}

button{
padding:10px 20px;
margin:10px;
border:none;
border-radius:8px;
cursor:pointer;
}
</style>
</head>
<body>

<div id="ui">Loading...</div>

<div id="menu">
<h2>اختر الفريق</h2>
<button onclick="start('red')">🔴 Red Team</button>
<button onclick="start('blue')">🔵 Blue Team</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>

<script>

// 🌍 Scene
const scene=new THREE.Scene();
scene.background=new THREE.Color(0x87ceeb);

// 📷 Camera
const camera=new THREE.PerspectiveCamera(75,innerWidth/innerHeight,0.1,1000);

// 🎮 Renderer
const renderer=new THREE.WebGLRenderer();
renderer.setSize(innerWidth,innerHeight);
document.body.appendChild(renderer.domElement);

// 🌍 LAND (جبال + ماء + بحر)
const ground=new THREE.Mesh(
new THREE.PlaneGeometry(300,300,50,50),
new THREE.MeshBasicMaterial({color:0x2d7a2d,wireframe:false})
);
ground.rotation.x=-Math.PI/2;
scene.add(ground);

// 🌊 ماء (بحر)
const water=new THREE.Mesh(
new THREE.PlaneGeometry(150,150),
new THREE.MeshBasicMaterial({color:0x1e90ff,transparent:true,opacity:0.6})
);
water.rotation.x=-Math.PI/2;
water.position.y=0.1;
scene.add(water);

// 🧱 PLAYER
let player;

// 👥 TEAMS
let enemies=[];
let team="red";

// 🔫 BULLETS
let bullets=[];

// 🔊 SOUND ENGINE
function sound(type){
let ctx=new AudioContext();
let o=ctx.createOscillator();
let g=ctx.createGain();

if(type==="shoot") o.frequency.value=300;
if(type==="drop") o.frequency.value=120;
if(type==="win") o.frequency.value=600;
if(type==="door") o.frequency.value=200;

o.connect(g);g.connect(ctx.destination);
o.start();
o.stop(ctx.currentTime+0.1);
}

// 🪂 DROP
let dropping=true;
let dropY=30;

// START GAME
function start(t){
team=t;
document.getElementById("menu").style.display="none";

// PLAYER
player=new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({color:t==="red"?0xff0000:0x0000ff})
);

player.position.set(0,dropY,0);
scene.add(player);

sound("drop");

// TEAMS AI 👥
for(let i=0;i<12;i++){
let e=new THREE.Mesh(
new THREE.BoxGeometry(2,2,2),
new THREE.MeshBasicMaterial({color:Math.random()>0.5?0xff0000:0x0000ff})
);

e.position.set(Math.random()*80-40,1,Math.random()*80-40);
e.team=Math.random()>0.5?"red":"blue";
e.hp=3;

scene.add(e);
enemies.push(e);
}

loop();
}

// SHOOT 🔫
document.addEventListener("click",()=>{
let b=new THREE.Mesh(
new THREE.SphereGeometry(0.3),
new THREE.MeshBasicMaterial({color:0xffff00})
);

b.position.copy(player.position);
b.dir=new THREE.Vector3(0,0,-1);

scene.add(b);
bullets.push(b);

sound("shoot");
});

// 🤖 AI TEAM SYSTEM
function ai(e){

if(!player) return;

let d=player.position.clone().sub(e.position);
let dist=d.length();

d.normalize();

// fight or move
if(dist<30){
e.position.add(d.multiplyScalar(0.05));
}else{
e.position.add(d.multiplyScalar(0.02));
}

// shoot
if(Math.random()<0.01){
let b=new THREE.Mesh(
new THREE.SphereGeometry(0.25),
new THREE.MeshBasicMaterial({color:0xffffff})
);

b.position.copy(e.position);
b.dir=d.clone();
scene.add(b);
bullets.push(b);
}
}

// UPDATE
function update(){

if(!player) return;

// 🪂 drop
if(dropping){
player.position.y-=0.5;
if(player.position.y<=1){
dropping=false;
sound("door");
}
}

// MOVE
if(keys["w"]) player.position.z-=0.5;
if(keys["s"]) player.position.z+=0.5;
if(keys["a"]) player.position.x-=0.5;
if(keys["d"]) player.position.x+=0.5;

// CAMERA
camera.position.set(player.position.x,10,player.position.z+10);
camera.lookAt(player.position);

// AI
enemies.forEach(ai);

// BULLETS
for(let i=bullets.length-1;i>=0;i--){
let b=bullets[i];
b.position.add(b.dir.clone().multiplyScalar(1));

// hit enemies
for(let j=enemies.length-1;j>=0;j--){
if(b.position.distanceTo(enemies[j].position)<1){
scene.remove(enemies[j]);
enemies.splice(j,1);
scene.remove(b);
bullets.splice(i,1);
break;
}
}
}

// 🏆 WIN CONDITION (team system)
if(enemies.length===0){
sound("win");
alert("🏆 فريقك ربح!");
location.reload();
}

document.getElementById("ui").innerText=
`👥 ${team} | 👾 ${enemies.length}`;
}

// CONTROLS
let keys={};
document.addEventListener("keydown",e=>keys[e.key]=true);
document.addEventListener("keyup",e=>keys[e.key]=false);

// LOOP
function loop(){
update();
renderer.render(scene,camera);
requestAnimationFrame(loop);
}

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

</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

168KB

Transfer Size

660KB

Content Size

364.0ms

Dom Content Loaded

196.0ms

First Paint

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