Mini GTA Prototype

by GoldenKnight35

216 lines3.8 KB🛠️ Three.js (3D graphics)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mini GTA Prototype</title>
<style>
body { margin:0; overflow:hidden; }
#hud{
position:absolute;
top:10px;
left:10px;
color:white;
background:rgba(0,0,0,.6);
padding:10px;
font-family:Arial;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
</head>
<body>

<div id="hud">
Health: <span id="health">100</span><br>
Money: <span id="money">0</span>
</div>

<script>
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x87ceeb);

const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth/window.innerHeight,
0.1,
1000
);

const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth,window.innerHeight);
document.body.appendChild(renderer.domElement);

// Light
const sun = new THREE.DirectionalLight(0xffffff,1);
sun.position.set(20,30,10);
scene.add(sun);

scene.add(new THREE.AmbientLight(0xffffff,0.5));

// Ground
const ground = new THREE.Mesh(
new THREE.PlaneGeometry(500,500),
new THREE.MeshStandardMaterial({color:0x228b22})
);
ground.rotation.x = -Math.PI/2;
scene.add(ground);

// Roads
for(let i=-200;i<=200;i+=40){
let road = new THREE.Mesh(
new THREE.BoxGeometry(500,0.1,10),
new THREE.MeshStandardMaterial({color:0x333333})
);
road.position.z=i;
scene.add(road);

let road2 = road.clone();
road2.geometry = new THREE.BoxGeometry(10,0.1,500);
road2.position.set(i,0.05,0);
scene.add(road2);
}

// Buildings
for(let i=0;i<80;i++){
let h=Math.random()*25+10;

let b=new THREE.Mesh(
new THREE.BoxGeometry(12,h,12),
new THREE.MeshStandardMaterial({
color:Math.random()*0xffffff
})
);

b.position.set(
Math.random()*400-200,
h/2,
Math.random()*400-200
);

scene.add(b);
}

// Player
const player = new THREE.Mesh(
new THREE.BoxGeometry(1,2,1),
new THREE.MeshStandardMaterial({color:0x0000ff})
);
player.position.y=1;
scene.add(player);

// Car
const car = new THREE.Mesh(
new THREE.BoxGeometry(3,1.2,5),
new THREE.MeshStandardMaterial({color:0xff0000})
);
car.position.set(10,0.6,0);
scene.add(car);

let driving=false;
let health=100;
let money=0;

const keys={};

window.addEventListener("keydown",e=>{
keys[e.key.toLowerCase()]=true;

if(e.key==="e"){
if(player.position.distanceTo(car.position)<5){
driving=!driving;
}
}
});

window.addEventListener("keyup",e=>{
keys[e.key.toLowerCase()]=false;
});

// NPCs
const npcs=[];

for(let i=0;i<20;i++){
let npc=new THREE.Mesh(
new THREE.BoxGeometry(1,2,1),
new THREE.MeshStandardMaterial({color:0xffff00})
);

npc.position.set(
Math.random()*300-150,
1,
Math.random()*300-150
);

scene.add(npc);
npcs.push(npc);
}

function animate(){

requestAnimationFrame(animate);

if(driving){

if(keys["w"]) car.position.z-=0.5;
if(keys["s"]) car.position.z+=0.5;
if(keys["a"]) car.position.x-=0.5;
if(keys["d"]) car.position.x+=0.5;

player.position.copy(car.position);

}else{

if(keys["w"]) player.position.z-=0.2;
if(keys["s"]) player.position.z+=0.2;
if(keys["a"]) player.position.x-=0.2;
if(keys["d"]) player.position.x+=0.2;
}

// NPC interaction
npcs.forEach(npc=>{

npc.position.x += (Math.random()-0.5)*0.05;
npc.position.z += (Math.random()-0.5)*0.05;

if(player.position.distanceTo(npc.position)<2){

money+=1;
document.getElementById("money").textContent=money;

npc.position.set(
Math.random()*300-150,
1,
Math.random()*300-150
);
}
});

// Camera follow
let target = driving ? car : player;

camera.position.lerp(
new THREE.Vector3(
target.position.x,
target.position.y+8,
target.position.z+12
),
0.08
);

camera.lookAt(target.position);

document.getElementById("health").textContent=
Math.floor(health);

renderer.render(scene,camera);
}

animate();

window.addEventListener("resize",()=>{
camera.aspect=window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth,window.innerHeight);
});
</script>
</body>
</html>

Game Source: Mini GTA Prototype

Creator: GoldenKnight35

Libraries: three

Complexity: complex (216 lines, 3.8 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: mini-gta-prototype-goldenknight35" to link back to the original. Then publish at arcadelab.ai/publish.