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>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>GTA: Pixel City - Android Game</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
user-select: none;
}
body {
background: #0a0a0a;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Arial', sans-serif;
touch-action: manipulation;
}
#gameContainer {
background: #1a1a1a;
border-radius: 20px;
padding: 10px;
box-shadow: 0 10px 30px rgba(0,200,255,0.2);
border: 2px solid #00ffff33;
}
canvas {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
max-width: 400px;
border-radius: 15px;
background: #2a2a2a;
touch-action: none;
border: 2px solid #00ffff;
}
#hud {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
color: white;
text-shadow: 2px 2px 4px rgba(0,255,255,0.5);
font-weight: bold;
}
.stats {
display: flex;
gap: 20px;
}
.stat {
background: rgba(0,0,0,0.7);
padding: 8px 15px;
border-radius: 20px;
border: 1px solid #00ffff;
color: #00ffff;
font-size: 16px;
}
#controls {
display: flex;
justify-content: space-between;
padding: 10px;
gap: 10px;
}
.control-panel {
background: rgba(0,0,0,0.8);
border-radius: 60px;
padding: 10px;
border: 2px solid #00ffff;
backdrop-filter: blur(5px);
}
.joystick-panel {
display: flex;
flex-direction: column;
align-items: center;
}
.joystick-row {
display: flex;
justify-content: center;
gap: 15px;
margin: 5px 0;
}
.ctrl-btn {
width: 70px;
height: 70px;
border-radius: 35px;
background: rgba(255,255,255,0.1);
border: 2px solid #00ffff;
color: #00ffff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 15px rgba(0,255,255,0.3);
transition: all 0.05s;
touch-action: manipulation;
}
.ctrl-btn:active {
background: #00ffff;
color: black;
transform: scale(0.95);
box-shadow: 0 0 30px #00ffff;
}
.action-panel {
display: flex;
gap: 15px;
}
.action-btn {
width: 80px;
height: 80px;
border-radius: 40px;
background: rgba(255,0,0,0.2);
border: 2px solid #ff4444;
color: #ff4444;
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 0 15px rgba(255,68,68,0.3);
touch-action: manipulation;
}
.action-btn:active {
background: #ff4444;
color: white;
transform: scale(0.95);
}
#wantedLevel {
display: flex;
gap: 5px;
align-items: center;
}
.wanted-star {
font-size: 30px;
color: #444;
text-shadow: none;
}
.wanted-star.active {
color: #ff4444;
text-shadow: 0 0 10px #ff4444;
}
#gameOver {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0,0,0,0.95);
padding: 30px;
border-radius: 20px;
border: 3px solid #ff4444;
text-align: center;
z-index: 1000;
}
#gameOver.hidden {
display: none;
}
#restartBtn {
background: #00ffff;
color: black;
border: none;
padding: 15px 40px;
font-size: 20px;
border-radius: 30px;
margin: 20px 0;
cursor: pointer;
font-weight: bold;
border: 2px solid white;
}
#missionText {
color: #ffaa00;
font-size: 14px;
background: rgba(0,0,0,0.7);
padding: 5px 15px;
border-radius: 20px;
border: 1px solid #ffaa00;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="gameContainer">
<div id="hud">
<div class="stats">
<div class="stat">💰 $<span id="money">0</span></div>
<div class="stat">❤️ <span id="health">100</span></div>
</div>
<div id="wantedLevel">
<span class="wanted-star" id="star1">⭐</span>
<span class="wanted-star" id="star2">⭐</span>
<span class="wanted-star" id="star3">⭐</span>
</div>
</div>
<div id="missionText">
🎯 Mission: Collect money bags! Avoid cops!
</div>
<canvas id="gameCanvas" width="400" height="600"></canvas>
<div id="controls">
<div class="control-panel">
<div class="joystick-panel">
<div class="joystick-row">
<div class="ctrl-btn" id="upBtn">⬆️</div>
</div>
<div class="joystick-row">
<div class="ctrl-btn" id="leftBtn">⬅️</div>
<div class="ctrl-btn" id="downBtn">⬇️</div>
<div class="ctrl-btn" id="rightBtn">➡️</div>
</div>
</div>
</div>
<div class="action-panel">
<div class="action-btn" id="shootBtn">🔫</div>
<div class="action-btn" id="carBtn">🚗</div>
</div>
</div>
<div id="gameOver" class="hidden">
<h1 style="color: #ff4444;">WASTED</h1>
<h2 style="color: white;">Final Score: $<span id="finalMoney">0</span></h2>
<button id="restartBtn">RESTART</button>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Game state
let gameRunning = true;
let money = 0;
let health = 100;
let wantedLevel = 0;
let frameCount = 0;
// Player object
const player = {
x: 200,
y: 300,
width: 25,
height: 25,
speed: 3,
direction: 'down',
moving: false,
inCar: false
};
// Controls state
const keys = {
up: false,
down: false,
left: false,
right: false
};
// Game objects
let moneyBags = [];
let cops = [];
let bullets = [];
let cars = [];
// Initialize game
function init() {
gameRunning = true;
money = 0;
health = 100;
wantedLevel = 0;
player.x = 200;
player.y = 300;
player.inCar = false;
// Create initial money bags
moneyBags = [];
for (let i = 0; i < 5; i++) {
spawnMoneyBag();
}
// Create cops
cops = [];
for (let i = 0; i < 3; i++) {
spawnCop();
}
// Create cars
cars = [];
for (let i = 0; i < 2; i++) {
spawnCar();
}
updateHUD();
document.getElementById('gameOver').classList.add('hidden');
}
// Spawn money bag at random position
function spawnMoneyBag() {
moneyBags.push({
x: Math.random() * (canvas.width - 20) + 10,
y: Math.random() * (canvas.height - 20) + 10,
width: 15,
height: 15,
value: Math.floor(Math.random() * 50) + 50
});
}
// Spawn cop
function spawnCop() {
cops.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
width: 20,
height: 20,
speed: 1.5,
direction: Math.random() * Math.PI * 2,
chaseTimer: 0
});
}
// Spawn car
function spawnCar() {
cars.push({
x: Math.random() * canvas.width,
y: Math.random() * canvas.height,
width: 35,
height: 20,
available: true
});
}
// Update HUD
function updateHUD() {
document.getElementById('money').textContent = money;
document.getElementById('health').textContent = health;
// Update wanted stars
for (let i = 1; i <= 3; i++) {
const star = document.getElementById(`star${i}`);
if (i <= wantedLevel) {
star.classList.add('active');
} else {
star.classList.remove('active');
}
}
}
// Movement controls
document.getElementById('upBtn').addEventListener('mousedown', () => keys.up = true);
document.getElementById('upBtn').addEventListener('mouseup', () => keys.up = false);
document.getElementById('upBtn').addEventListener('mouseleave', () => keys.up = false);
document.getElementById('upBtn').addEventListener('touchstart', (e) => { e.preventDefault(); keys.up = true; });
document.getElementById('upBtn').addEventListener('touchend', (e) => { e.preventDefault(); keys.up = false; });
document.getElementById('downBtn').addEventListener('mousedown', () => keys.down = true);
document.getElementById('downBtn').addEventListener('mouseup', () => keys.down = false);
document.getElementById('downBtn').addEventListener('mouseleave', () => keys.down = false);
document.getElementById('downBtn').addEventListener('touchstart', (e) => { e.preventDefault(); keys.down = true; });
document.getElementById('downBtn').addEventListener('touchend', (e) => { e.preventDefault(); keys.down = false; });
document.getElementById('leftBtn').addEventListener('mousedown', () => keys.left = true);
document.getElementById('leftBtn').addEventListener('mouseup', () => keys.left = false);
document.getElementById('leftBtn').addEventListener('mouseleave', () => keys.left = false);
document.getElementById('leftBtn').addEventListener('touchstart', (e) => { e.preventDefault(); keys.left = true; });
document.getElementById('leftBtn').addEventListener('touchend', (e) => { e.preventDefault(); keys.left = false; });
document.getElementById('rightBtn').addEventListener('mousedown', () => keys.right = true);
document.getElementById('rightBtn').addEventListener('mouseup', () => keys.right = false);
document.getElementById('rightBtn').addEventListener('mouseleave', () => keys.right = false);
document.getElementById('rightBtn').addEventListener('touchstart', (e) => { e.preventDefault(); keys.right = true; });
document.getElementById('rightBtn').addEventListener('touchend', (e) => { e.preventDefault(); keys.right = false; });
// Shoot button
document.getElementById('shootBtn').addEventListener('click', () => {
if (!gameRunning) return;
bullets.push({
x: player.x + player.width/2,
y: player.y + player.height/2,
width: 5,
height: 5,
direction: player.direction,
speed: 8
});
});
// Car button
document.getElementById('carBtn').addEventListener('click', () => {
if (!gameRunning) return;
// Check if near any car
cars.forEach(car => {
if (Math.abs(player.x - car.x) < 40 && Math.abs(player.y - car.y) < 40) {
player.inCar = !player.inCar;
player.speed = player.inCar ? 5 : 3;
}
});
});
// Restart button
document.getElementById('restartBtn').addEventListener('click', init);
// Update game
function update() {
if (!gameRunning) return;
// Player movement
let dx = 0, dy = 0;
if (keys.up) dy -= 1;
if (keys.down) dy += 1;
if (keys.left) dx -= 1;
if (keys.right) dx += 1;
if (dx !== 0 || dy !== 0) {
// Normalize diagonal movement
const length = Math.sqrt(dx*dx + dy*dy);
dx = dx / length * player.speed;
dy = dy / length * player.speed;
// Update direction
if (Math.abs(dx) > Math.abs(dy)) {
player.direction = dx > 0 ? 'right' : 'left';
} else {
player.direction = dy > 0 ? 'down' : 'up';
}
}
// Apply movement with boundary checks
player.x = Math.max(0, Math.min(canvas.width - player.width, player.x + dx));
player.y = Math.max(0, Math.min(canvas.height - player.height, player.y + dy));
// Collect money
moneyBags = moneyBags.filter(bag => {
if (checkCollision(player, bag)) {
money += bag.value;
updateHUD();
spawnMoneyBag(); // Spawn new bag
// Increase wanted level
if (money > 500 && wantedLevel < 1) wantedLevel = 1;
if (money > 1000 && wantedLevel < 2) wantedLevel = 2;
if (money > 2000 && wantedLevel < 3) wantedLevel = 3;
return false;
}
return true;
});
// Update cops
cops.forEach(cop => {
// Chase player
const dx = player.x - cop.x;
const dy = player.y - cop.y;
const distance = Math.sqrt(dx*dx + dy*dy);
if (distance < 200) {
// Chase player
const angle = Math.atan2(dy, dx);
cop.x += Math.cos(angle) * cop.speed;
cop.y += Math.sin(angle) * cop.speed;
// Damage player if too close
if (distance < 30) {
health -= 0.5;
updateHUD();
if (health <= 0) {
gameOver();
}
}
} else {
// Random patrol
cop.x += Math.cos(cop.direction) * cop.speed;
cop.y += Math.sin(cop.direction) * cop.speed;
// Bounce off walls
if (cop.x < 0 || cop.x > canvas.width) cop.direction = Math.PI - cop.direction;
if (cop.y < 0 || cop.y > canvas.height) cop.direction = -cop.direction;
}
});
// Update bullets
bullets = bullets.filter(bullet => {
bullet.x += Math.cos(bullet.direction === 'right' ? 0 : bullet.direction === 'left' ? Math.PI : bullet.direction === 'up' ? -Math.PI/2 : Math.PI/2) * bullet.speed;
bullet.y += Math.sin(bullet.direction === 'down' ? Math.PI/2 : bullet.direction === 'up' ? -Math.PI/2 : 0) * bullet.speed;
// Check bullet-cop collision
for (let i = cops.length - 1; i >= 0; i--) {
if (checkCollision(bullet, cops[i])) {
cops.splice(i, 1);
spawnCop(); // Spawn new cop
money += 100;
updateHUD();
return false;
}
}
// Remove if off screen
return bullet.x > 0 && bullet.x < canvas.width && bullet.y > 0 && bullet.y < canvas.height;
});
frameCount++;
}
// Collision detection
function checkCollision(obj1, obj2) {
return obj1.x < obj2.x + obj2.width &&
obj1.x + obj1.width > obj2.x &&
obj1.y < obj2.y + obj2.height &&
obj1.y + obj1.height > obj2.y;
}
// Game over
function gameOver() {
gameRunning = false;
document.getElementById('finalMoney').textContent = money;
document.getElementById('gameOver').classList.remove('hidden');
}
// Draw game
function draw() {
// Clear canvas
ctx.fillStyle = '#1a2a3a';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw road grid
ctx.strokeStyle = '#00ffff33';
ctx.lineWidth = 1;
for (let i = 0; i < canvas.width; i += 40) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.strokeStyle = '#00ffff22';
ctx.stroke();
}
for (let i = 0; i < canvas.height; i += 40) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(canvas.width, i);
ctx.strokeStyle = '#00ffff22';
ctx.stroke();
}
// Draw cars
cars.forEach(car => {
ctx.fillStyle = player.inCar && Math.abs(player.x - car.x) < 40 && Math.abs(player.y - car.y) < 40 ? '#00ff00' : '#ffaa00';
ctx.fillRect(car.x, car.y, car.width, car.height);
// Car windows
ctx.fillStyle = '#87CEEB';
ctx.fillRect(car.x + 5, car.y + 3, 8, 5);
ctx.fillRect(car.x + 22, car.y + 3, 8, 5);
});
// Draw money bags
moneyBags.forEach(bag => {
// Money bag
ctx.fillStyle = '#ffd700';
ctx.beginPath();
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
20KB
Transfer Size
20KB
Content Size
71.0ms
Dom Content Loaded
200.0ms
First Paint
72.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...