An arcade style game built with p5.js that blends adventure with cheery illustrations, challenging player's reflexes and determination.
4 months
HTML, CSS, Javascript, p5.js, Adobe Dreamweaver, Illustrator
Conceptualize, Design, Game Build, Landing Page
In this project I was blessed to have full creative freedom with the concept. The only requirements were that we must be able to build the game with p5.js. As my first time working with JavaScript, my skills acted as a limitation of game mechanics. After conceptualizing three different ideas, I decided to make Nectar Navigators: an arcade style game similar to flappy bird that challenges users reflexes and determination.
Similar to any other project I work on, I started with visual research. With the creative freedom given to me, I decided to incorporate my favorite things into the game: flowers and hummingbirds. I drafted storyboards of each screen of the game and sketched the player avatar and environment it would be in.
Next I took the design concepts to Illustrator, where I created the digital assets for the game. The background was the most difficult thing to design, as it needed to seamlessly repeat as it moves across the screen.
This project was a learning experience for me as it was my first time using JavaScript and p5.js. I utilized resources provided in my programming class, as well as ones found on the internet. The book "Getting Started with p5.js: Making Interactive Graphics in JavaScript and Processing" proved especially helpful for a foundational understand of the library.
Before writing any major code, I made a list of objects I would eventually need to define.
Specifically, the obstacle and coin functions act as arrays, which produce multiple objects based on a set frame rate.
I broke up the game play into 4 scenes, in which I used p5.js switches to advance to each scene:
The first page of the game uses simple stationary graphics and an interactive "Play" button. When clicked with a mouse, the button will push users to the next scene.
The second scene, the "press space to start" page acts as a buffer, preparing players to begin the game. Originally this scene did not exist, which caused users to be quickly thrown into game play unprepared, likely resulting in failure. To improve the user experience of Nectar Navigators, I added this screen to give players a change to prepare themselves to the challenge.
Later in the code, I use function keyPressed() to make the hummingbird fly when the user presses space. When coding this portion, I ran into difficulty with using the same function as a trigger to move from scene 2 to 3. To solve this issue, I added the reference "let startExists" to define this scene as true, and "let homeExists" as false, allowing the function to work.
Scene 3 is where I spent most of my time coding. Creating the playable portion of the game involved a few major tasks:
Top create a continuously moving background, I started by defining scrollSpeed = 4. Having two separate background images made for a clean transition that didn't seen to repetitive. By equating x1 and x2 to the scrollSpeed, and using two if statements to match it to with x position of the images, the background is able to seamlessly scroll horizontally across the screen.
Next I focused on making the hummingbird avatar fly when players press the spacebar. With an object already set up for Bird(), I started to define its actions in a function. To give the bird gravity, I equated it's y-axis position to it's speed, which pulls it downwards at .5 pixels per frame. To counter act this, I created a function that makes isJumping= True on a mouse click, with pulls the bird upwards -8 pixels.
The flower obstacles presented a specific challenge as the needed to be generated at steady time intervals, but at random y-axis placements with still enough room for the hummingbird to fly between each. With an array, I coded new flower obstacles to appear with frame count. To move the obstacles at the same rate as the background, I simply reused this.speed. And to ensure even spacing between the obstacles, I determined the bottom flower's y-axis placement based on the top flower's.
The coins were a difficult object to code because the need to generate at the same rate of the flowers, but staggered in between each set of obstacles. This involved some troubleshooting, trying different technique to position the coins. In the end, with trial and error I found that generating the coins at width+150 positioned the coins roughly in between each obstacle.
Creating the collision code was probably the most challenging part of this project. As a beginner in p5.js, I was not very familiar in what techniques to use, so it required some research and experimenting to determine which method to use. In the end I decided to use if statements to check for collisions with the flower obstacles and coins. The function checked to see if the edges of the hummingbird overlayed with the edges of the obstacles and coins.
When the hummingbird touches an obstacle, the game is advanced to the end screen. When a coin is touched, a point is added to the coin score and the top of the screen.
The very last scene is the end screen, where the player is congratulated on their game play, and their score and coin count is shown. Players can play again with the "back to home" button.
HTML & CSS
The final part of the project was the landing page design and build. I used HTML & CSS to code it, implementing a CSS grid from simplegrid.io. I hadn't coded a website from hand in a while, so I appreciated the review. I enjoy understanding the backend part of web design, to understand design limitations and the method behind the product.
Check out the landing page for Nectar Navigators! Scroll to the end of the page to give the game a try and see how far you can take the little hummingbird.
