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="ar">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>لعبة قتال مطورة 2</title>
<style>
body{
margin:0;
overflow:hidden;
background:linear-gradient(135deg,#0f2027,#203a43,#2c5364);
touch-action:none;
font-family:sans-serif;
}
canvas{display:block;}
#ui{
position:fixed;
top:10px;
left:10px;
color:white;
font-size:18px;
z-index:10;
}
#joystickBase{
position:fixed;
bottom:60px;
left:60px;
width:120px;
height:120px;
background:rgba(255,255,255,0.1);
border-radius:50%;
}
#joystick{
position:absolute;
width:50px;
height:50px;
background:#00e5ff;
border-radius:50%;
left:35px;
top:35px;
}
</style>
</head>
<body>
<div id="ui">النقاط: 0 | الصحة: 100</div>
<div id="joystickBase">
<div id="joystick"></div>
</div>
<canvas id="game"></canvas>
<script>
const canvas=document.getElementById("game");
const ctx=canvas.getContext("2d");
let W,H;
function resize(){
W=canvas.width=innerWidth*devicePixelRatio;
H=canvas.height=innerHeight*devicePixelRatio;
}
resize();
addEventListener("resize",resize);
let ui=document.getElementById("ui");
// PLAYER
let player={x:200,y:200,r:15,health:100};
// GAME DATA
let bullets=[];
let enemies=[];
let particles=[];
let score=0;
// SCREEN SHAKE
let shake=0;
// JOYSTICK
let joy={x:0,y:0,active:false};
// joystick control
const base=document.getElementById("joystickBase");
const stick=document.getElementById("joystick");
base.addEventListener("touchmove",e=>{
let t=e.touches[0];
let rect=base.getBoundingClientRect();
let dx=t.clientX-rect.left-60;
let dy=t.clientY-rect.top-60;
let dist=Math.sqrt(dx*dx+dy*dy);
let max=50;
if(dist>max){
dx=dx/dist*max;
dy=dy/dist*max;
}
stick.style.transform=`translate(${dx}px,${dy}px)`;
joy.x=dx/max;
joy.y=dy/max;
joy.active=true;
});
base.addEventListener("touchend",()=>{
stick.style.transform="translate(0px,0px)";
joy={x:0,y:0,active:false};
});
// SHOOT AUTO
setInterval(()=>{
if(!joy.active) return;
bullets.push({
x:player.x,
y:player.y,
vx:joy.x*10,
vy:joy.y*10,
r:5
});
},150);
// ENEMIES
setInterval(()=>{
let type=Math.random();
enemies.push({
x:Math.random()*W,
y:-20,
r: type>0.7 ? 25 : 18,
speed: type>0.7 ? 3 : 1.8,
hp: type>0.7 ? 3 : 1,
color: type>0.7 ? "#ff9800" : "#ff4d4d"
});
},700);
// PARTICLES (explosion)
function explosion(x,y){
for(let i=0;i<8;i++){
particles.push({
x,y,
vx:(Math.random()-0.5)*6,
vy:(Math.random()-0.5)*6,
life:20
});
}
shake=10;
}
// UPDATE
function update(){
// PLAYER MOVE
player.x+=joy.x*6;
player.y+=joy.y*6;
// BULLETS
for(let i=bullets.length-1;i>=0;i--){
let b=bullets[i];
b.x+=b.vx;
b.y+=b.vy;
if(b.x<0||b.x>W||b.y<0||b.y>H) bullets.splice(i,1);
}
// ENEMIES
for(let i=enemies.length-1;i>=0;i--){
let e=enemies[i];
let dx=player.x-e.x;
let dy=player.y-e.y;
let dist=Math.sqrt(dx*dx+dy*dy)||1;
e.x+=(dx/dist)*e.speed;
e.y+=(dy/dist)*e.speed;
// hit player
if(dist<e.r+player.r){
player.health-=2;
shake=5;
if(player.health<=0){
alert("💀 Game Over | Score: "+score);
location.reload();
}
}
// bullets hit
for(let j=bullets.length-1;j>=0;j--){
let b=bullets[j];
let dx2=e.x-b.x;
let dy2=e.y-b.y;
if(Math.sqrt(dx2*dx2+dy2*dy2)<e.r){
e.hp--;
bullets.splice(j,1);
if(e.hp<=0){
enemies.splice(i,1);
score++;
explosion(e.x,e.y);
}
break;
}
}
}
// particles
for(let i=particles.length-1;i>=0;i--){
let p=particles[i];
p.x+=p.vx;
p.y+=p.vy;
p.life--;
if(p.life<=0) particles.splice(i,1);
}
ui.innerText=`النقاط: ${score} | الصحة: ${player.health}`;
}
// DRAW
function draw(){
ctx.clearRect(0,0,W,H);
// shake effect
let sx=(Math.random()-0.5)*shake;
let sy=(Math.random()-0.5)*shake;
shake*=0.9;
if(shake<0.1) shake=0;
ctx.save();
ctx.translate(sx,sy);
// PLAYER
ctx.fillStyle="#00e5ff";
ctx.beginPath();
ctx.arc(player.x,player.y,player.r,0,Math.PI*2);
ctx.fill();
// BULLETS
ctx.fillStyle="yellow";
bullets.forEach(b=>{
ctx.beginPath();
ctx.arc(b.x,b.y,b.r,0,Math.PI*2);
ctx.fill();
});
// ENEMIES
enemies.forEach(e=>{
ctx.fillStyle=e.color;
ctx.beginPath();
ctx.rect(e.x,e.y,e.r,e.r);
ctx.fill();
});
// PARTICLES
particles.forEach(p=>{
ctx.fillStyle="white";
ctx.fillRect(p.x,p.y,3,3);
});
ctx.restore();
}
function loop(){
update();
draw();
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
5KB
Transfer Size
5KB
Content Size
207.0ms
Dom Content Loaded
292.0ms
First Paint
208.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...