Three JS - Space Game
Created by - Alvin Wei - K1420713
Game includes:
Intractable ship, controlled by moving the mouse.
Shooting by holding down "Space". (Click game window once if it doesn't work).
Rocks objects generated in a random position in a set area in front of the player.
Text showing score and instructions on how to play.
Score increases when the player shoots a rock.
Score is reset when the player collides with a rock.
Shows highest score achieved in the current game session.
Highlights
It's a game and can be played endlessly.
Shots are removed from array using splice() when they are a certain distance away from the ship.
Rocks are removed in a similar way. When the number of rocks in the scene exceed 30, the first 10 rocks in the array are removed. (These rocks will be behind the ship and out of sight).
Game should be played in full screen by clicking on the button on the bottom right.
Technical Implementation
The craft controls are a slight variation of the 05.spacecraftOBJTEX example. The hold "Space" to shoot was done by using:
switch(event.code)
{
case "Space":
shoot();
rate++;
break;
}
holding "Space" calls the shoot(); function 60 times a second. The shoot function creates the shot objects at the crafts z position + 3 and - 3 and adds them to an array called shots. The rate variable prevents shot objects from being created every function call.
The shots are moved by putting the array in a for loop and moving the x position of each shot by -4 every frame. The for loop also checks if the shots are 200 units away from the ship. If a shot is 200 or more units away from the craft, the shots are removed from the scene and removed from the array using splice();
If the number of rocks in the rocks array exceed 30, the first 10 rocks are removed from the array. This method was chosen over checking the position of every rock because this only requires the game to check the length of the array rather than the position of every rock in the array which would require a bit more computation.
The hit detection is done by checking every shots' position against every rocks' position. The hit area of the rock is increased in the x,y and z positions to make it more accurate. If a shot's position is within a rocks extended area, that shot and rock are removed the by splice() and the score is increased by 1.
The rocks are checked the same way against the ship. If the rock hits an area around the ship, the rock is removed and the score is reset.
The Earth keeps to same x and z position as the ship.
Possible Extensions
A skybox could be added for a more spacey looking environment. Different sized rocks that take more hits and give more score could be added for more variation. A power up that could allow the player to survive 1 hit or increasing shot spawn rate.
------------------------------------------------------------------------------------
Game Description
Basic shooting game made in three.js where you fly a ship and shoot the rocks in space.
Move the ship with mouse.
Shoot by HOLDING down the "Space" key. (Click the game screen if this does not work).
Hitting 1 rock adds 1 point to your score.
Getting hit by a rock resets your score back to 0.
Shots are removed after they have reached a certain distance away from the ship.
Rocks are removed after a certain number of rocks are present in the scene.
