Javascript (P5js) Asteroid Interactive Game
Using P5JS, a Javascript library for creative coding, I created an interactive game using classes, objects, and self-made visual assets. The game utilizes objects and 2d collision features to challenge the user’s reaction by dodging the “asteroids” and “enemy boss ships”. Using the space bar and arrow keys, users can also achieve high scores and boss stages to find how long they can survive in the javascript game.
Creating the Movement
Using a P5js function, the movement was easily able to be created with its base code. The first ideation of the game was to make a top-down movement shooter - with the mouse as its crosshair, and a larger circle for the movement. It wasn’t until seeking guidance online that it was decided to create an asteroid-like game for the project.
Ship Class and Objects
The movement and ship were created from classes and objects. In the draw function, the classes were called in the constructors which allowed for seamless movement and calling of objects without being repeated in the draw function. It also allowed for flexibility and readability for other developers to change specific values in the object’s functions.
Asteroid Function and Collision
The Asteroid function works by an if else statement that draws the asteroid downwards until exiting the screen. Once leaving the screen, the diameter of an asteroid changes size and x-location.
Collision is detected by a third-party P5js library from its website. Once the hit collision detects true, the ui.death function as called from the ui class (which decreases the size of the life counter), and the lives are decreased by 1. The spaceship also resets to normal position.
Boss
The boss stage’s “lottery” system details the chance of the asteroid going downwards to attack the player. Because the function is called from the draw function, the lottery variable is continually randomized from 1-100 (since the draw function continually repeats itself). So, if the variable hits lower than 5, the ram function activates and resets.
Visual Assets
The visual assets were created from Adobe Illustrator, while the space gif background was found online. Using design elements of figure/ground and size, I was able to create varying amounts of depth in the composition.
Reflection
As a beginner user of javascript, it was possible to create a functional and pleasing game that met the expectations of what was ideated. Creating and implementing the functional aspect of the game taught me a lot about the work and trials that come to the code. Designing the visual assets also increased the game aesthetically, and also gave insight as to how important design and function rely on each other. All in all, I’m glad to have taken on this project.
https://editor.p5js.org/raxadavid/sketches/ovnthdgn9
