|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Retro GTA 1-Style Game</title>
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<style>
|
|
|
body {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
overflow: hidden;
|
|
|
background-color: #222;
|
|
|
font-family: 'Courier New', monospace;
|
|
|
}
|
|
|
|
|
|
#game-container {
|
|
|
position: relative;
|
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
#game-canvas {
|
|
|
background-color: #333;
|
|
|
border: 4px solid #555;
|
|
|
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
|
|
|
image-rendering: pixelated;
|
|
|
}
|
|
|
|
|
|
#hud {
|
|
|
position: absolute;
|
|
|
top: 10px;
|
|
|
left: 10px;
|
|
|
color: white;
|
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
|
padding: 10px;
|
|
|
border: 2px solid #555;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
#menu {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
background-color: rgba(0, 0, 0, 0.8);
|
|
|
border: 4px solid #555;
|
|
|
padding: 20px;
|
|
|
color: white;
|
|
|
text-align: center;
|
|
|
z-index: 100;
|
|
|
}
|
|
|
|
|
|
.pixel-button {
|
|
|
background-color: #444;
|
|
|
color: white;
|
|
|
border: 2px solid #666;
|
|
|
padding: 10px 20px;
|
|
|
margin: 5px;
|
|
|
font-family: 'Courier New', monospace;
|
|
|
cursor: pointer;
|
|
|
transition: all 0.2s;
|
|
|
}
|
|
|
|
|
|
.pixel-button:hover {
|
|
|
background-color: #666;
|
|
|
border-color: #888;
|
|
|
}
|
|
|
|
|
|
.mission-marker {
|
|
|
position: absolute;
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
background-color: red;
|
|
|
border: 2px solid white;
|
|
|
border-radius: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
}
|
|
|
|
|
|
.car {
|
|
|
position: absolute;
|
|
|
width: 32px;
|
|
|
height: 32px;
|
|
|
background-color: blue;
|
|
|
transform-origin: center;
|
|
|
}
|
|
|
|
|
|
.pedestrian {
|
|
|
position: absolute;
|
|
|
width: 12px;
|
|
|
height: 12px;
|
|
|
background-color: green;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
|
|
|
.building {
|
|
|
position: absolute;
|
|
|
background-color: #555;
|
|
|
border: 2px solid #333;
|
|
|
}
|
|
|
|
|
|
.road {
|
|
|
position: absolute;
|
|
|
background-color: #444;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<div id="game-container">
|
|
|
<canvas id="game-canvas"></canvas>
|
|
|
|
|
|
<div id="hud">
|
|
|
<div>Time: <span id="time">12:00</span></div>
|
|
|
<div>Score: <span id="score">0</span></div>
|
|
|
<div>Wanted: <span id="wanted">★</span></div>
|
|
|
<div>Health: <span id="health">100%</span></div>
|
|
|
<div>Money: $<span id="money">1000</span></div>
|
|
|
</div>
|
|
|
|
|
|
<div id="menu" style="display: none;">
|
|
|
<h1 class="text-2xl mb-4">RETRO GTA</h1>
|
|
|
<div class="mb-6">
|
|
|
<button id="start-game" class="pixel-button">START GAME</button>
|
|
|
<button id="controls" class="pixel-button">CONTROLS</button>
|
|
|
</div>
|
|
|
<div id="controls-info" style="display: none;">
|
|
|
<p class="mb-2">WASD or Arrow Keys - Move</p>
|
|
|
<p class="mb-2">Space - Handbrake</p>
|
|
|
<p class="mb-2">E - Enter/Exit Vehicle</p>
|
|
|
<p class="mb-2">M - Mission Start</p>
|
|
|
<button id="back-to-menu" class="pixel-button mt-4">BACK</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
const gameState = {
|
|
|
player: {
|
|
|
x: 400,
|
|
|
y: 300,
|
|
|
speed: 0,
|
|
|
angle: 0,
|
|
|
maxSpeed: 5,
|
|
|
acceleration: 0.1,
|
|
|
rotationSpeed: 3,
|
|
|
inVehicle: true,
|
|
|
health: 100,
|
|
|
money: 1000,
|
|
|
score: 0,
|
|
|
wantedLevel: 0
|
|
|
},
|
|
|
time: {
|
|
|
hours: 12,
|
|
|
minutes: 0
|
|
|
},
|
|
|
vehicles: [],
|
|
|
pedestrians: [],
|
|
|
buildings: [],
|
|
|
roads: [],
|
|
|
mission: {
|
|
|
active: false,
|
|
|
marker: { x: 600, y: 200 }
|
|
|
},
|
|
|
keys: {}
|
|
|
};
|
|
|
|
|
|
|
|
|
const canvas = document.getElementById('game-canvas');
|
|
|
const ctx = canvas.getContext('2d');
|
|
|
const menu = document.getElementById('menu');
|
|
|
const startButton = document.getElementById('start-game');
|
|
|
const controlsButton = document.getElementById('controls');
|
|
|
const controlsInfo = document.getElementById('controls-info');
|
|
|
const backButton = document.getElementById('back-to-menu');
|
|
|
const timeDisplay = document.getElementById('time');
|
|
|
const scoreDisplay = document.getElementById('score');
|
|
|
const wantedDisplay = document.getElementById('wanted');
|
|
|
const healthDisplay = document.getElementById('health');
|
|
|
const moneyDisplay = document.getElementById('money');
|
|
|
|
|
|
|
|
|
function resizeCanvas() {
|
|
|
canvas.width = window.innerWidth * 0.9;
|
|
|
canvas.height = window.innerHeight * 0.9;
|
|
|
}
|
|
|
|
|
|
|
|
|
function initGame() {
|
|
|
resizeCanvas();
|
|
|
showMenu();
|
|
|
generateCity();
|
|
|
window.addEventListener('resize', resizeCanvas);
|
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
|
window.addEventListener('keyup', handleKeyUp);
|
|
|
|
|
|
startButton.addEventListener('click', startGame);
|
|
|
controlsButton.addEventListener('click', showControls);
|
|
|
backButton.addEventListener('click', showMenu);
|
|
|
}
|
|
|
|
|
|
|
|
|
function showMenu() {
|
|
|
menu.style.display = 'block';
|
|
|
controlsInfo.style.display = 'none';
|
|
|
}
|
|
|
|
|
|
|
|
|
function showControls() {
|
|
|
menu.style.display = 'block';
|
|
|
controlsInfo.style.display = 'block';
|
|
|
}
|
|
|
|
|
|
|
|
|
function startGame() {
|
|
|
menu.style.display = 'none';
|
|
|
gameLoop();
|
|
|
setInterval(updateTime, 60000);
|
|
|
}
|
|
|
|
|
|
|
|
|
function generateCity() {
|
|
|
|
|
|
for (let i = 0; i < 10; i++) {
|
|
|
gameState.roads.push({
|
|
|
x: i * 100,
|
|
|
y: 200,
|
|
|
width: 80,
|
|
|
height: 20
|
|
|
});
|
|
|
|
|
|
gameState.roads.push({
|
|
|
x: 400,
|
|
|
y: i * 80,
|
|
|
width: 20,
|
|
|
height: 60
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
for (let i = 0; i < 15; i++) {
|
|
|
gameState.buildings.push({
|
|
|
x: Math.random() * canvas.width,
|
|
|
y: Math.random() * canvas.height,
|
|
|
width: 60 + Math.random() * 100,
|
|
|
height: 80 + Math.random() * 120
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
for (let i = 0; i < 20; i++) {
|
|
|
gameState.pedestrians.push({
|
|
|
x: Math.random() * canvas.width,
|
|
|
y: Math.random() * canvas.height,
|
|
|
speed: 0.5 + Math.random() * 1.5,
|
|
|
direction: Math.random() * 360
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
for (let i = 0; i < 5; i++) {
|
|
|
gameState.vehicles.push({
|
|
|
x: Math.random() * canvas.width,
|
|
|
y: Math.random() * canvas.height,
|
|
|
speed: 1 + Math.random() * 3,
|
|
|
angle: Math.random() * 360,
|
|
|
color: `hsl(${Math.random() * 360}, 70%, 50%)`
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function handleKeyDown(e) {
|
|
|
gameState.keys[e.key] = true;
|
|
|
|
|
|
|
|
|
if (e.key === 'Escape') {
|
|
|
if (menu.style.display === 'none') {
|
|
|
menu.style.display = 'block';
|
|
|
} else {
|
|
|
menu.style.display = 'none';
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
if (e.key === 'm' && !gameState.mission.active) {
|
|
|
gameState.mission.active = true;
|
|
|
gameState.mission.marker = {
|
|
|
x: Math.random() * canvas.width,
|
|
|
y: Math.random() * canvas.height
|
|
|
};
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function handleKeyUp(e) {
|
|
|
gameState.keys[e.key] = false;
|
|
|
}
|
|
|
|
|
|
|
|
|
function updateTime() {
|
|
|
gameState.time.minutes += 10;
|
|
|
if (gameState.time.minutes >= 60) {
|
|
|
gameState.time.minutes = 0;
|
|
|
gameState.time.hours = (gameState.time.hours + 1) % 24;
|
|
|
}
|
|
|
|
|
|
const hoursStr = gameState.time.hours.toString().padStart(2, '0');
|
|
|
const minsStr = gameState.time.minutes.toString().padStart(2, '0');
|
|
|
timeDisplay.textContent = `${hoursStr}:${minsStr}`;
|
|
|
}
|
|
|
|
|
|
|
|
|
function update() {
|
|
|
const player = gameState.player;
|
|
|
|
|
|
|
|
|
if (player.inVehicle) {
|
|
|
|
|
|
if (gameState.keys['ArrowUp'] || gameState.keys['w']) {
|
|
|
player.speed = Math.min(player.speed + player.acceleration, player.maxSpeed);
|
|
|
} else if (gameState.keys['ArrowDown'] || gameState.keys['s']) {
|
|
|
player.speed = Math.max(player.speed - player.acceleration, -player.maxSpeed / 2);
|
|
|
} else {
|
|
|
|
|
|
player.speed *= 0.95;
|
|
|
if (Math.abs(player.speed) < 0.1) player.speed = 0;
|
|
|
}
|
|
|
|
|
|
|
|
|
if (player.speed !== 0) {
|
|
|
if (gameState.keys['ArrowLeft'] || gameState.keys['a']) {
|
|
|
player.angle -= player.rotationSpeed * (player.speed / player.maxSpeed);
|
|
|
}
|
|
|
if (gameState.keys['ArrowRight'] || gameState.keys['d']) {
|
|
|
player.angle += player.rotationSpeed * (player.speed / player.maxSpeed);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
if (gameState.keys[' ']) {
|
|
|
player.speed *= 0.8;
|
|
|
}
|
|
|
|
|
|
|
|
|
const rad = player.angle * Math.PI / 180;
|
|
|
player.x += Math.sin(rad) * player.speed;
|
|
|
player.y -= Math.cos(rad) * player.speed;
|
|
|
|
|
|
|
|
|
for (const building of gameState.buildings) {
|
|
|
if (checkCollision(
|
|
|
player.x, player.y, 32, 32,
|
|
|
building.x, building.y, building.width, building.height
|
|
|
)) {
|
|
|
|
|
|
player.speed = -player.speed * 0.5;
|
|
|
player.health -= 5;
|
|
|
healthDisplay.textContent = `${player.health}%`;
|
|
|
|
|
|
|
|
|
if (gameState.player.wantedLevel < 5) {
|
|
|
gameState.player.wantedLevel++;
|
|
|
wantedDisplay.textContent = '★'.repeat(gameState.player.wantedLevel);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
for (const vehicle of gameState.vehicles) {
|
|
|
const rad = vehicle.angle * Math.PI / 180;
|
|
|
vehicle.x += Math.sin(rad) * vehicle.speed;
|
|
|
vehicle.y -= Math.cos(rad) * vehicle.speed;
|
|
|
|
|
|
|
|
|
if (Math.random() < 0.01) {
|
|
|
vehicle.angle += (Math.random() - 0.5) * 30;
|
|
|
}
|
|
|
|
|
|
|
|
|
if (vehicle.x < 0) vehicle.x = canvas.width;
|
|
|
if (vehicle.x > canvas.width) vehicle.x = 0;
|
|
|
if (vehicle.y < 0) vehicle.y = canvas.height;
|
|
|
if (vehicle.y > canvas.height) vehicle.y = 0;
|
|
|
}
|
|
|
|
|
|
|
|
|
for (const ped of gameState.pedestrians) {
|
|
|
const rad = ped.direction * Math.PI / 180;
|
|
|
ped.x += Math.sin(rad) * ped.speed;
|
|
|
ped.y -= Math.cos(rad) * ped.speed;
|
|
|
|
|
|
|
|
|
if (Math.random() < 0.02) {
|
|
|
ped.direction += (Math.random() - 0.5) * 90;
|
|
|
}
|
|
|
|
|
|
|
|
|
if (ped.x < 0 || ped.x > canvas.width || ped.y < 0 || ped.y > canvas.height) {
|
|
|
ped.direction = Math.atan2(canvas.width / 2 - ped.x, canvas.height / 2 - ped.y) * 180 / Math.PI;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
if (gameState.mission.active) {
|
|
|
const marker = gameState.mission.marker;
|
|
|
if (Math.sqrt((player.x - marker.x) ** 2 + (player.y - marker.y) ** 2) < 30) {
|
|
|
gameState.mission.active = false;
|
|
|
player.money += 500;
|
|
|
player.score += 1000;
|
|
|
moneyDisplay.textContent = player.money;
|
|
|
scoreDisplay.textContent = player.score;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function checkCollision(x1, y1, w1, h1, x2, y2, w2, h2) {
|
|
|
return x1 < x2 + w2 &&
|
|
|
x1 + w1 > x2 &&
|
|
|
y1 < y2 + h2 &&
|
|
|
y1 + h1 > y2;
|
|
|
}
|
|
|
|
|
|
|
|
|
function render() {
|
|
|
|
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
|
|
|
|
|
ctx.fillStyle = '#444';
|
|
|
for (const road of gameState.roads) {
|
|
|
ctx.fillRect(road.x, road.y, road.width, road.height);
|
|
|
}
|
|
|
|
|
|
|
|
|
ctx.fillStyle = '#555';
|
|
|
ctx.strokeStyle = '#333';
|
|
|
ctx.lineWidth = 2;
|
|
|
for (const building of gameState.buildings) {
|
|
|
ctx.fillRect(building.x, building.y, building.width, building.height);
|
|
|
ctx.strokeRect(building.x, building.y, building.width, building.height);
|
|
|
|
|
|
|
|
|
ctx.fillStyle = '#777';
|
|
|
for (let i = 0; i < 3; i++) {
|
|
|
for (let j = 0; j < 3; j++) {
|
|
|
ctx.fillRect(
|
|
|
building.x + 10 + i * 15,
|
|
|
building.y + 10 + j * 15,
|
|
|
8, 8
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
ctx.fillStyle = '#555';
|
|
|
}
|
|
|
|
|
|
|
|
|
ctx.fillStyle = 'green';
|
|
|
for (const ped of gameState.pedestrians) {
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(ped.x, ped.y, 6, 0, Math.PI * 2);
|
|
|
ctx.fill();
|
|
|
}
|
|
|
|
|
|
|
|
|
for (const vehicle of gameState.vehicles) {
|
|
|
ctx.save();
|
|
|
ctx.translate(vehicle.x, vehicle.y);
|
|
|
ctx.rotate(vehicle.angle * Math.PI / 180);
|
|
|
ctx.fillStyle = vehicle.color;
|
|
|
ctx.fillRect(-16, -16, 32, 32);
|
|
|
|
|
|
|
|
|
ctx.fillStyle = '#333';
|
|
|
ctx.fillRect(-12, -12, 24, 8);
|
|
|
ctx.fillRect(-12, 4, 24, 8);
|
|
|
ctx.restore();
|
|
|
}
|
|
|
|
|
|
|
|
|
const player = gameState.player;
|
|
|
ctx.save();
|
|
|
ctx.translate(player.x, player.y);
|
|
|
ctx.rotate(player.angle * Math.PI / 180);
|
|
|
ctx.fillStyle = 'blue';
|
|
|
ctx.fillRect(-16, -16, 32, 32);
|
|
|
|
|
|
|
|
|
ctx.fillStyle = '#333';
|
|
|
ctx.fillRect(-12, -12, 24, 8);
|
|
|
ctx.fillRect(-12, 4, 24, 8);
|
|
|
ctx.fillStyle = 'red';
|
|
|
ctx.fillRect(12, -8, 4, 4);
|
|
|
ctx.fillRect(12, 4, 4, 4);
|
|
|
ctx.fillStyle = 'yellow';
|
|
|
ctx.fillRect(-16, -8, 4, 4);
|
|
|
ctx.fillRect(-16, 4, 4, 4);
|
|
|
ctx.restore();
|
|
|
|
|
|
|
|
|
if (gameState.mission.active) {
|
|
|
ctx.fillStyle = 'red';
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(
|
|
|
gameState.mission.marker.x,
|
|
|
gameState.mission.marker.y,
|
|
|
10, 0, Math.PI * 2
|
|
|
);
|
|
|
ctx.fill();
|
|
|
ctx.strokeStyle = 'white';
|
|
|
ctx.lineWidth = 2;
|
|
|
ctx.stroke();
|
|
|
|
|
|
|
|
|
ctx.beginPath();
|
|
|
ctx.moveTo(player.x, player.y);
|
|
|
ctx.lineTo(gameState.mission.marker.x, gameState.mission.marker.y);
|
|
|
ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
|
|
|
ctx.lineWidth = 1;
|
|
|
ctx.stroke();
|
|
|
}
|
|
|
|
|
|
|
|
|
const minimapSize = 150;
|
|
|
const minimapX = canvas.width - minimapSize - 20;
|
|
|
const minimapY = 20;
|
|
|
|
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.7)';
|
|
|
ctx.fillRect(minimapX, minimapY, minimapSize, minimapSize);
|
|
|
ctx.strokeStyle = '#555';
|
|
|
ctx.lineWidth = 2;
|
|
|
ctx.strokeRect(minimapX, minimapY, minimapSize, minimapSize);
|
|
|
|
|
|
|
|
|
ctx.fillStyle = '#666';
|
|
|
for (const road of gameState.roads) {
|
|
|
const mx = minimapX + (road.x / canvas.width) * minimapSize;
|
|
|
const my = minimapY + (road.y / canvas.height) * minimapSize;
|
|
|
const mw = (road.width / canvas.width) * minimapSize;
|
|
|
const mh = (road.height / canvas.height) * minimapSize;
|
|
|
ctx.fillRect(mx, my, mw, mh);
|
|
|
}
|
|
|
|
|
|
|
|
|
ctx.fillStyle = 'blue';
|
|
|
const px = minimapX + (player.x / canvas.width) * minimapSize;
|
|
|
const py = minimapY + (player.y / canvas.height) * minimapSize;
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(px, py, 3, 0, Math.PI * 2);
|
|
|
ctx.fill();
|
|
|
|
|
|
|
|
|
if (gameState.mission.active) {
|
|
|
ctx.fillStyle = 'red';
|
|
|
const mx = minimapX + (gameState.mission.marker.x / canvas.width) * minimapSize;
|
|
|
const my = minimapY + (gameState.mission.marker.y / canvas.height) * minimapSize;
|
|
|
ctx.beginPath();
|
|
|
ctx.arc(mx, my, 3, 0, Math.PI * 2);
|
|
|
ctx.fill();
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function gameLoop() {
|
|
|
update();
|
|
|
render();
|
|
|
requestAnimationFrame(gameLoop);
|
|
|
}
|
|
|
|
|
|
|
|
|
window.onload = initGame;
|
|
|
</script>
|
|
|
</body>
|
|
|
|
|
|
</html> |
