ArcadeGame

• Build a Classical Arcade Game (Frogger Game Clone)(Project 4).
• Created for the Udacity Nanodegree Front End Web Developer- (Full Google Scholarship).

Table of Contents

• Project
• Installation
• Play the Game
• Game Logics
• Mockup
• Game Start
• Basic Game Functionality
• Additional Game Functionality
• Code Dependencies
• Bugs
• Contributing
• Credits

Project:

• Students are given a Udacity startercode (HTML,CSS and various JS files) of the static ArcadeGame project.
• Goal: to get the Player from the road safely over the grass into the water.
• Challenge: to avoid the Labybirds (Enemies) travelling on the road.
• If a bug is touched, the Player is reset back at the beginning.
• Upon reaching the water, the Player is also reset back to the beginning.

Installation

Clone this project and open the index.html file in your browser, or click the link in the Project description.

Play the Game:

Play the ArcadeGame.

Mockup:

Game Logics: (How the game works)

• Goal game: get Player from the road safely over the grass into the water.
• Challenge: to avoid the Ladybirds (bugs) that travel on the grass.

TODO-list ArcadeGame project

In order to let the game work properly, the following requirements need to be met:

Basic Game Functionality (Requirements):

• • Inside the app.js file, create two objects using Object-Oriented JavaScript.

• Object1= Player
• Object2= Enemy.

• The Enemy should:

• move to one direction on the pavement only (= right).
• move in varying speeds.
• Create the Enemy function, which initiates the Enemy by:
• Load image by setting this.sprite to appropriate image in image folder (provided)
• Set initial location of the Enemy (TODO)
• Set Enemy speed (TODO)
• Create the update method for the Enemy
• Update location of the Enemy
• Handle collision with the Player
• add OWN Enemy methods if needed

• The Player should:

• reach water using arrowkeys.(up, right, down and left)
• NOT collide into an enemy.
• Implement the Player class. Use the Enemy class as example
• Create the Player function, which initiates the Player by:
• Load the image by setting this.sprite to appropriate img in image folder
• Use code from the Enemy function as example to get started
• Set the Player initial location
• Create the update method for the Player. Use Enemy function code as example
• Create the render method method for the Player. Use the Enemy Render method code as example
• Create the handleInput method
• receives user input, allowedKeys (pressedKey)
• move the player according to input. In particular:
• Left key: Move player to the left.
• Right key: Move player to the right.
• Up key: Move player up.
• Down key: Move player down.
• Recall player cannot move off screen (check it and handle appropriately)
• Add own Player methods if needed
• Once completed implementing the Player and Enemy, instantiate them by:
• Creating a new Player object

• Collision:

• If player and enemy collide, game will reset. *Game End:
• If player reached the water, the player wins the game.
• If the player reaches the water,
• game reset
• move player back to the initial location (separate reset Player method to handle).

Additional Game Functionality (Extras):

In addition to the basic Game functionality, I will add the following additional Game features:

• • Score:

• Implement a Gamescore.
• Increase Score each time the player reaches the water
• Reset Game to 0 (or reduced) when collision occurs.

• • Collectables:

• Add gems to the game.

TODO:

• [] Allow the player to collect gems.= Create player/gemcollision to collect gems.
• [] Restart button. Define var, create function and add EventListener in JS.
• [] Create lives=hearts, so player can win/lose his life.
• [] Make Modals appear on StartGame (= modal with GameRules)
• [] Make Modals appear on Game = lost (= modal GameOver)
• [] Make Modals appear on Game = won (= modal GameWin)

Code Dependencies (TODO)

• This project is created based on the Udacity starterscode.
• I used the following codesnippets, fonts, images, backgrounds & emojis to create the game:

• Codesnippets:
• Fonts: TO ADD

Bugs:

No known bugs, except for the ones on the screen.

Contributing

No pull requests are accepted.

Credits