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="en">
<head>
<meta charset="UTF-8">
<title>Grand Theft Auto VI</title>
<style>
body { margin:0; background:#000; overflow:hidden; font-family: 'Courier New', monospace; }
#container {
position: relative;
width: 800px;
height: 600px;
margin: 40px auto;
box-shadow: 0 0 30px #ff00ff;
border: 8px solid #000;
}
#titleScreen {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 10;
background-size: cover;
image-rendering: pixelated;
}
#titleOverlay {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 48px;
text-shadow: 4px 4px 0 #000,
-4px -4px 0 #000,
4px -4px 0 #000,
-4px 4px 0 #000;
z-index: 11;
pointer-events: none;
text-align: center;
line-height: 1;
}
canvas {
display: block;
image-rendering: pixelated;
}
#hud {
position: absolute;
bottom: 10px; left: 10px; right: 10px;
color: #fff;
font-size: 18px;
text-shadow: 2px 2px 0 #000;
z-index: 12;
pointer-events: none;
display: flex;
justify-content: space-between;
}
#mission { font-weight: bold; color: #ff0; }
#wanted { color: #f00; }
#status {
position: absolute;
top: 20px; left: 50%;
transform: translateX(-50%);
background: rgba(0,0,0,0.7);
padding: 8px 20px;
border-radius: 8px;
font-size: 22px;
color: #0f0;
z-index: 13;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="container">
<img id="titleScreen" src="gta_title.png" alt="GTA VI Title Screen">
<div id="titleOverlay">GRAND THEFT AUTO VI<br><span style="font-size:24px">PRESS ANY KEY TO START</span></div>
<canvas id="canvas" width="800" height="600"></canvas>
<div id="hud">
<div id="mission">MISSION: Steal a car</div>
<div id="wanted">WANTED: <span id="stars"></span></div>
</div>
<div id="status"></div>
</div>
<script>
// ====================== GAME SETUP ======================
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const titleScreen = document.getElementById('titleScreen');
const titleOverlay = document.getElementById('titleOverlay');
const missionEl = document.getElementById('mission');
const starsEl = document.getElementById('stars');
const statusEl = document.getElementById('status');
let gameRunning = false;
let keys = {};
// Player
let player = { x: 380, y: 380, size: 16, speed: 4.5, color: '#00f' };
// Game state
let inCar = false;
let currentCarIndex = -1;
let health = 100;
let wantedLevel = 0;
let missionStage = 0; // 0=steal car, 1=go to bank, 2=rob, 3=escape
let score = 0;
// World objects
const cars = [
{ x: 180, y: 280, w: 48, h: 24, color: '#ff0', angle: 0 },
{ x: 620, y: 420, w: 48, h: 24, color: '#f80', angle: 90 }
];
let peds = [];
for (let i = 0; i < 12; i++) {
peds.push({
x: Math.random() * 800,
y: Math.random() * 600,
size: 12,
color: '#f33',
vx: (Math.random() - 0.5) * 2,
vy: (Math.random() - 0.5) * 2
});
}
const bank = { x: 520, y: 120, w: 90, h: 90 };
let police = [];
const hospital = { x: 90, y: 90 };
const policeStation = { x: 680, y: 480 };
// ====================== INPUT ======================
window.addEventListener('keydown', e => {
keys[e.key.toLowerCase()] = true;
if (!gameRunning) {
titleScreen.style.display = 'none';
titleOverlay.style.display = 'none';
gameRunning = true;
gameLoop();
}
});
window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);
// ====================== DRAW ======================
function draw() {
// Background - beach / city
ctx.fillStyle = '#1e8c3a'; // grass
ctx.fillRect(0, 0, 800, 600);
ctx.fillStyle = '#4488ff'; // water
ctx.fillRect(0, 420, 800, 180);
// Roads
ctx.fillStyle = '#333';
ctx.fillRect(120, 0, 140, 600); // vertical road
ctx.fillRect(0, 260, 800, 110); // horizontal road
ctx.fillStyle = '#fff';
ctx.fillRect(180, 0, 8, 600); // road lines
ctx.fillRect(0, 305, 800, 8);
// Buildings
ctx.fillStyle = '#555';
ctx.fillRect(280, 40, 110, 110);
ctx.fillRect(30, 480, 90, 90);
ctx.fillRect(680, 30, 100, 130);
// Bank
ctx.fillStyle = '#0aa';
ctx.fillRect(bank.x, bank.y, bank.w, bank.h);
ctx.fillStyle = '#ff0';
ctx.font = 'bold 18px Courier New';
ctx.fillText('BANK', bank.x + 18, bank.y + 52);
// Cars (parked or player car)
for (let i = 0; i < cars.length; i++) {
const c = cars[i];
if (inCar && i === currentCarIndex) continue;
ctx.save();
ctx.translate(c.x + c.w/2, c.y + c.h/2);
ctx.rotate(c.angle * Math.PI / 180);
ctx.fillStyle = c.color;
ctx.fillRect(-c.w/2, -c.h/2, c.w, c.h);
ctx.fillStyle = '#222';
ctx.fillRect(-c.w/2 + 6, -c.h/2 + 4, 12, 8);
ctx.fillRect(-c.w/2 + 6, c.h/2 - 12, 12, 8);
ctx.restore();
}
// Player (or inside car)
if (inCar) {
// driver visible in car
ctx.fillStyle = '#0af';
ctx.fillRect(cars[currentCarIndex].x + 12, cars[currentCarIndex].y + 4, 14, 14);
} else {
ctx.fillStyle = player.color;
ctx.beginPath();
ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
ctx.fill();
// simple head
ctx.fillStyle = '#fdb';
ctx.beginPath();
ctx.arc(player.x, player.y - 8, 7, 0, Math.PI * 2);
ctx.fill();
}
// Pedestrians
for (let p of peds) {
ctx.fillStyle = p.color;
ctx.beginPath();
ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
ctx.fill();
}
// Police cars
for (let p of police) {
ctx.fillStyle = '#00f';
ctx.fillRect(p.x - 24, p.y - 14, 48, 28);
ctx.fillStyle = '#f00';
ctx.fillRect(p.x - 18, p.y - 10, 12, 6);
}
}
// ====================== UPDATE ======================
function update() {
if (!gameRunning) return;
let speed = inCar ? 7.5 : player.speed;
let dx = 0, dy = 0;
if (keys['w'] || keys['arrowup']) dy -= speed;
if (keys['s'] || keys['arrowdown']) dy += speed;
if (keys['a'] || keys['arrowleft']) dx -= speed;
if (keys['d'] || keys['arrowright']) dx += speed;
if (inCar) {
const car = cars[currentCarIndex];
car.x += dx;
car.y += dy;
// simple turning
if (keys['a'] || keys['arrowleft']) car.angle -= 4;
if (keys['d'] || keys['arrowright']) car.angle += 4;
player.x = car.x + 24;
player.y = car.y + 12;
} else {
player.x += dx;
player.y += dy;
}
// World bounds
player.x = Math.max(20, Math.min(780, player.x));
player.y = Math.max(20, Math.min(580, player.y));
if (inCar) {
const car = cars[currentCarIndex];
car.x = Math.max(30, Math.min(770, car.x));
car.y = Math.max(30, Math.min(570, car.y));
}
// Pedestrian AI
for (let p of peds) {
p.x += p.vx;
p.y += p.vy;
if (Math.random() < 0.02) {
p.vx = (Math.random() - 0.5) * 3;
p.vy = (Math.random() - 0.5) * 3;
}
p.x = Math.max(20, Math.min(780, p.x));
p.y = Math.max(20, Math.min(580, p.y));
}
// Punch (Space)
if (keys[' '] && !inCar) {
keys[' '] = false; // one punch per press
for (let i = 0; i < peds.length; i++) {
const p = peds[i];
const dist = Math.hypot(player.x - p.x, player.y - p.y);
if (dist < 38) {
p.x += (p.x - player.x) * 1.8;
p.y += (p.y - player.y) * 1.8;
statusEl.textContent = 'PUNCHED!';
setTimeout(() => statusEl.textContent = '', 800);
break;
}
}
}
// Steal / Exit car (E)
if (keys['e']) {
keys['e'] = false;
if (inCar) {
inCar = false;
statusEl.textContent = 'EXITED VEHICLE';
setTimeout(() => statusEl.textContent = '', 1200);
} else {
for (let i = 0; i < cars.length; i++) {
const c = cars[i];
const dist = Math.hypot(player.x - (c.x + 24), player.y - (c.y + 12));
if (dist < 50) {
inCar = true;
currentCarIndex = i;
if (missionStage === 0) {
missionStage = 1;
updateHUD();
}
statusEl.textContent = 'VEHICLE STOLEN!';
setTimeout(() => statusEl.textContent = '', 1200);
break;
}
}
}
}
// Rob bank (R)
if (keys['r']) {
keys['r'] = false;
const px = inCar ? cars[currentCarIndex].x + 24 : player.x;
const py = inCar ? cars[currentCarIndex].y + 12 : player.y;
if (Math.hypot(px - (bank.x + 45), py - (bank.y + 45)) < 55 && missionStage === 1) {
missionStage = 2;
wantedLevel = 5;
updateHUD();
statusEl.textContent = 'BANK ROBBED! RUN!';
setTimeout(() => statusEl.textContent = '', 1500);
// Spawn police
police = [
{ x: 580, y: 80, speed: 5.5 },
{ x: 650, y: 180, speed: 5.5 },
{ x: 480, y: 220, speed: 5.5 }
];
}
}
// Police chase
for (let p of police) {
const tx = inCar ? cars[currentCarIndex].x + 24 : player.x;
const ty = inCar ? cars[currentCarIndex].y + 12 : player.y;
const dx = tx - p.x;
const dy = ty - p.y;
const dist = Math.hypot(dx, dy) || 1;
p.x += (dx / dist) * p.speed;
p.y += (dy / dist) * p.speed;
// Catch player?
if (dist < 38) {
if (wantedLevel > 0) {
// Busted
statusEl.textContent = 'BUSTED!';
setTimeout(() => {
player.x = policeStation.x;
player.y = policeStation.y;
inCar = false;
wantedLevel = 0;
police = [];
updateHUD();
statusEl.textContent = 'RESPAWNED AT POLICE STATION';
setTimeout(() => statusEl.textContent = '', 2000);
}, 800);
}
}
}
// Health / Wasted
if (wantedLevel > 0 && police.length > 0) {
for (let p of police) {
const dist = Math.hypot((inCar ? cars[currentCarIndex].x + 24 : player.x) - p.x,
(inCar ? cars[currentCarIndex].y + 12 : player.y) - p.y);
if (dist < 55) health -= 0.35;
}
}
if (health <= 0) {
statusEl.textContent = 'WASTED!';
setTimeout(() => {
player.x = hospital.x;
player.y = hospital.y;
health = 100;
inCar = false;
wantedLevel = 0;
police = [];
updateHUD();
statusEl.textContent = 'RESPAWNED AT HOSPITAL';
setTimeout(() => statusEl.textContent = '', 2000);
}, 800);
}
// Escape success
if (wantedLevel > 0 && police.length > 0 && Math.random() < 0.008) {
// police despawn after a while (escape)
if (Math.hypot(player.x - 400, player.y - 300) > 280) {
police = [];
wantedLevel = 0;
missionStage = 3;
updateHUD();
statusEl.textContent = 'MISSION COMPLETE - YOU ESCAPED!';
setTimeout(() => statusEl.textContent = '', 3000);
}
}
}
function updateHUD() {
let mText = '';
switch (missionStage) {
case 0: mText = 'MISSION: Steal a car (E)'; break;
case 1: mText = 'MISSION: Go to BANK & rob (R)'; break;
case 2: mText = 'MISSION: ESCAPE THE COPS!'; break;
case 3: mText = 'MISSION COMPLETE!'; break;
}
missionEl.textContent = mText;
let stars = '';
for (let i = 0; i < wantedLevel; i++) stars += '★ ';
starsEl.textContent = stars;
}
// ====================== GAME LOOP ======================
function gameLoop() {
update();
draw();
requestAnimationFrame(gameLoop);
}
// Initial HUD
updateHUD();
statusEl.textContent = 'WASD = MOVE SPACE = PUNCH E = STEAL/EXIT R = ROB BANK';
// Auto-hide title when image loads (fallback)
titleScreen.onload = () => {
console.log('%cGTA VI Mini loaded - enjoy the chaos!', 'color:#ff0;font-size:16px');
};
</script>
</body>
</html>Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
2
Requests
1
Domains
16KB
Transfer Size
16KB
Content Size
96.0ms
Dom Content Loaded
188.0ms
First Paint
99.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...