kooltheba / arcade-game-clone Goto Github PK

The Player function, which initiates the Player by:

• Loading the image by setting this.sprite to the appropriate image in the image folder (use the code from the Enemy function as an example on how to do that)
• Setting the Player initial location
• The render method for the Player (use the code from the render method for the Enemy)
• The handleInput method, which should receive user input, allowedKeys (the key which was pressed) and move the Player according to that input. In particular:
  • Left key should move the Player to the left, right key to the right, up should move the Player up and down should move the Player down
  • Recall that the Player cannot move off screen (so you will need to check for that and handle appropriately)
  • If the Player reaches the water the game should be reset by moving the Player back to the initial location (you can write a separate reset Player method to handle that)
• The update method for the Player (can be similar to the one for the Enemy)

Documentation

• Improve documentation

In this game you have a Player and Enemies (bugs). The goal of the player is to reach the water, without colliding into any one of the enemies.

• The player can move left, right, up and down
• The enemies move at varying speeds on the paved block portion of the game board
• Once a the player collides with an enemy, the game is reset and the player moves back to the starting square
• Once the player reaches the water (i.e., the top of the game board), the game is won

To Do

General Tasks

• Fork the repository
• Clone the Repository in C9.io

Game Functions

• Error free: the game functions correctly and runs error free.
  • Player can not move off screen
  • Vehicles cross the screen
  • Vehicle-player collisions happen logically (not too early or too late)
  • Vehicle-player collision resets the game
  • Something happens when player wins

Object-Oriented code

• Object Oriented Code: game objects (player and vehicles) are implemented using JavaScript object-oriented programming features.

Documentation

• README: a README file is included detailing all steps required to successfully run the application.
• Comments: comments are present and effectively explain longer code procedures. As a rule of thumb: describe what all custom functions and object methods do.
• Code Quality: code is formatted with consistent, logical, and easy-to-read formatting as described in the Udacity JavaScript Style Guide.

Additional functionality

• Score: you can implement a score for the game. For example, the score can increase each time the player reaches the water, and it can be reset to 0 when collision occurs (or it can be reduced).
• Player selection: allow the user to select the image for the player character before starting the game. You can use the different character images provided in the images folder.
• Collectibles: you can add gems to the game, allowing the player to collect them to make the game more interesting.

Behaviour Expected

expectations

• Scene should be rendered without enemies or player
• No Errors should be shown in the console

Current Bugs

• ReferenceError: allEnemies is not defined
• ReferenceError: player is not defined
• Uncaught TypeError: player.update is not a function
• Uncaught TypeError: player.render is not a function

Game mechanics

• Handles collision with the Player (you need to implement)
• Score: you can implement a score for the game. For example, the score can increase each time the player reaches the water, and it can be reset to 0 when collision occurs (or it can be reduced). Additionally a life counter is added, that would start from 3 and each collision takes away 1 life...and so on.
• Game Over modal: when lives = 0, a modal appears with the info "Game Over" and a button "Play Again"
• Generate Enemies position and amount randomly
• Improve documentation and refactor

Additional design features

• Background img
• Improve score/lives counter design

The Enemy function, which initiates the Enemy by:

• Loading the image by setting this.sprite to the appropriate image in the image folder (already provided)
• Setting the Enemy initial location (you need to implement)
• Setting the Enemy speed (you need to implement)

The update method for the Enemy:

• Updates the Enemy location (you need to implement)

More:

• Documentation

Additional functionality

• Player selection: allow the user to select the image for the player character before starting the game. You can use the different character images provided in the images folder.
• Collectibles: you can add gems to the game, allowing the player to collect them to make the game more interesting.
• Winning condition: a modal congrats appears when winning (p.e. reaching score = 1000).

Inside the app.js file, you will need to implement the Player and the Enemy classes, using Object-Oriented JavaScript. Be sure to review all code comments written in app.js. Part of the code for the Enemy is provided to you, and you will need to complete the following:

• The Enemy function, which initiates the Enemy by:

  • Loading the image by setting this.sprite to the appropriate image in the image folder (already provided)
  • Setting the Enemy initial location (you need to implement)
  • Setting the Enemy speed (you need to implement)

• The update method for the Enemy:

  • Updates the Enemy location (you need to implement)
  • Handles collision with the Player (you need to implement)

You can add your own Enemy methods as needed. You will also need to implement the Player class, and you can use the Enemy class as an example on how to get started. At minimum you should implement the following:

• The Player function, which initiates the Player by:

  • Loading the image by setting this.sprite to the appropriate image in the image folder (use the code from the Enemy function as an example on how to do that)
  • Setting the Player initial location

• The update method for the Player (can be similar to the one for the Enemy)

• The render method for the Player (use the code from the render method for the Enemy)

• The handleInput method, which should receive user input, allowedKeys (the key which was pressed) and move the Player according to that input. In particular:

  • Left key should move the Player to the left, right key to the right, up should move the Player up and down should move the Player down
  • Recall that the Player cannot move off screen (so you will need to check for that and handle appropriately)
  • If the Player reaches the water the game should be reset by moving the Player back to the initial location (you can write a separate reset Player method to handle that)

You can add your own Player methods as needed as well. Once you have completed implementing the Player and Enemy, you should instantiate them by:

• Creating a new Player object
• Creating several new Enemies objects and placing them in an array called allEnemies

Beyond that, feel free to add additional functionality to the game. You can add more code to the app.js file and to the Enemy and Player classes to accomplish that.