Mini GTA Game

by MegaFox98
195 lines4.2 KB🛠️ Three.js (3D graphics)
```html
<!DOCTYPE html>
<html>
<head>
  <title>Mini GTA Game</title>
  <style>
    body { margin:0; overflow:hidden; }
    canvas { display:block; }
    #ui {
      position:absolute;
      top:10px;
      left:10px;
      color:white;
      font-family:Arial;
    }
  </style>
</head>

<body>
<div id="ui">Money: $500 | Health: 100</div>

<script src="https://cdn.jsdelivr.net/npm/three@0.158/build/three.min.js"></script>

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

let camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// LIGHT
let light = new THREE.DirectionalLight(0xffffff,1);
light.position.set(10,20,10);
scene.add(light);

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

// GROUND
let ground = new THREE.Mesh(
  new THREE.PlaneGeometry(200,200),
  new THREE.MeshStandardMaterial({color:0x228B22})
);
ground.rotation.x = -Math.PI/2;
scene.add(ground);

// ROADS
let road = new THREE.Mesh(
  new THREE.PlaneGeometry(200,10),
  new THREE.MeshStandardMaterial({color:0x333333})
);
road.rotation.x = -Math.PI/2;
scene.add(road);

// BUILDINGS
function createBuilding(x,z){
  let b = new THREE.Mesh(
    new THREE.BoxGeometry(5,Math.random()*10+5,5),
    new THREE.MeshStandardMaterial({color:0x888888})
  );
  b.position.set(x, b.geometry.parameters.height/2, z);
  scene.add(b);
}
for(let i=-50;i<50;i+=10){
  createBuilding(i,20);
  createBuilding(i,-20);
}

// CARS
let cars=[];
function createCar(x,z,color){
  let car = new THREE.Mesh(
    new THREE.BoxGeometry(2,1,4),
    new THREE.MeshStandardMaterial({color})
  );
  car.position.set(x,0.5,z);
  scene.add(car);
  cars.push(car);
}
createCar(5,0,0xff0000);
createCar(-5,0,0x0000ff);

// NPC
let npc = new THREE.Mesh(
  new THREE.BoxGeometry(1,2,1),
  new THREE.MeshStandardMaterial({color:0xffaa00})
);
npc.position.set(10,1,10);
scene.add(npc);

// VARIABLES
let keys={};
let money=500;
let health=100;
let wanted=0;

// CONTROLS
document.addEventListener("keydown", e=>keys[e.key.toLowerCase()]=true);
document.addEventListener("keyup", e=>keys[e.key.toLowerCase()]=false);

// SHOOT
function shoot(){
  let bullet = new THREE.Mesh(
    new THREE.SphereGeometry(0.2),
    new THREE.MeshBasicMaterial({color:0xffff00})
  );
  bullet.position.copy(player.position);
  scene.add(bullet);

  let dir = new THREE.Vector3(0,0,-1).applyQuaternion(player.quaternion);
  bullet.velocity = dir.multiplyScalar(1);

  bullets.push(bullet);
  wanted = 1;
}

// BULLETS
let bullets=[];
function updateBullets(){
  bullets.forEach(b=>{
    b.position.add(b.velocity);
  });
}

// POLICE
let police = new THREE.Mesh(
  new THREE.BoxGeometry(2,1,4),
  new THREE.MeshStandardMaterial({color:0x000000})
);
police.position.set(0,0.5,-20);
scene.add(police);

function updatePolice(){
  if(wanted>0){
    let dir = player.position.clone().sub(police.position).normalize();
    police.position.add(dir.multiplyScalar(0.05));
  }
}

// BUY SYSTEM
document.addEventListener("keydown", e=>{
  if(e.key==="b"){
    if(money>=200){
      money-=200;
      alert("Car Purchased!");
    }
  }
});

// CAMERA
camera.position.set(0,5,10);

// GAME LOOP
function animate(){
  requestAnimationFrame(animate);

  // MOVE
  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;

  // SHOOT
  if(keys[" "]) shoot();

  // UPDATES
  updateBullets();
  updatePolice();

  // CAMERA FOLLOW
  camera.position.x = player.position.x;
  camera.position.z = player.position.z + 10;
  camera.lookAt(player.position);

  // UI
  document.getElementById("ui").innerText =
    "Money: $" + money + " | Health: " + health + " | Wanted: " + wanted;

  renderer.render(scene, camera);
}
animate();
</script>
</body>
</html>
```
Game Source: Mini GTA Game

Creator: MegaFox98
Libraries: three
Complexity: moderate (195 lines, 4.2 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-game-megafox98" to link back to the original. Then publish at arcadelab.ai/publish.