• W3schools Tutorial -- Used to help me make the navigation bar.

• Image Address -- Loneliness image found through Google images
• Created the 3 images in the screenshots section of the proposal using adobe illustrator.

• Wrote down content for site and submitted for feedback.
• Received feedback on first idea which was admittedly quite a bad idea.
• Changed idea and came up with a new concept using feedback from last time as a guideline.
• Started coding site with a minimalist color style and color scheme in mind to fit style of game.
• Hit a snag with the navigation bar in CSS. Went to W3schools to figure out a nice and simple way to create a navigation bar.
• Played around with navigation bar settings to get the right feel for my site.
• Adjusted size of window for first time and saw that the site did respond very well to smaller screens.
• Designed media queries for various size screens.
• Got feedback from classmates on the site, the site was too black and they wanted a lighter shade of black.

Game Update

Process

• Took base structure of circle blast to provide frameworks for game.
• Removed Circle Blast movement to implement arrow key movement.
• Noticed problem with movement due to how Pixi JS events worked. Created jerky movement that did not feel nice and could only move in 4 directions. (Up, down, left, right. No diagonals)
• Fixed movement using an array that holds which keys are currently being pressed. (Adds key to the array when key is pressed, removes key when key is released) I did this because Pixi JS's built in event for a key being held down resulted in the player moving, stopping for a second, then moving again whenever you pressed an arrow key. Did not feel good.
• Added classes for NPC's. These NPC's would follow the player and then fade away after a certain point based on distance traveled.
• Added NPC's that run away from the user depending on user's position. (Always run away in the most efficient way possible ie. directly away from player) Originally planned to use something like a Vector for this, but JavaScript has no built in vector class, unless I download something from some library. Ended up creating it on my own. NPC's use fractions to determine how much they need to travel in the x and y directions to avoid the player
• Added music.
• Fixed movement (probably). Used a filter array to remove any double elements in array when key is released
• Added fade in transitions between scenes.
• Added fade out transitions on music
• Added loop to make "experience" endless. (Loops after certain distance traveled)
• Player fades out if they stop moving. Game ends when player is completely gone
• Played around with UI. It's still very basic, but I found putting the button in the top left corner with a lot of empty space created a nice effect that contributed to the overall feel I was going for.
• Shoehorned in some use of local storage. You can rate my "game" at bottom and the value gets saved. I rated it 2 stars

Controls and goal

• Arrow keys to move
• Just keep moving forward.

Attribution

• Long Note Three by Kevin MacLeod is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/by/4.0/) Source: http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100424 Artist: http://incompetech.com/
• Ether by Silent Partner. YouTube audio library (Free to use)
• Ambient Ambulance by Jingle Punks. YouTube audio library (Free to use)

Resources

• Using howler.js for sound effects. (Fade in, fade out, play, pause, etc.)
• Using FontAwesome for Stars (That is where all the CSS errors are coming from)

Above and Beyond

• I fiddled with alpha values of sprites and containers to create a lot of my effects.
• I made transitions between scenes. (Fade in/out)
• I messed around with howler and it's fade method to get the right feel for my music transitions.
• I used a mathematic equation to calculate the direction the runners should flee in. They always flee directly away from player.
• I created a class of NPCs that move in a nice pattern and can make some really neat formations when placed strategically
• Created smooth movement for arrow keys using an array that has a keycode pushed to it when a key is pressed. When the user lets go of the key, I use a filter to get rid of all the instances of a keycode. It is only allowed to push a keycode if the array doesn't already contain that keycode, but I filter anyway just in case. This creates smooth, non-jerky movement that isn't possible if Ijust used the built in events.