SBA 308H - Save the Universe

 CodeSandbox

This skill-based assessment uses CodeSandbox as one of its tools.

If you are unfamiliar with CodeSandbox, or need a refresher, please visit our reference page on CodeSandbox for instructions on:

• Creating an Account
• Making a Sandbox
• Navigating your Sandbox
• Submitting a link to your Sandbox to Canvas

Instructions

1. Create a Vanilla CodeSandbox and name it "Save the Universe."
2. You will be using your knowledge of JavaScript to build a rudimentary space battle game.
3. You will have two days to complete this project once it has been assigned.
4. Submit the link to your CodeSandbox on Canvas when you are finished.

This assignment's task is to build something according to specification.

Pretend you have received the specification below for a project.

• Planning your program is a challenge unto itself. START SIMPLE. Break the problem down as far as you can and don't move on until the smallest piece works.
• Once you've figured out the basics, it's up to you to make the game you want. Remember: your game does not have to be elegant. The only thing that matters is that it works.

This assignment will be used to assess how well you:

• Put together what you have previously learned.
• Use available resources to solve problems.
• Take requirements and expand upon them as needed.
• Use available time appropriately and meet deadlines.
• Learn new skills through experimentation.

The game will be programmed for and played using:

• window.prompt to get input from the user.
• Buttons in the browser.

You can also use console.log and window.alert.

This is your first mini-project. You should not style the page until you first get all of the functionality down. That being said, there are several optional bonus objectives listed at the bottom of this page should you find the time to challenge yourself.

Deliverables

1. A link to a CodeSandbox that contains your completed project with no errors (comment things out if they do not work).

🛸 SPECIFICATIONS

1. Build a game of battling alien spaceships using Javacript.

• Earth has been attacked by a horde of aliens! You are the captain of the USS Assembly, on a mission to destroy every last alien ship.
• Battle the aliens as you try to destroy them with your lasers.
• There are six alien ships. The aliens' weakness is that they are too logical and attack one at a time: they will wait to see the outcome of a battle before deploying another alien ship.
• Your strength is that you have the initiative and get to attack first. However, you do not have targeting lasers and can only attack the aliens in order.
• After you have destroyed a ship, you have the option to make a hasty retreat.

2. A game round would look like this:

• You attack the first alien ship.
• If the ship survives, it attacks you.
• If you survive, you attack the ship again.
• If it survives, it attacks you again ... etc.
• If you destroy the ship, you have the option to attack the next ship or to retreat.
• If you retreat, the game is over, perhaps leaving the game open for further developments or options.
• You win the game if you destroy all of the aliens.
• You lose the game if you are destroyed.

3. Ship Properties

All ships must have the following properties:

• hull is the same as hitpoints. If hull reaches 0 or less, the ship is destroyed.
• firepower is the amount of damage done to the hull of the target with a successful hit.
• accuracy is the chance between 0 and 1 that the ship will hit its target.

Your spaceship, the USS Assembly should have the following property values:

• hull: 20
• firepower: 5
• accuracy: .7

The alien ships should each have the following range of properties, determined randomly:

• hull: between 3 and 6
• firepower: between 2 and 4
• accuracy: between .6 and .8

You could be battling six alien ships each with unique values.

Example use of accuracy to determine a hit:

if (Math.random() < alien[0].accuracy) {
	console.log('You have been hit!');
}

👾 Where to begin?

Read over the specifications. Make sure you understand them. If you do not understand them, try to clarify them for yourself.

Plan the game. This is an act of simplification.

From these programming principles:

1. Use pseudo code to get a sketch of your game first.
2. Avoid Creating a YAGNI (you aren't going to need it). You should not try to add functionality until you need it.
3. Do the simplest thing that could possibly work.

Often, beginning something is an act of creative inspiration to find the simplest possible case. The first step is not necessarily a matter of logical deduction. Once you have a few 'clues' you can follow the trail of crumbs to a logical conclusion.

👽 Actors and then Actions

A good rule of thumb is start with the actors and then create the actions. What actors do we need? In this case, we need our spaceship and the alien spaceships. An action these ships can take is to attack something. Perhaps a ship object (an actor) could therefore have an attack method (an action).

A repeating action in the game is that these ships attack each other until one of them has been destroyed. This might necessitate a loop or multiple loops.

📑 Start Simpler than the Instructions Suggest

Keep these five things in mind when planning and coding your game:

1. Begin even simpler than the specifications suggest. In this case, perhaps just start with one alien ship instead of many alien ships, and get the code for one ship working first.
2. Root out any 'gotchas' that you really ought to foresee. In this case, will we really want nested loops -- one for a battle, one for iterating over aliens? How will we exit one loop and then exit the parent loop? Perhaps keeping it to one loop somehow will help us avoid unnecessary difficulties.
3. When coding, form a solid and testable foundation before building upon it with more functionality. In this case, is there a bug where an alien can attack after it has been destroyed? Better fix that bug before increasing the complexity of the code.
4. When you have a piece of functionality tested and working, commit it. Try not to commit broken code. Unsure of when to commit? Commit when something works. You want to save working code.

💻 Code Quality and Code Sharing

From the beginning, you will be writing your code for other developers.

Having to read and understand another developer's code is common practice. Get used to it now! In the 'real world', you will be in a position where you inherit someone else's code-base and are told to 'fix it' or to add a feature to the code.

What does this mean for your coding practices?

• Use proper indentation! On the job, your code immediately fails a code review if indentation is not perfect.
• Use semantic variable and function names, and use a verb for your function/method names.
• What your code does should be self-evident.
• If a piece of code is hard to read, have a comment above those few lines explaining what they do.

Your code should be as coherent to another developer as possible.

When you're working on large enough code bases, or swapping between projects on the job, your future self counts as that other developer as well! Write clean, well-documented code now and thank yourself later.

🚀 Bonuses

The following are not requirements put forth in the specification, so do not feel pressured to complete them. If you have time, though, completing these tasks will only help you learn more!

• The aliens send a random number of ships to attack Earth. Think of a reasonable range and implement it.
• Scientists have developed a super targeting computer for your lasers. You now are asked which of the aliens you would like to hit with your lasers.
• Scientists have improved your ship's shields. They don't work that consistently, and only improve your hit points by a random number each time.
• Scientists have put missiles on your ship. You only have a limited number of them, but they do a lot of damage. You can choose before each battle if you want to use one of your missles.
• The aliens have gained a higher level of intelligence and now can attack more than one at a time.
• Evil alien scientists have created an alien mega-ship. This mega-ship contains a number of "weapon pods" that each have their own individual hit points. These "weapon-pods" (objects) must all be destroyed before you can begin doing damage to the main ship, which also has its own hit points.

🚀🚀 Bonus Bonuses

If the bonuses above weren't enough to satiate your creative curiosity, try these tasks as well!

• When the game is over, prompt the user if they would like to play again, and make it so the user can play again with all the values set back to default.
• So far, the entire game is just one battle with many aliens. Implement a game that consists of multiple battles where enemies respawn for a new battle at the end of the old battle. Keep track of points for the number of wins the player has.
• After every battle, you are asked if you want to return to base and recharge your shields.
• Make the players and enemies stronger after each battle.
• Distribute medals and power ups to the player depending on points earned through wins.

📺 Extra Fun: Style the Console

You can use CSS in your Chrome console messages. Below is a simple example where messages are easier to differentiate.

To do so, use %c in the first argument to console log, and provide CSS to the second argument:

console.log('%c spacebattle', 'font-size: 40px');

You can use multiple CSS properties in this way:

console.log('%c You have done ' + player.firepower + ' damage ', 'font-style: italic; background: azure; border: 1px solid grey;');

Be creative with your styling, if you choose to add it!

While it is far beyond the scope of this project, you have also learned how to bind JavaScript functions to HTML DOM elements. If you are feeling extra ambitious and have the time to do so, you can create a User Interface for your space battle game using HTML and CSS, and then bind your already-created JavaScript game into those elements. In this way, you could even add CSS animations and make a "real" game!

🎮 Cheat Codes