Lunar Conflicts game

Live link to deployed project (hosted on GitHub Pages)

User Experience (UX)

Lunar Conflicts is based on the 1980s Atari game Missile Command. Players must defend their cities by shooting down the missiles raining down from the large invading alien ships. Collect upgrade points by shooting the smaller ships out of the sky and salvaging parts from them.

How long can you last?

User stories:

User goals:

click to view

1. "As a player, I want to be able to play for as long as I want, without any time constraint."
2. "As a player, I want to be able to easily use my mouse to play on desktop."
3. "As a player, I want to receive an upgrade(s) if I reach a certain level of the game."
4. "As a player, I want to receive power-ups at different stages throughout the game."
5. "As a player, I want to be able to see my progress through the game visualised on-screen as a score."

Developer goals:

click to view

1. "As a game developer, I want to create a user-friendly game that's easy to play."
2. "As a developer, I want to create different levels of difficulty within the game."
3. "As a developer, I want to build a timer/scoreboard into the game's UI so that players can see their progress."
4. "As a developer, I want to give upgrades to players of the game when they reach a certain level."
5. "As a developer, I want to make power-ups a feature of the game."

Project Design

Colour scheme:

click to view

Typography:

click to view

• Primary (in-game) font...

  • Family: Unscii
  • Fallback(s): n/a

• Secondary (footer) font...

  • Family: PixelMix
  • Fallback(s): Courier, Monaco, monospace

Wireframes and Mockups:

click to view

Features

Existing Features:

• canvas:

click to view

The Lunar Conflicts game has three primary 'scenes', each of which is rendered in turn inside the graphical HTML5 canvas element...

1. Start (main menu) scene

2. Gameplay scene

3. Lose (game over) scene

• footer:

click to view

The footer is fixed to the bottom of the page in each of these scenes, and it contains links to the GitHub accounts of all six Insert Coin team members.

Potential Future Features:

• Add expanded upgrades functionality to the game

• Make future versions of the game playable across mobile and tablet devices

• In-game Easter eggs

Technologies Used

Languages:

click to view

• HTML5: used for structuring the site
• CSS3: used for styling the site
• JavaScript: used for site logic and web page behaviour

Frameworks/Libraries, APIs, Programmes and Tools:

click to view

• Kaboom.js v0.5.1: JavaScript library used as the game's core development engine
• DaFont: used to import the PixelMix font into the project's stylesheet
• Balsamiq: used to generate wireframes during the project's design phase
• Visual Studio Code/Gitpod: used as the team's IDEs for the project
• Git: used for version control by utilising the Gitpod terminal to commit frequently to Git and push all commits to GitHub
• GitHub: used to compile and remotely store the project's codebase following successive local commits initiated from the command line
• GitHub Pages: used to host a live public version of the game site following deployment
• PicResize: used to crop and resize images
• Can I Use: browser compatibility tables used to cross-reference the viability of implementing certain HTML5 elements, CSS3 properties, file formats etc.

Testing

Full project testing details can be found here

Deployment

GitHub Pages:

click to view

This project has been deployed to GitHub Pages. The deployment process carried out was as follows...

1. Sign in to GitHub and locate the relevant repository. If you do not have a GitHub account, you may create one here.
2. At the top of the project repository page, select Settings.
3. On the Settings page, scroll down the menu flanking the left-hand side of the screen and select Pages near the bottom of the list of options.

This will open GitHub Pages....

4. Under Source, click the dropdown displaying Branch: None and select the master branch. Click Save.
5. The page will then automatically refresh and inform you that the site is now ready to be published, as well as indicating the https:// address to be used.
6. For reference purposes, a link to this newly-published site can be found in the Pages section of Settings (described above).

Forking the GitHub repository:

click to view

It is possible to fork this GitHub repository to view and/or make changes without affecting the original. This is achieved by following these steps...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on Fork, located near the top right-hand corner of the repository page.
3. You will now have a copy of this project's repository in your own GitHub account.

Making a local clone:

click to view

It is possible to copy the repository to your local machine so that you can fix merge conflicts, add or remove files and push larger commits without affecting the original project code. Cloning a repository pulls down a full copy of all the repo data that GitHub has at that point in time. See the GitHub Docs for further information, and below for a brief summary...

1. Sign in to your GitHub account and locate the relevant repository.
2. Click on the Code dropdown next to the green Gitpod button. This will reveal the Clone option.
3. In order to clone the repository using HTTPS, select HTTPS and copy the link shown (there is a copy button to the right of the URL).
4. Next, open Git Bash (see here for an overview of download options, if required).
5. Change the current working directory on your local machine to the location where you want the cloning to be made.
6. Type git clone into your IDE terminal followed by the URL you copied in Step 3 above, i.e.

https://github.com/CharlieMallon/RetroGamingHackathonTeam5.git

7. Press Enter.
8. Your local clone has now been created.

See the GitHub Docs for more information on all of the above processes.

Credits

Code:

Where code blocks/snippets/suggestions have been incorporated from external sources into this project's code, these have been noted through the use of comments. Beyond this, the developers made use of the following articles, workarounds and learning resources while building the site:

click to view

• Kaboom.js docs
• 'Easy JavaScript Game Development with Kaboom.js' (freeCodeCamp)
• '5 Tips for Getting Started with Kaboom.js' (Ourcade)
• 'How to disable text selection highlighting' (Stack Overflow)

Content:

The developers drew initial inspiration for the game's design and format from the following sources:

click to view

• 'Atari's Missile Command' (Wikipedia)
• 'Arcade Longplay [621] Missile Command' (World of Longplays YouTube channel)

Media:

click to view

Media type Title/Description	Format	Credit(s)	Link(s) to original source(s)
Favicon
'8-bit Mario Coin'	.png	NicePNG	NicePNG
Background music
'Never Surrender' (start scene)	.ogg	Patrick de Arteaga	Patrick de Arteaga: Royalty-Free Music
'Heroic Intrusion' (main scene)	.ogg	Patrick de Arteaga	Patrick de Arteaga: Royalty-Free Music
'Major Loss' (game over scene)	.ogg	Patrick de Arteaga	Patrick de Arteaga: Royalty-Free Music
Sound effects
Missile/Bomb explosion	.wav	DrPetter, Eric Fredricksen, Chris McCormick	jsfxr
Upgrade click noise	.wav	DrPetter, Eric Fredricksen, Chris McCormick	jsfxr

Acknowledgments

The team wish to thank their facilitator Maria for giving them plenty of power-ups throughout the project's evolution 🍄

Notice

Although no UFOs were harmed in the making of this game, we did sadly lose a few cities along the way 🤭

This site has been created for development purposes only.

back to top