Giter Club home page Giter Club logo

arcade-game's Introduction

Frontend Nanodegree Project


Classic Arcade Game Clone

This game is loosley based on the classic 1981 video game, Frogger. In which the players frog character negotiated roads filled with hostile vehicles to reach safety at the top of the screen. This game is built using the HTML5 canvas element and canvas api. This is a project from Udacity's Frontend Nanodegree program.


Original

See original game in action: Frogger video

Original Frogger video game image

My Game

Visit: Game

Frogger arcade game clone image


Run Game

To run game simply download all folders and files and open index.html in browser. Game is not touch enabled so you will need a keyboard to play.


Game Instructions

Maneuverer your player safely across the road and to the water at the top of the screen. Take care to avoid enemy bugs, holes and troll racers along the way! To win your score must reach 50 points and you must cross the road and reach the water 15 times or more. Good luck!


Game Controls

The game can be played with keyboard arrow keys to move the player. Up, down , left and right!


Game Code

The games code uses javascript pseudo classical classes and subclasses and makes use of object prototype to create a range of on screen instances of various game entities. These are rendered on the canvas within a gaming loop.

I made use of jquery to create the transitions between the various game information screens, game over, win etc.

Code follows Udacity's style guide.


Game / Minimum Specification

  • Player cannot move off screen
  • Vehicles cross the screen
  • Vehicle and player collisions happen logically (not too early not too late)
  • Something happens when player wins

Customised Game Features

Beyond the required game elements I've added pick up items that randomly run across the screen that give various points when collected or in the case of 'heart' pick ups, give a new player life.

Also I've added game obstacles in the form of rocks and holes that the player must manoeuvre around. Rocks block your way and holes reset the player to start position as well as losing a player life.

The Game has added score, road cross and player life counters that track the players progress. If the score target is met before the road cross target is reached or vice versa, the text and text color changes to highlight the players current progress. When the player's life count reaches 1 the text and text color changes to red to alert player to their impending doom!

I've also added player alerts for colliding with enemies, crossing the road, collecting pick ups and falling down holes.

The player board and road size have been increased and I've added pre-game instruction screens and 'Game Over' and 'Win' screens to complete the experience.

arcade-game's People

Contributors

dar77 avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.