webbizleads/Classic-Arcade-Game

Classic Arcade Game developed using new Javascript ES6 specifications such as class and objects.

Project Title

Classic Arcade Game - Cross the Roads

Table of contents

• Getting Started
• Prerequisites
• Up and Running
• Directory Structure
• Project Description
• Code Overview
• General information
• Screenshots
• Build In
• Frameworks used
• Features
• Inspiration
• Status
• Authors
• License

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development purposes. Follow the Prerequisites need to run the code for furthur research.

Prerequisites

Softwares Needed

Download and Install VISUAL STUDIO CODE
https://code.visualstudio.com/download

Need Browser to run or debug our code

• Download and Install GOOGLE CHROME Browser

Knowledge

• Knowledge in HTML, CSS, JAVASCRIPT
• Knowledge in OOPS in Javascript.

Knowledge Base

• HTML TUTORIAL - https://www.w3schools.com/html/
• CSS TUTORIAL - https://www.w3schools.com/css/
• JS TUTORIAL - https://developer.mozilla.org/bm/docs/Web/JavaScript

Up and Running

Run the Game

After Downloading Google chrome --> right click on index.html file in classic arcade game folder -> Open with option -> select Google Chrome -> Play the game in the browser.

View project Files

After Downloading Visual Studio Code --> Open Visual Studio Code software -> Open Folder option -> select Classic Arcade Game folder -> set up your workspace.

Directory structure

Classic Arcade Game project folder contains following sub-folders

css/

• css folder contains style.css custom stylesheet written in css.
• Bootstrap - Responsive front-end Framework used.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css
• Fontawesome.css is used in this project
https://use.fontawesome.com/releases/v5.7.2/css/all.css

img/

• Contains set of image files used in the project.

js/

• resources.js - image loading utility.
• engine.js - Game loop Engine.
• app.js - custom javascript code written in js.
• sound.js - custom javascript code for audio written in js.

audio/

• Contains audio file used in the project.

html

• index.html - contains HTML5 content.

Project Description

This Classic Arcade Game is based on player and vehicle objects. Vehicles are moving at random speed on the road. The player needs to cross the road without colliding with number of vehicles. He losses it's life when the player collide with the vehicles.Player will win when he successfully crossed the road.

Code Overview

In this project we use Canvas to build the game.

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

Open app.js file and proceed furthur

This project contains two classes

• Enemy class
• Player class

Methods in Enemy Class

• update() method is used to update vehicle position and speed.
• render() method is used to render vehicle inside the canvas.

Methods in Player Class

• update() method is used for player selection.
• render() method is used to render player.
• handleInput() method is used to handle keyboard actions taken by the player.
• checkCollisions() method is used to check Enemy - player Collision.
• scoreBoard(), scoreCalculation() method is used to calculate score.
• startingPosition() method is used to reset the player position when collision occurs.
• finalDisplay() method is used to display final score.

Global Method

• reLoad() method is used to reload the entire game.

Event Listeners

• 'Keyup' listener is used for player movement.
• 'click' listener is used to select player to play the game.

Game Control : keyBoard

• ←↑→↓ Arrow keys are used to Move the player.
• 'Keyup' EventListener and handleInput() method in app.js file are used for player Movemment.

Open sound.js file

It runs music theme for the game.

General information

• Player selection
• Move player using Keyboard
• Vehicle Movement
• Player and Enemy collision
• Display remaining life
• Losing life
• Final score board
• Running Game

Screenshots

state 1 : Player selection

state 2 : Move player using Keyboard

state 3 : Vehicles Moves at random speed.

state 4 : Player and Enemy collision.

state 5 : Display remaining life.

state 6 : Losing life displays popup with final score.

state 7 : Winning game displays popup with final score and gem.

state 8 : Running Game

Build In

VS code Editor Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS Matching card game developed in Visual Studio code software

Frameworks used

Bootstrap Framework Bootstrap is a free and open-source front-end responsive Web developement framework. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and components other components.

Fontawesome Font Awesome is a font and icon toolkit based on CSS and LESS

Features

• List of features ready for future development
• Increse the size of the game display
• Adding collectable objects in the game
• Add newly designed game levels in water
• Adding real time user experience

Inspiration

Project inspiration from Udacity FrontEnd Developer Nanodegree Program.

Status

Project is in progress for new level design and developement for advanced features.

Authors

Ranjith Kumar - [Classic Arcade Game] - (https://github.com/webbizleads/Classic-Arcade-Game)

License

This project is the open source license