Git Product home page Git Product logo

ghost-hunter-game's Introduction

Ghost-Hunter-Game

Ghost-Hunter

alt text

Ghost Hunter

A Duck Hunt-style first-person shooter built using html, css, & javascript featuring ghost enemies that takes place in a graveyard throughout 3 levels + a Boss Level.

Point-and-click to fire at the ghost's heads and earn +5 points per target. Earn 50 points and you reach the High Score to win the game

Screenshots


screenshot 1

screenshot 2

Instructions


resize window to '888px' for best interactive view (click the audio player at the top of the screen to begin the game soundtrack)

Start by selecting your Player and then clicking the "Level 1" button. The ghosts will populate and begin to scatter. Your job is to aim as best as you can at the head and click to shoot. Each successful hit is an additional five points. The winning goal is 50 points. Once you defeat each ghost, move onto the next round by clicking the next glowing "Level" button.

The boss arrives in level four and is the final battle. Ghosts enemies can also strike back and attack the player. They will swoop in at the screen and inflict damage. ghosts can also evade your attacks by performing swift evasive maneuvers, shrinking, floating into the distance, vanishing, and hiding behind gravestones in the graveyard. Each hit is a lethal attack and results in a Game Over, at which point the player has the option to reset the game. At any point in the game, you can hit the "reset" button manually to clear the exising ghosts and levels and restart at level 1.

This is a Two-player game. To switch players, select the "Player One" or "Player Two" button at the bottom of the screen. Player 1 is green and Player 2 is red. Ghost Hunter is a co-op game, which means that each player's scores are summed to reach a single ultimate goal and win the game after all enemies are destroyed. Your total score is calculated at the right side of the top status bar.

Note:

Github Pages hosted link not properly displaying target cursors or playing all audio correctly

Motivation


Per Scholas Week 7 Project Assignment: "The DOM Based Game"

Approach


-Using buttons to initialize different sets of ghosts per level with keyframe animations
-Click events for ghost "hit" actions which perform a secondary animation via getElement functions
-Points are accumulated and reassigned to the Score variable as they are gained
-Math.random is used to provide a random number between 1 & 500 which provides the ghosts with a chance value that they will attack the player after every successful player point
-A ghost attack results in the Game Over function being called, which activates the "game over" & reload sequence where the game is reset automatically
-innerHtml is used to print score to screen according to which player is active
-Each successive move is manually controlled by the human players and the game is 2-player co-op. User can activate each level function in order to continue to the next round of enemies and win the game
-Reset is also possible via manual control
-User will be prompted upon losing the game to restart via a windows prompt
-Ghost movements get increasing more difficult to track and target as the rounds progress via keyframe animation sequences
-Each event brought on by an eventListener (typically a click or onClick action) sets off a new sequence of functions that play out with user interaction until the level is complete, at which point the user has the option to manually progress to the next stage, allow player two to take over, or restart the game
-The game screen currently has a fixed width and is not responsive to window resizing

Tech/Framework


Built With:

-Javascript
-CSS
-HTML5
-Photoshop (background image editing)
-iZotope RX 10 (audio processing)

Roadmap:

  • Health Bar - depletes with each atack, triggers game over state
  • Title Sequence
  • Fix window resize shifting ghosts
  • Ammo gauge (per level?)
  • Cleaner Animations
  • Lightning gif overlay on round 2
  • Better foreground gravestone element sizing/placement
  • More accurate tracking and execution of "ghost hit" animation
  • Add new animated background elements/gifs per level w/sound fx
  • Display current level text on screen-status bar
  • Increase ghost retaliate/attk chance with each level
  • Add autoplay sound effect functions
  • New ghost images per level
  • Per Player Score/Additional "Vs" multiplayer mode
  • Next Round indicator button animations

Unsolved/To Be Accomplished

separate states per level/player, individual remaining ghost attack function, ghost attack chance increases with time , more detailed ghost shaking once attacked "rotate" keyframe animations, more evasive maneuvers from ghosts once hovered over, separate point value for boss enemy, better responsive screen resize/css flex ghostcontainer

ghost-hunter-game's People

Contributors

kenneth-rakentine avatar

Watchers

 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.