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="ur">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🔫 پبلگ اسٹائل - جنگ کی دہاڑ</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
body {
background: #0a0f1e;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Segoe UI', system-ui, sans-serif;
padding: 10px;
}
.game-wrapper {
background: linear-gradient(145deg, #1a2639, #0f172a);
padding: 20px;
border-radius: 40px;
box-shadow: 0 30px 40px rgba(0, 0, 0, 0.8), inset 0 0 30px #00a8ff;
border: 3px solid #00d4ff;
max-width: 1200px;
width: 100%;
}
canvas {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
background: radial-gradient(circle at 20% 30%, #2f4f4f, #1a2f2f);
border-radius: 30px;
box-shadow: inset 0 0 50px #000, 0 20px 30px black;
border: 3px solid cyan;
cursor: crosshair;
}
.hud {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: #0f1a1f;
border-radius: 100px;
margin: 15px 0 20px;
border: 2px solid cyan;
box-shadow: 0 8px 0 #004466;
}
.player-stats {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.stat-box {
background: #000c12;
padding: 12px 30px;
border-radius: 50px;
border: 2px solid #00ffff;
display: flex;
align-items: center;
gap: 15px;
box-shadow: 0 5px 0 #006688;
}
.stat-icon {
font-size: 28px;
}
.stat-value {
color: #00ffff;
font-size: 28px;
font-weight: 900;
text-shadow: 0 0 15px cyan;
}
.health-bar {
width: 200px;
height: 25px;
background: #2a0000;
border-radius: 30px;
border: 3px solid #ff4444;
overflow: hidden;
}
.health-fill {
height: 100%;
width: 100%;
background: linear-gradient(90deg, #ff6666, #ff0000);
box-shadow: 0 0 30px red;
}
.controls-bar {
display: flex;
gap: 15px;
flex-wrap: wrap;
justify-content: center;
padding: 15px;
background: #0e1a26;
border-radius: 60px;
margin-top: 15px;
border: 2px solid cyan;
}
.key-hint {
background: #001a1a;
padding: 10px 25px;
border-radius: 40px;
border: 2px solid cyan;
color: cyan;
font-size: 22px;
font-weight: bold;
display: flex;
align-items: center;
gap: 15px;
}
.key {
background: #000;
padding: 10px 20px;
border-radius: 20px;
font-size: 28px;
font-weight: 900;
color: #ffaa00;
border: 2px solid gold;
box-shadow: 0 4px 0 gold;
min-width: 70px;
text-align: center;
}
.kill-message {
font-size: 40px;
font-weight: 900;
text-align: center;
color: #ffaa00;
text-shadow: 0 0 30px red, 4px 4px 0 darkred;
margin: 10px 0;
min-height: 70px;
}
.reset-game {
background: linear-gradient(145deg, cyan, #0066ff);
border: none;
font-size: 32px;
font-weight: 900;
padding: 20px 50px;
border-radius: 80px;
color: black;
border: 3px solid white;
box-shadow: 0 12px 0 #003377, 0 0 50px cyan;
cursor: pointer;
width: 100%;
transition: 0.1s;
}
.reset-game:active {
transform: translateY(8px);
box-shadow: 0 4px 0 #003377;
}
.ammo-box {
background: #000;
padding: 12px 35px;
border-radius: 40px;
border: 3px solid cyan;
font-size: 32px;
font-weight: 900;
color: cyan;
}
</style>
</head>
<body>
<div class="game-wrapper">
<canvas id="gameCanvas" width="1000" height="550"></canvas>
<div class="hud">
<div class="player-stats">
<div class="stat-box">
<span class="stat-icon">❤️</span>
<span class="stat-value" id="playerHp">100</span>
</div>
<div class="health-bar">
<div id="playerHealthFill" class="health-fill" style="width: 100%"></div>
</div>
</div>
<div class="ammo-box" id="ammoDisplay">
🔫 30/30
</div>
<div class="stat-box">
<span class="stat-icon">💀</span>
<span class="stat-value" id="killCount">0</span>
</div>
</div>
<div class="kill-message" id="killMessage"></div>
<div class="controls-bar">
<div class="key-hint">
<span class="key">W</span>
<span>A</span>
<span class="key">S</span>
<span>D</span>
<span style="margin-left:15px;">چلیں</span>
</div>
<div class="key-hint">
<span class="key">🖱️</span>
<span>بائیں کلک - فائر</span>
</div>
<div class="key-hint">
<span class="key">R</span>
<span>لوڈ کریں</span>
</div>
</div>
<button class="reset-game" onclick="resetGame()">💣 نیا میچ شروع کریں</button>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// پلیئر آبجیکٹ
let player = {
x: 500,
y: 400,
radius: 20,
health: 100,
maxHealth: 100,
speed: 5,
alive: true
};
// گولیاں
let bullets = [];
let enemyBullets = [];
// دشمن
let enemies = [];
// اسکور
let kills = 0;
// گولیوں کی تعداد
let ammo = 30;
let maxAmmo = 30;
let reloading = false;
let reloadTime = 0;
// کنٹرولز
let keys = {
'w': false,
'a': false,
's': false,
'd': false
};
// ماؤس پوزیشن
let mouseX = 500, mouseY = 300;
// گیم اسٹیٹ
let gameActive = true;
// کی بورڈ ایونٹس
window.addEventListener('keydown', (e) => {
if (!gameActive || player.health <= 0) return;
let key = e.key.toLowerCase();
if (key === 'w' || key === 'a' || key === 's' || key === 'd') {
keys[key] = true;
}
// R دبانے سے گولیاں لوڈ
if (key === 'r' && !reloading && ammo < maxAmmo) {
reloading = true;
reloadTime = 40; // 2 سیکنڈ (60fps پر)
setTimeout(() => {
ammo = maxAmmo;
reloading = false;
updateAmmoDisplay();
}, 1000);
}
});
window.addEventListener('keyup', (e) => {
let key = e.key.toLowerCase();
if (key === 'w' || key === 'a' || key === 's' || key === 'd') {
keys[key] = false;
}
});
// ماؤس موومنٹ
canvas.addEventListener('mousemove', (e) => {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
mouseX = (e.clientX - rect.left) * scaleX;
mouseY = (e.clientY - rect.top) * scaleY;
});
// فائرنگ
canvas.addEventListener('mousedown', (e) => {
e.preventDefault();
if (!gameActive || player.health <= 0) return;
if (e.button === 0) { // بائیں کلک
if (ammo > 0 && !reloading) {
// گولی چلانا
let angle = Math.atan2(mouseY - player.y, mouseX - player.x);
bullets.push({
x: player.x,
y: player.y,
vx: Math.cos(angle) * 15,
vy: Math.sin(angle) * 15,
radius: 5,
active: true
});
ammo--;
updateAmmoDisplay();
// گولی کی آواز
createExplosion(player.x, player.y, 10);
}
}
});
function updateAmmoDisplay() {
document.getElementById('ammoDisplay').innerHTML = `🔫 ${ammo}/${maxAmmo}`;
}
function updateHealth() {
document.getElementById('playerHp').innerText = Math.max(0, player.health);
document.getElementById('playerHealthFill').style.width = Math.max(0, (player.health / player.maxHealth) * 100) + '%';
}
// دشمن بنانا
function spawnEnemy() {
if (!gameActive) return;
let side = Math.floor(Math.random() * 4);
let x, y;
switch(side) {
case 0: x = Math.random() * canvas.width; y = -30; break;
case 1: x = canvas.width + 30; y = Math.random() * canvas.height; break;
case 2: x = Math.random() * canvas.width; y = canvas.height + 30; break;
case 3: x = -30; y = Math.random() * canvas.height; break;
}
enemies.push({
x: x,
y: y,
radius: 18,
health: 100,
maxHealth: 100,
speed: 2 + Math.random() * 2,
type: Math.floor(Math.random() * 3),
attackCooldown: 0
});
}
// پھٹنے کا اثر
function createExplosion(x, y, size) {
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2);
ctx.fillStyle = 'orange';
ctx.shadowBlur = 30;
ctx.shadowColor = 'red';
ctx.fill();
setTimeout(() => {
ctx.shadowBlur = 0;
}, 50);
}
// گیم ری سیٹ
window.resetGame = function() {
player = {
x: 500,
y: 400,
radius: 20,
health: 100,
maxHealth: 100,
speed: 5,
alive: true
};
bullets = [];
enemyBullets = [];
enemies = [];
kills = 0;
ammo = 30;
reloading = false;
gameActive = true;
player.health = 100;
document.getElementById('killCount').innerText = '0';
document.getElementById('killMessage').innerText = '';
updateHealth();
updateAmmoDisplay();
// کچھ دشمن بنا دو
for (let i = 0; i < 3; i++) {
spawnEnemy();
}
};
// گولیوں سے ٹکراؤ
function checkCollisions() {
for (let i = bullets.length - 1; i >= 0; i--) {
let bullet = bullets[i];
for (let j = enemies.length - 1; j >= 0; j--) {
let enemy = enemies[j];
let dx = bullet.x - enemy.x;
let dy = bullet.y - enemy.y;
let dist = Math.sqrt(dx * dx + dy * dy);
if (dist < bullet.radius + enemy.radius) {
// دشمن کو نقصان
enemy.health -= 34;
if (enemy.health <= 0) {
// دشمن مر گیا
enemies.splice(j, 1);
kills++;
document.getElementById('killCount').innerText = kills;
document.getElementById('killMessage').innerText = '🎯 دشمن ہلاک! +100 پوائنٹ';
createExplosion(enemy.x, enemy.y, 40);
// نیا دشمن بنا دو
spawnEnemy();
setTimeout(() => {
document.getElementById('killMessage').innerText = '';
}, 1000);
}
bullets.splice(i, 1);
createExplosion(bullet.x, bullet.y, 15);
break;
}
}
}
// دشمنوں کی گولیاں پلیئر کو لگیں
for (let i = enemyBullets.length - 1; i >= 0; i--) {
let bullet = enemyBullets[i];
let dx = bullet.x - player.x;
let dy = bullet.y - player.y;
let dist = Math.sqrt(dx * dx + dy * dy);
if (dist < bullet.radius + player.radius) {
player.health -= 15;
enemyBullets.splice(i, 1);
updateHealth();
createExplosion(player.x, player.y, 20);
if (player.health <= 0) {
gameActive = false;
document.getElementById('killMessage').innerText = '💀 تم ہار گئے! نیا میچ کھیلیں 💀';
}
}
}
}
// گیم لوپ
function gameLoop() {
// کینوس صاف کریں
ctx.clearRect(0, 0, canvas.width, canvas.height);
// پس منظر (جنگل)
ctx.fillStyle = '#1a3a1a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// درخت
for (let i = 0; i < 15; i++) {
ctx.fillStyle = '#2d5a2d';
ctx.beginPath();
ctx.arc(50 + i * 70, 500 - Math.sin(i) * 30, 20, 0, Math.PI * 2);
ctx.fill();
}
if (gameActive && player.health > 0) {
// پلیئر کی حرکت
if (keys['w']) player.y = Math.max(player.radius, player.y - player.speed);
if (keys['s']) player.y = Math.min(canvas.height - player.radius, player.y + player.speed);
if (keys['a']) player.x = Math.max(player.radius, player.x - player.speed);
if (keys['d']) player.x = Math.min(canvas.width - player.radius, player.x + player.speed);
// دشمنوں کی حرکت
for (let enemy of enemies) {
// پلیئر کی طرف بڑھیں
let angle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
enemy.x += Math.cos(angle) * enemy.speed;
enemy.y += Math.sin(angle) * enemy.speed;
// دشمن فائر کرے
enemy.attackCooldown--;
if (enemy.attackCooldown <= 0 && Math.random() < 0.02) {
let bulletAngle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
enemyBullets.push({
x: enemy.x,
y: enemy.y,
vx: Math.cos(bulletAngle) * 8,
vy: Math.sin(bulletAngle) * 8,
radius: 4,
active: true
});
enemy.attackCooldown = 50;
}
}
// گولیوں کو اپڈیٹ کریں
for (let bullet of bullets) {
bullet.x += bullet.vx;
bullet.y += bullet.vy;
// باہر چلی گئی تو ہٹا دو
if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
bullet.active = false;
}
}
for (let bullet of enemyBullets) {
bullet.x += bullet.vx;
bullet.y += bullet.vy;
if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
bullet.active = false;
}
}
// غیر فعال گولیاں ہٹائیں
bullets = bullets.filter(b => b.active !== false);
enemyBullets = enemyBullets.filter(b => b.active !== false);
// ٹکراؤ چیک کریں
checkCollisions();
// نئے دشمن
if (enemies.length < 5 && Math.random() < 0.02) {
spawnEnemy();
}
}
// پلیئر ڈرا کریں
ctx.shadowBlur = 30;
ctx.shadowColor = 'cyan';
// پلیئر باڈی
ctx.fillStyle = player.health > 0 ? '#00ffff' : '#888';
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fill();
// پلیئر کی بندوق
ctx.strokeStyle = 'gold';
ctx.lineWidth = 8;
ctx.beginPath();
ctx.moveTo(player.x, player.y);
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
// گولیاں
ctx.fillStyle = 'yellow';
for (let bullet of bullets) {
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
ctx.fill();
}
// دشمن
for (let enemy of enemies) {
ctx.fillStyle = enemy.type === 0 ? 'red' : (enemy.type === 1 ? 'purple' : 'darkred');
ctx.shadowColor = 'red';
ctx.beginPath();
ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
ctx.fill();
// دشمن کی ہیلتھ
ctx.fillStyle = 'green';
ctx.fillRect(enemy.x - 20, enemy.y - 30, 40 * (enemy.health / 100), 5);
}
// دشمن کی گولیاں
ctx.fillStyle = '#ff4444';
for (let bullet of enemyBullets) {
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
ctx.fill();
}
ctx.shadowBlur = 0;
requestAnimationFrame(gameLoop);
}
// گیم شروع کریں
resetGame();
gameLoop();
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
21KB
Transfer Size
21KB
Content Size
128.0ms
Dom Content Loaded
400.0ms
First Paint
128.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...