Judgement Day

SUBMISSION

Deployment

This project is deployed and can be accessed at https://stephendawsondev.github.io/j-day/.

Criteria

In this section, we will briefly discuss how our team addressed the applicable criteria:

• ✨ Project is 100% Front End
• ✨ Project must be retro inspired, inspired by actual retro game
• ✨ Project has neon and 80s music
• ✨ Basic Readme.md in place
• ✨ Use Frameworks such as Kaboom.js, phaser.js, three.js, babylon.js, pixi.js

ABOUT SUBMISSION

Intro

A retro game based on the Terminator franchise. A top-down shooter game with interactive enemies, difficulty progression, arcade style music and game sounds. Using solely the kaboom.js framework to implement various functions and colliding objects that combines to give the user a unique game play as well as nostalgic experience.

Goal

The goal of this project is to produce a retro emulator game following the criteria set out by the hackathon facilitators and incorporating the hard work, skills and abilities of each team member while enjoying the process of learning to develop new and unique software.

• To organise a group of strangers with varying abilities to join together to create an emulator type retro game from scratch using a new language and modern techniques.
• The game will be designed using a JavaScript framework called Kaboom. It will be new to most of the team but will be a beneficial learning curve for all involved.
• The game will be aimed toward people born in or brought up in the 70s and 80s who fondly remember playing old emulator games on arcade machines in seaside amusement parks and any fans of the terminator franchise who grew up following the story behind John and Sarah Connor in their timeless battle against SkyNet.

User Stories

• As a user, I want to be able to see the overall theme of the game from the welcome page.
  • The welcome page captures the overall theme and criteria, Retro style background, retro style neon flashing font.
• As a user, I want to be able to easily access the instructions on how to play the game.
  • The instructions are clear and concise, and the background is in line with the theme of the game.
• As a user, I want to be able to toggle the music/sound in case I find the volume to be too low or too high.
  • A toggle button was added to the welcome page for easy access to volume control.
• As a user, I want to be able to see the details of the game such as my score and lives.
  • The player is given clear information on the top of the screen it portrays the players points and players lives.
• As a user, I want to be able to easily move around the scene and feel there is a progression in difficulty.
  • There will one boss enemy that shoots and three basic enemies that chase player at different speeds the player will use the WSAD keys to move about the scene while using the spacebar to shoot the enemies.
• As a user, I want to be able to feel a sense of achievement such as high score or end level boss fights.
  • Due to time constraints the team found it would be easier to achieve a high score rather than multiple levels and boss fights. This is a feature that could be implemented in future iterations.
• As a user, I want to be able to pause and resume or quit the game if I so wish.
  • To pause the game was too difficult to implement in the given time.

A link to the repository user stories can be found here - https://github.com/stephendawsondev/j-day/issues?q=label%3A%22user+story%22+

Design

The criteria suggested an old school emulator game with retro neon style appearance.

Visual Design

• Pixel Art Graphics: Emulate the retro arcade feel with pixel art graphics, using a limited color palette to mimic the visual style of old-school games.

Level Design

• Arcade Amusement Environment: An urban environment that depicts an amuesement arcade park to provide even more nostalgia.

Audio Design

• Retro Sound Effects: Use sound effects inspired by classic arcade games, such as pew-pew laser sounds and explosive booms and the famous Wilhelm death scream.

Color Design

• Retro Neon Color: Incorporate many dark colors to entrench the apocalyptic scenario but apply neon colors such as yellow and bright purple to align with the criteria and arcade theme.

Gameplay Design

• Top down shooter: Design the game as a view of top down shooter, where players control a resistance fighter from above battling against waves of terminator enemies.

Typography

• The font chosen for the welcome page was picked from Kaboom.js as it has built in font apl386 and it has a very emulator appearance.
• The font chosen for the instructions page was picked to be a yellow "Comic-Sans MS" to be clear and stand out to the player.

Imagery

• Team Logo

  • Logo - Designed using https://www.canva.com

  

• Background Images

  • Welcome page - sourced from https://www.pxfuel.com/en/query?q=terminator+for+android

  • Instructions Page - sourced from https://www.radiotimes.com/technology/gaming/terminator-survival-project-release-date/

  

  • Game Over page - sourced from https://news.sky.com/story/terminator-and-other-sci-fi-films-blamed-for-publics-concerns-about-ai-12895427

  

  • Favicon - sourced using https://favicon.io/favicon-converter/

  

• Pixel Art

  • The pixel art was designed using https://www.pixilart.com/draw

    

  • The arcades and pinball machine were designed using a picture template from a google search

    

  • The carpet is similar to old style arcade amusement park carpets.

    

Audio

• The music was designed by Kyle Clow (Terminal8tors team member) as well as game sounds and other sound effects.

  • Music - created using the program https://www.ableton.com/en/

  • Wilhelm scream - sourced from https://bigsoundbank.com/

    

  • Scream when terminator is hit sound effect - sourced from https://www.youtube.com/watch?v=AZTFdO4a_ew&ab_channel=MatthewEhlerspresents

  • I'll be back sound effect - sourced from https://www.youtube.com/watch?v=B1ULWx0eflM&ab_channel=ShortVidClips%2F%2FSVC

  • Hasta la vista sound effect - sourced from https://www.youtube.com/watch?v=EIs4tQHEdxc&ab_channel=IfIamTheBass%3F

  • Gameover sound effect - sourced from https://opengameart.org/

  • Other sound effects - created using https://www.bfxr.net/

Controls

On starting the game, the player will use W, S, A and D to move the character around the screen all while avoiding enemies and enemy fire. Spacebar fires a projectile in the direction the player is facing.

Wireframes

www.figma.com - Figma is a cloud-based design and prototyping tool that is widely used for creating user interfaces (UI) and user experience (UX) designs.

Tech

• HTML5
• CSS3
• JavaScript
• Kaboom.js

Testing

The testing was completed mainly through team members having fun playing the game, which allowed us to identify various bugs that needed addressing. To identify the source of bugs we used the following tools:

• ESlint
• Developer Tools in various browsers (Console, Network, Performance tabs)

The game was tested on the following browsers:

• Firefox
• Chrome
• Safari

Bugs and fixes

SHOOTING ISSUES

• Bug 1: On player shooting bullets, the bullets change direction together with the player.
  • Issue identified: the placement of the spawnPlayerBullet() function meant the position of the bullet was updated every time the player changed position.
  • Fix: moved spawnPlayerBullet() to the outside of the spawnPlayer() function
• Bug 2: On player changing direction to up or down the shooting direction changes to diagonal, without possibility to shoot left, right, up or down.
  • Issue identified: the way the direction and update function were set up caused the onUpdate function to be called on all bullet, not only the one currently spawned, skewing their direction.
  • Fix: rewrote the function to use vec2 with x and y parameters to set direction and added bulletUpdateSet to control update behaviour
• Bug 3: On loosing and hitting Try Again, player’s bullets lose the ability to move and stay in place.
  • Issue identified: bulletUpdateSet variable did not update to false on loading the gameScene again.
  • Fix: Added resetBulletUpdateState() function to the player.js file and used it in the function checking if the player is dead to force the variable reset.

MUSIC & SOUND ISSUES

• Bug 1: Shooting sound loops over the life of bullet, making a continuous noise
  • Issue identified: function playing shooting sound played each time frame updated.
  • Fix: Moved code playing shooting sound to the function invoking spawnPlayerBullet() on keystroke.
• Bug 2: The volume control text showed to be a different style to the other text and it seems to be overlapped.
  • Issue identified: adjust the style or ideally change that to a little volume icon (like a sprite) that will show no volume and volume when needed.
  • Fix: Change the volume sprite.

JAVASCRIPT ISSUES

• Bug 1: Some JavaScript code seems to be generating something continuously, but the item is not removed and therefore the stack seems to overflow.
  • Issue identified: The screenshot below shows that the loading issue is caused by: Largest Content Paint (LCP), this means it could be better to have the images and sound loading done in the CSS file, the fail of caching the sounds and images is a result of the above reason, this could be the behind freezing issues.
  • Fix: Remove duplicated area on the terminator.
• Bug 2: Move collision detection to game scene.
  • Issue identified: Collision issues with game scene and character sprites.
  • Fix: Moved the collision detection to the gameScene.js file so that we can more easily handle collisions, lives and score updates.

Programs Used

Version Control

• Github used to host repository.
• Github pages used to deploy the website.

Code Editors

• Codeanywhere used to develop project and organise version control.
• Gitpod used to develop project and organise version control.
• VScode free and open-source code editor and customizable tool for writing code.

Libraries

• Pixelart used to design sprites.
• StackOverflow used to problem solve and deal with queries.
• ChatGPT used to generate placeholder text and to verify code.

Communications

• Slack a widely-used cloud-based communication and collaboration platform designed to facilitate efficient communication and teamwork within organizations, teams, and communities.

Credits

• Thank you to all the team members for the hard work and cooperation.

  • Stephen Dawson - GitHub, LinkedIn, URL Scrum Master/ Frontend / Documentation
  • Kyle Clow - GitHub, LinkedIn Design/ Frontend / Documentationad
  • Karolina Cisek-Ndlovu - GitHub, LinkedIn Design/ Frontend / Documentation
  • Adam Gilroy - GitHub, LinkedIn Design/ Frontend / Documentation
  • Mark Young - GitHub, LinkedIn Design/ Frontend / Documentation
  • Sasan Tazayoni - GitHub, LinkedIn Design/ Frontend / Documentation
  • Nazek Altayeb - GitHub, LinkedIn Design/ Frontend / Documentation
  • Mohamed Ayman - GitHub, LinkedIn Design/ Frontend / Documentation