No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
assets
audio
css
images
js
sandbox
.eslintrc.yml
.gitignore
README.md
index.html
package.json
project-worksheet.md
user-stories.md

README.md

Steve Fighter

Project Overview

Day Deliverable
Day 1 Tuesday Wireframes and Priority Matrix
Day 2 Wednesday Project Approval / Pseudo Code
Day 3 Thursday Basic Clickable Model
Day 4 Friday Working Prototype
Day 5 Saturday Final Working Project
Day 6 Sunday Bugs / Styling / Post MVP
Day 7 Monday Bugs / Styling / Post MVP
Day 8 Tuesday Project Presentations

Project Description

"Steve Fighter" is a personal rendition of a classic multiplayer arena style fighter. Two players face off against one another and use attacks to reduce the opponent's Hit Points to zero. The first player to defeat the other wins!

Wireframes

Priority Matrix

Game Components

Landing Page

When the site is fully loaded, the players will see a the title, "Steve Fighter," as a logo. There will be a "Player 1" and "Player 2" name input form with a button for submission. Once they have successfully input their names, a "Start" button will appear to initialize the game.

Game Initialization

When the game is initialized, the players will see a "Hit Point" counter which will dictate how much health their character has remaining. Two character avatars will be face to face with some distance between them. Their input names from the landing screen will display in their respective lower corners.

Playing The Game

Using one hand, the players will be able to control their respective avatars by using the keyboard. The players will then attempt to reduce their opponent's "Hit Points" to zero.

Winning The Game

When a player successfully reduces his or her opponent's "Hit Points" to zero, he or she wins the game. They will land on a "Win" screen that displays their name announcing that they are victorious.

Game Reset

On the "Win" screen, they will have the option to restart the fight or go back to the landing page for new player name inputs.

MVP

  • Landing page will have logo and player input for names
  • Start button will appear after successful name input and begin the game
  • Two character avatars at game initialization
  • Respective Player Hit Points at upper corners of screen
  • Player names in respective lower corners of screen
  • Players will reduce each other's Hit Points via attacks
    • Punching only
  • When one player reduces the opponent's Hit Points to zero, respective player wins
  • End screen displays Player's name as victorious
  • Option to replay or return to landing page for new player name input

POST MVP

  • Timer for timeout "Draw" clause
  • Health Bar replaces "Hit Point" system
  • Expanded attacks
  • Enhanced attack animations
  • Enhanced character animations
  • Enhanced character avatar design
  • Enhanced level / background design
  • Sound FX for attacks
  • Background Music
  • Expand number of available Characters
  • Character Selection appended to Landing Page
  • End screen option to change characters
  • Multiple fights per match, best 2 out of 3

Functional Components

Component Priority Estimated Time Time Invested Actual Time
Hit Detection Logic H 4hrs 8hrs 12hrs
Hit Point System Logic H 4hrs 5hrs 4hrs
Character Development - Hit Detection H 5hrs 3hrs 1hr
Character Development - Hit Point System H 3hrs 3hrs 3hrs
Landing Page Development - Player Name Input Form H 2hrs 2hrs 2hrs
End Page User Interface - Reset Button H 1hr 1hr 1hr
Character Development - Controls M 3hrs 4hrs 5hrs
Win Case Logic M 2hrs 1hr 1hr
Character and Level Design - Base Visual L 1hr 1hr 1hr
Character and Level Design - Animation L 1hr 2hrs 2hrs
Landing Page Design L 2hrs 2hrs 2hrs
End Page Design L 1hr 1hr 1hr
Sum Hours 29hrs 33hrs 35hrs

Helper Functions

Function Description
HitDetect() Uses MDN's Colllision algorithm and getClientBoundingRect() to determine if two DOM elements have collided
HPBar() Reduces the width of a DOM element proportionate to its initial value

Additional Libraries

jQuery: Used for DOM element targeting, DOM element creation and event listeners

Code Snippet

function p1HPBar() {
  // 350px is the initial width of the HPBar div
  return 350 - (350 - ((p1HPVal * 350) / 101));
}
...
function damage(player, playerHPVal, damageVal, playerHPSpan) {
  if (playerHPVal > 0) {
    playerHPVal -= damageVal;
    // For Testing
    // playerHPSpan.text(playerHPVal);
    if (player === 1) {
      $('.player-1-hp').css('width', p1HPBar);
    } else if (player === 2) {
      $('.player-2-hp').css('width', p2HPBar);
    }
    return playerHPVal
  }
}

This is the code that dynamically updates the size of the health bar based on damage taken by the player. I am proud of this piece of code because I conceived the logic and mathed my way through it myself.

jQuery Discoveries

on() - for event listeners css() - for dynamically changing elements replaceWith() - for massive HTML codeblock recreation animate() - for div motion

Change Log

Did not implement Character animations due to time constraints.

Issues and Resolutions

ERROR: Divs were able to intersect and then go through one another.
RESOLUTION: Used getBoundingClientRect() to retrieve left and right coordinate information, then set a buffer between the two Divs so that one's left attribute could not exceed the other's right attribute and vice versa.

ERROR: Divs were able to exceed the boundaries of the fight screen.
RESOLUTION: Used getboundingClientRect() to retrieve the Div's left and right coordinate information and set logic so that the a given div's left or right property could not exceed the fight screen's left and right boundary.

ERROR: Holding down an attack button caused an almost instantaneous depletion of opponent hit points.
RESOLUTION: Used setTimeout to slow the rate of attacks being detected while a key was pressed down.

Unsolved Problems

Name Submission-New Challenger Bug

One set of unsolved problems are the name form bugs where submitting an empty box doesn't return a player as assignment, and where updating a challenger with the "new challenger" button will cause the form to reload the page on re-submission.

No Blocks

Another unsolved problem was the issue of "blocking" attacks as a player control. When I was testing, if a player was holding down a key to be in a "blocking" state, the opponent would shut off that key being fired briefly enough for attacks to go through and still register. I believe that this is due largely to the nature of using keybindings for control and I would need more time to think of a work-around.

Sources

Smooth Div Movement Controls Bound to Keypresses:

2-D Collision Detection Links:

Image Sources:

Background Music Source:

Steve Moneymoney - "Paranormal Activity"