Me and another NYU student created a 3D Virtual Reality Flight Simulator. The game can be played using a VR headset or a mouse and keyboard. Here is the full code for the project. Also, play the game on fullscreen here.

How to Play

Keyboard & Mouse Controls

• Left Mouse (Hold)- while holding this, the user can steer the plane.
• Left Mouse (Click)- Every time the user clicks the mouse a missle is launched from the ship.
• Left Mouse (Click)- A user can also click on the green cylinder to accelerate.
• W- Or a player can accelerate by pressing the W key
• Left Mouse (Click)- A user can also click on the red cylinder to decelerate.
• S- Or a player can decelerate by pressing the S key
• {SPACE}- A player can also shoot missles by pressing the spacebar key.

VR Controls

The user can stear the plane by looking around while wearing a vr headset.

Gameplay

Fly your plane around while flying through hoops to gather coins, and shooting any obstacles in your way. However, try not to crash into anything or your progress will be lost.

Programming

Resources

• P5.js- For providing preloader, and draw loop
• A-Frame- For creating the VR Scene from 3D Objects.
• Three.js- For creating 3D Objects.
• A-Frame P5- To control A frame with P5.js.

Files

• images- holds all images for our game.
• sounds- holds all sound files for our game.
• js
  • sketch.js- holds the game logic.
• index.html- holds the html code for the project.

Functionality

First our sketch.js runs through the function preload() which loads all the sounds needed for the game. Next it calls setup() which will draw the tarmac the ground and the player HUD. Finally, setch.js will call draw() which is called 60 times per second by P5, Here is our draw function below, it first detects if the plane is colliding with any objects, then, it checks wether it has rendered the chunk the plane is in and if not it renders it, then, it despawns any objects the plane has already passed, after, it draws the score board, and finally, it increments the position of the plane in the direction it is facing and checks if the plane is passing through any torus to increment the score.

 
  function draw() {
    if (state === "playing") {
      shotDelay += 1;
      // increase speed if taking off
      tryToTakeOff();
      collisionDetection();
      renderNearbyObjects();
      // dont render objects that the plane no longer sees
      removeClouds();
      removeToruses();
      removeAsteroids();
      drawProjectiles();
      drawScoreBoard();
      world.moveUserForward(planeSpeed); // move
      distanceTraveled = world.camera.getZ();
      isUserScoring();
    }
  }

Ofcourse there is a lot more code to go through such as all the classes and the implementation of all the functions seen in the game loop so here is a link to the Github to see the full source code.

“Flying isn’t dangerous. Crashing is what’s dangerous.”

Post Tags gaming virtual reality simulation javascript