EECS 493 Assignment 3: Asteroids Game

Hello, if you have any need, please feel free to consult us, this is my wechat: wx91due

Please submit your work to Canvas as a zip file, named a3_<uniqname>.zip . Replace <uniqname> with your uniqname: e.g. a3_zhaojer.zip , note that the angle brackets should NOT be included in your filename. Renaming (e.g., “-1”) done by Canvas is fine.

Not following the upload instruction will result in a penalty.

The objective of this assignment is for you to gain practical experience in building an interactive single-page web application with HTML, CSS, and JavaScript/jQuery.

Specifically, you will be creating a game called “Asteroids” as outlined in this spec. No external library, other than jQuery, is allowed. Watch this video for an overview:

https://youtu.be/waDMWIfT8yg

This assignment has 8 main components (denominator of 100 points):

1. Asteroids spawn randomly from different directions - 25 points

2. Shields and portals spawn at certain time intervals - 15 points

3. A rocket (controlled by the user) with the goal of traveling through portals - 15 points

4. A scoreboard - 5 points

5. Sounds - 5 points

6. A “Get Ready” splash screen - 5 points

7. A game over page - 15 points

8. Overall functionality - 15 points

You will use the starter code we provide to complete this assignment.

1 $ wget

https://eecs493staff.github.io/a3- asteroids/starter_code.tar.gz

2 $ tar -xvzf starter_code.tar.gz

Remarks:

• You will need to import all your Assignment 2 code into Assignment 3 starter code.
• See Overall Functionality section for details
• You may choose to not use the starter code and implement those functionalities yourself.
• Please check Piazza for any modifications and clarifications.
• Make sure that your application behaves properly on the latest version of Google Chrome. Your graders will use Chrome.

Before starting with this assignment, we recommend that you check out the following 2 resources that will make your progress in this assignment much easier.

This is a recording of a group office hour session from Fall 2022, which contains an overview of both Assignment 2 and Assignment 3, how to start, and some challenging aspects students had questions about.

This demo is on creating a simple game with JS from many semesters ago. It goes over some common JS functions for manipulating the DOM, which are important for this current assignment too. The demo is about 45 minutes.

https://drive.google.com/file/d/1ttQV8_Wzm37c

XrbEYuBXPAixG_UzQNFZ/view?usp=sharing

Blaster Game Starter Code:

https://drive.google.com/file/d/1r5YC7vx_9l5G

BzTYRpGE-5ewFbGN12Lk/view?usp=sharing

The remaining pages are the same as Assignment 2.

We outline the requirements for each of the components below. Everything listed in this section, unless labeled as “Suggested”, is required. The demo video & screenshots may be helpful in understanding the game; however, your game does NOT need to look exactly like them.

• Only use one HTML file, index.html . -10 points off if not followed.
• Do all styling/layout in a separate CSS file, index.css . -10 points off if not followed.
• Remark: <b> and <i> tags count as inline styling. Do not use them.
• Moderate use of <br> tags are ok.
• Do all JavaScript code in a separate JS file, page.js . -10 points off if not followed.
• Registering event listeners for an HTML element inline is ok.
• Use relative paths for images. -10 points off if not followed.

• Asteroids should appear randomly from the side of the board, move through the board linearly, and disappear once they reach the other side of the board.
• Both the start and end location of the asteroid should be random.
• The speed and spawn rate of the asteroids change depending on the difficulty.
• Easy:
• Spawn rate: every 1000 milliseconds
• Speed: 1x
• Medium:
• Spawn rate: every 800 milliseconds
• Speed: 3x
• Hard:
• Spawn rate: every 600 milliseconds
• Speed: 5x
• The exact speed for each difficulty is up to you.
• At the beginning of the game, the asteroidʼs speed for medium should be 3 times faster than the asteroidʼs speed for easy, and the asteroidʼs speed for hardshould be 5 times faster than the asteroidʼs speed for easy.
• Every time the level increases (i.e. when the player goes through a portal, see next section), the asteroidʼs speed increases by a certain constant multiple.
• You may choose whether the speed of the already-existing asteroids increases or not. But the speed of the newly-created asteroids (i.e. asteroids that are about to appear) has to increase.
• You can implement the asteroids to have the same speed, or have them so that they all reach their destination in the same amount of time. Either is fine.
• The asteroids can overlap each other on the board.
• To save you time, the majority of the requirements here are already implemented for you, and the remainder can be easily implemented using methods of the Asteroid class.
• Asteroid Suggested Style: height: 62px; width: 62px;

• A portal spawns every 15 seconds and disappears 5 seconds after it was spawned.
• A shield spawns every 10 seconds anddisappears 5 seconds after it was  spawned.
• The location of the portal and shield on the board is random and should be contained entirely within the dimensions of the board.
• It is okay for the portals and shields to appear over the scoreboard.
• The asteroids, portals, shields, and player should all roughly appear to be around a similar size.

A rocket (controlled by the user) with the goal of traveling through portals (20 points)

• The rocket should not be able to bemoving “behind the scenes” when it is not visible on the screen (i.e., when it is not on the gameplay page).
• The rocket moves up/down/left/right, controlled by the keyboard arrow keys.
• The player can only move within the game board and should not be able to exit the board.
• When the rocket comes into contact with an asteroid without a shield:
• Change the player gif to “player_touched.gif” and play the “die” audio.
• The player and all asteroids should immediately stop moving, and stay at their current position for 2 seconds.
• Then, transition to the “game over” page.
• When the rocket comes into contact with an asteroid with a shield:
• The player loses the shield (and the asteroid can be removed if you want)
• The game continues unless the player comes into contact with an asteroid without a shield
• When the rocket comes into contact with a shield:
• The player obtains a shield.
• The gif of the player now has a shield on.
• Play sound for when the player collects an item.
• When the rocket comes into contact with a portal:
• The level increases by 1.
• The asteroidʼs speed increases by 0.5 (i.e. current speed *= 1.5).
• The danger increases by 2.
• Play sound for when the player collects an item.
• When you hold down an arrow key, the player should keep moving in that direction until you stop holding down the key.
• The player should be able to move in two directions at the same time, such as moving left and down from pressing the left and down arrow keys. Basically, you should be able to move in diagonal directions.
• You do not need to worry about what happens when the player presses 2 keys with opposite directions or more than 2 keys simultaneously.
• When the player is moving in a particular direction:
• The blinking light of the spaceship/player should be pointing in that direction.
• This can be done by using different player gifs for each of the directions.
• If the player is moving diagonally, pick one direction the blinking light should point towards.
• When the player is not moving, the blinking light should be in the center
• The exact speed of the player is up to you but it should be consistent in all directions.
• You may choose whether the speed of the diagonal directions to be the sameor different from the non-diagonal directions.

• The scoreboard (on the top right) should always be visible during the gameplay.
• It should not be visible on other pages of the game.
• It is okay for game items to appear over the scoreboard.
• A “Score” label with the current score, which starts at 0 and increases by 40 every 500 milliseconds the player staysalive.
• A “Danger” label:
• It should start at a different number depending on the difficulty:
• Easy: 10
• Medium: 20
• Hard: 30
• Everytime the player travels through a portal, “Danger” increases by 2
• A “Level” label with that count, which starts at 1 and increases by 1 everytime the player travels through a portal
• The Score, Danger, and Level should be reset (to their original value, corresponding to the difficulty) after thegame ends.

• When the player gets an item or when the player dies, the corresponding sound plays.
• It is ok if the player gets two items, one immediately after the other, and the sound only plays once.
• The volume of the sounds should be based on what was set in the settings panel.

Main Components

• All items and texts as shown in the screenshot
• A scoreboard visible on the top right corner with the correct values

Required

Suggested Style

Main Components

Required

If you are trying to set the width and height for asteroid elements but itʼs not working, double check what element youʼre actually setting the

width and height for. If you are setting the width and height on the “div” containing the image, this doesnʼt actually affect the image size; itʼs simply a container for the image. You likely will need to set the width and height for the image element itself.

If you think your event listeners arenʼt being triggered, one common error occurs when event listeners are created (and attached) before relevant DOM objects exist.

1$("body").on("click", ".deleteX", function(event){

2 …

Here, the “body” is listening for all click events, and is essentially only passing them to the callback if the item clicked actually had the “deleteX” class. See the “selector” arg here: https://api.jquery.com/on/