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="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mini PUBG 2D</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #222;
color: white;
font-family: Arial, sans-serif;
overflow: hidden;
touch-action: none;
}
#ui {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
z-index: 10;
font-weight: bold;
text-shadow: 2px 2px 4px #000;
}
canvas {
display: block;
background: #4a752c; /* Grass color like Erangel */
}
#gameOverScreen {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: rgba(0,0,0,0.8);
padding: 30px;
border-radius: 10px;
border: 2px solid #ff4444;
}
button {
padding: 10px 20px;
font-size: 18px;
background: #ff4444;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
margin-top: 15px;
}
</style>
</head>
<body>
<div id="ui">
🔫 Kills: <span id="score">0</span> | ❤️ HP: <span id="hp">100</span>
</div>
<div id="gameOverScreen">
<h1 style="color: #ff4444; margin: 0;">BETTER LUCKY NEXT TIME!</h1>
<p style="font-size: 18px; margin: 10px 0;">Winner Winner Chicken Dinner नहीं मिल पाया।</p>
<p>Your Kills: <span id="finalScore">0</span></p>
<button onclick="resetGame()">Play Again</button>
</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Canvas Size Setup
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
// Game Variables
let player = { x: canvas.width/2, y: canvas.height/2, radius: 20, color: '#2ecc71', hp: 100 };
let bullets = [];
let enemies = [];
let score = 0;
let gameOver = false;
let enemySpawnTimer = 0;
// Controls for Mobile and Desktop
let touchX = 0;
let touchY = 0;
window.addEventListener('pointerdown', (e) => {
if (gameOver) return;
shoot(e.clientX, e.clientY);
});
function shoot(targetX, targetY) {
let angle = Math.atan2(targetY - player.y, targetX - player.x);
bullets.push({
x: player.x,
y: player.y,
radius: 5,
color: '#f1c40f',
velocity: { x: Math.cos(angle) * 8, y: Math.sin(angle) * 8 }
});
}
function spawnEnemy() {
let x, y;
if (Math.random() < 0.5) {
x = Math.random() < 0.5 ? 0 - 30 : canvas.width + 30;
y = Math.random() * canvas.height;
} else {
x = Math.random() * canvas.width;
y = Math.random() < 0.5 ? 0 - 30 : canvas.height + 30;
}
enemies.push({
x: x,
y: y,
radius: 18,
color: '#e74c3c',
speed: 1.5 + Math.random() * 1.5
});
}
function resetGame() {
player.hp = 100;
player.x = canvas.width / 2;
player.y = canvas.height / 2;
bullets = [];
enemies = [];
score = 0;
gameOver = false;
document.getElementById("gameOverScreen").style.display = "none";
document.getElementById("score").innerText = score;
document.getElementById("hp").innerText = player.hp;
animate();
}
// Game Loop
function animate() {
if (gameOver) return;
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Player (Safe Zone Survivor)
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fillStyle = player.color;
ctx.fill();
ctx.closePath();
// Spawn Enemies
enemySpawnTimer++;
if (enemySpawnTimer % 60 === 0) {
spawnEnemy();
}
// Update & Draw Bullets
bullets.forEach((bullet, bIndex) => {
bullet.x += bullet.velocity.x;
bullet.y += bullet.velocity.y;
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
ctx.fillStyle = bullet.color;
ctx.fill();
ctx.closePath();
// Delete out of bounds bullets
if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
bullets.splice(bIndex, 1);
}
});
// Update & Draw Enemies
enemies.forEach((enemy, eIndex) => {
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;
ctx.beginPath();
ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
ctx.fillStyle = enemy.color;
ctx.fill();
ctx.closePath();
// Collision: Enemy touches Player
let distToPlayer = Math.hypot(player.x - enemy.x, player.y - enemy.y);
if (distToPlayer - enemy.radius - player.radius < 1) {
enemies.splice(eIndex, 1);
player.hp -= 20;
document.getElementById("hp").innerText = player.hp;
if (player.hp <= 0) {
gameOver = true;
document.getElementById("finalScore").innerText = score;
document.getElementById("gameOverScreen").style.display = "block";
}
}
// Collision: Bullet hits Enemy
bullets.forEach((bullet, bIndex) => {
let distToBullet = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
if (distToBullet - enemy.radius - bullet.radius < 1) {
enemies.splice(eIndex, 1);
bullets.splice(bIndex, 1);
score += 1;
document.getElementById("score").innerText = score;
}
});
});
}
window.addEventListener('resize', resizeCanvas);
animate();
</script>
</body>
</html><!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Mini PUBG 2D</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #222;
color: white;
font-family: Arial, sans-serif;
overflow: hidden;
touch-action: none;
}
#ui {
position: absolute;
top: 10px;
left: 10px;
font-size: 20px;
z-index: 10;
font-weight: bold;
text-shadow: 2px 2px 4px #000;
}
canvas {
display: block;
background: #4a752c; /* Grass color like Erangel */
}
#gameOverScreen {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
background: rgba(0,0,0,0.8);
padding: 30px;
border-radius: 10px;
border: 2px solid #ff4444;
}
button {
padding: 10px 20px;
font-size: 18px;
background: #ff4444;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
margin-top: 15px;
}
</style>
</head>
<body>
<div id="ui">
🔫 Kills: <span id="score">0</span> | ❤️ HP: <span id="hp">100</span>
</div>
<div id="gameOverScreen">
<h1 style="color: #ff4444; margin: 0;">BETTER LUCKY NEXT TIME!</h1>
<p style="font-size: 18px; margin: 10px 0;">Winner Winner Chicken Dinner नहीं मिल पाया।</p>
<p>Your Kills: <span id="finalScore">0</span></p>
<button onclick="resetGame()">Play Again</button>
</div>
<canvas id="gameCanvas"></canvas>
<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
// Canvas Size Setup
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
resizeCanvas();
// Game Variables
let player = { x: canvas.width/2, y: canvas.height/2, radius: 20, color: '#2ecc71', hp: 100 };
let bullets = [];
let enemies = [];
let score = 0;
let gameOver = false;
let enemySpawnTimer = 0;
// Controls for Mobile and Desktop
let touchX = 0;
let touchY = 0;
window.addEventListener('pointerdown', (e) => {
if (gameOver) return;
shoot(e.clientX, e.clientY);
});
function shoot(targetX, targetY) {
let angle = Math.atan2(targetY - player.y, targetX - player.x);
bullets.push({
x: player.x,
y: player.y,
radius: 5,
color: '#f1c40f',
velocity: { x: Math.cos(angle) * 8, y: Math.sin(angle) * 8 }
});
}
function spawnEnemy() {
let x, y;
if (Math.random() < 0.5) {
x = Math.random() < 0.5 ? 0 - 30 : canvas.width + 30;
y = Math.random() * canvas.height;
} else {
x = Math.random() * canvas.width;
y = Math.random() < 0.5 ? 0 - 30 : canvas.height + 30;
}
enemies.push({
x: x,
y: y,
radius: 18,
color: '#e74c3c',
speed: 1.5 + Math.random() * 1.5
});
}
function resetGame() {
player.hp = 100;
player.x = canvas.width / 2;
player.y = canvas.height / 2;
bullets = [];
enemies = [];
score = 0;
gameOver = false;
document.getElementById("gameOverScreen").style.display = "none";
document.getElementById("score").innerText = score;
document.getElementById("hp").innerText = player.hp;
animate();
}
// Game Loop
function animate() {
if (gameOver) return;
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw Player (Safe Zone Survivor)
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fillStyle = player.color;
ctx.fill();
ctx.closePath();
// Spawn Enemies
enemySpawnTimer++;
if (enemySpawnTimer % 60 === 0) {
spawnEnemy();
}
// Update & Draw Bullets
bullets.forEach((bullet, bIndex) => {
bullet.x += bullet.velocity.x;
bullet.y += bullet.velocity.y;
ctx.beginPath();
ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI * 2);
ctx.fillStyle = bullet.color;
ctx.fill();
ctx.closePath();
// Delete out of bounds bullets
if (bullet.x < 0 || bullet.x > canvas.width || bullet.y < 0 || bullet.y > canvas.height) {
bullets.splice(bIndex, 1);
}
});
// Update & Draw Enemies
enemies.forEach((enemy, eIndex) => {
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;
ctx.beginPath();
ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI * 2);
ctx.fillStyle = enemy.color;
ctx.fill();
ctx.closePath();
// Collision: Enemy touches Player
let distToPlayer = Math.hypot(player.x - enemy.x, player.y - enemy.y);
if (distToPlayer - enemy.radius - player.radius < 1) {
enemies.splice(eIndex, 1);
player.hp -= 20;
document.getElementById("hp").innerText = player.hp;
if (player.hp <= 0) {
gameOver = true;
document.getElementById("finalScore").innerText = score;
document.getElementById("gameOverScreen").style.display = "block";
}
}
// Collision: Bullet hits Enemy
bullets.forEach((bullet, bIndex) => {
let distToBullet = Math.hypot(bullet.x - enemy.x, bullet.y - enemy.y);
if (distToBullet - enemy.radius - bullet.radius < 1) {
enemies.splice(eIndex, 1);
bullets.splice(bIndex, 1);
score += 1;
document.getElementById("score").innerText = score;
}
});
});
}
window.addEventListener('resize', resizeCanvas);
animate();
</script>
</body>
</html>canvas.height/2,dglLanding Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
15KB
Transfer Size
15KB
Content Size
160.0ms
Dom Content Loaded
196.0ms
First Paint
198.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...