Formidable Fighting Foes Brief

The challenge brief was spread over three months.



Building a fighting game (Part 1) - March 2020

In this challenge you will be setting up the game environment You can mix PHP, JavaScript, HTML and CSS. Frameworks are allowed however bonus points if you don't use frameworks



Level 1 - Build a table

Build a semantically correct HTML table with the following headers:

  • Name
  • Type
  • Strength
  • Health
  • Special Power
  • Action


Level 2

Populate the table with 100 creatures at random with different health and strength points


There must be 4 types of creatures. These are:

  • Witches
  • Dragons
  • Snakes
  • River trolls


The following health and strength rules must apply:


Witches

  • Strength between 60 - 80
  • Health between 50 - 60

Dragons

  • Strength between 80 - 90
  • Health between 80 - 90

Snakes

  • Strength between 30 - 60
  • Health between 30 - 90

River Trolls

  • Strength between 22 - 65
  • Health between 60 - 92


Level 3

  • Each row should have a different background colour
  • Each type should have a different image
  • Add 3 buttons to the actions column these should be
    • Delete
    • Increase health
    • Decrease health
  • Each button should display an alert that shows the type of action pressed
  • Use an emoji for each of the buttons instead of text.


Level 4

  • Create a button above the table with the value of 'Roll The Dice'
    • This should display an alert with the message 'About to fight'
  • Create a button above the table with the value of 'Reset'
    • This should refresh the table.


Level master

  • Don't use any frameworks!


We will be using this setup for April's challenge. So make it look good! :)



https://codechallenges.howtocodewell.net/2020/march

Roll the dice and start to play (Part 2) - April 2020


In this challenge you will be adding some of functionality to the game You can mix PHP, JavaScript, HTML and CSS. Frameworks are allowed however bonus points if you don't use frameworks



Level 1 - Delete the rows

  • Upon clicking the delete button the row should be removed. This should remove the character from the game


Level 2 - Increase HP

  • Upon clicking the 'Increase health' button increase the creatures health by one point


Level 3 - Decrease HP

  • Upon clicking the 'Decrease health' button decrease the creatures health by one


Level 4 - Roll those dice

  • When clicking the 'Roll Dice Button' generate two random numbers between 1 and 6
  • Display both of the numbers in alert/modal
  • When a double is rolled display 'Special Powers Activated' in the alert/modal
  • Store the dice rolls and record if the special powers are activated in a object that can be accessed in the next challenge


Level 5 - Display Special Powers

  • Create 6 special powers
    • Double 1 = Increases health to 100
    • Double 2 = Decreases opponents health by 100
    • Double 3 = Increases strength between 1 - 100
    • Double 4 = Decreases strength between 1 - 100
    • Double 5 = Hides (Skips a go)
    • Double 6 = Steals 50% of the strength from the opponent
  • When rolling a double display which special powers are active
  • When rolling a double all the special powers before are also active.

Examples


Rolling a double 3 will activate the following:

  • Increases strength between 1 - 100
  • Decreases opponents heath by 100
  • Increases health to 100

Rolling a double 5 will activate the following:

  • Hides (Skips a go)
  • Decreases strength between 1 - 100
  • Increases strength between 1 - 100
  • Decreases opponents heath by 100
  • Increases health to 100

Rolling a double 6 will activate all the special powers

Don't do anything with these powers yet. This will come together in the next challenge.



Level master

  • Don't use any frameworks!

We will be using this setup for May's challenge. So make it look good! :)



https://codechallenges.howtocodewell.net/2020/april

Building a fighting game (Part 3) - May 2020

In this challenge you will be starting the fight, processing the special powers and displaying the winner.

You can mix PHP, JavaScript, HTML and CSS.

Frameworks are allowed however bonus points if you don't use frameworks


Please note that there is no health or strength cap however if the health is 0 the player should be removed from the game.



Level 1 - Pair up

  • Randomly pair fighters together
  • A creature can only have one opponent per fight.
  • Create a column which holds the opponents name.
    • There will be fighters who do not have an opponent due to an odd number of fighters
  • If there is an odd number please ensure that the special powers are still processed


Level 2 - Distribute the special powers

  • Randomly distribute the special powers across the creatures
  • Only one special power is allowed per creature
  • Display the special power in the 'Special Power' column


Level 3 - Process the special powers

  • Adjust the HP, strength and remove creatures from the brawl where necessary
  • Once the opponents have been paired randomly select which opponent uses their special power first
  • Remove players who have a health of zero.


Example 1


A double 2 was rolled


Opponent A starts with a health of 200

Opponent B starts with a health of 250

  • Opponent A = Increases health by 100
  • Opponent B = Decreases their opponents health by 100

Result

  • Opponent A having no change to health. It would still be 200


Example 2


A double 5 was rolled


  • Opponent A = Decreases their strength between 1 - 100
  • Opponent B = Hides (Skips a go)

Result

  • Opponent A would have a reduction of health between 1 - 100
  • The fight would not happen because opponent B is hidden


Example 3


A double 6 was rolled


  • Opponent A = Steals 50% of the strength from opponent B
  • Opponent B = Increases their strength between 1 - 100

Result

  • Opponent B would gain an increase of strength between 1 - 100
  • Opponent A would gain 50% of the Opponent B's health


Level 4 - Fight!

  • After the special powers have been processed randomly decided which opponent will strike first
  • Subtract the sum of the strength plus the dice roll from the opponents health
  • If the opponents health has been reduced to zero then remove that opponent from the game
  • Repeat for the second opponent


Level 5 - Display the winner!

  • Keep rolling the dice until you get a winner
  • Show that winner in the modal/alert


Level master

  • Don't use any frameworks!

https://codechallenges.howtocodewell.net/2020/may

Additional queries

There are two scenarios where a special power could be issued and not used, which are:

  • A creature is given a special power and is also deemed to be the odd numbered creature and is exempted from that round
  • The creature is given a special power, but the opponent goes first and plays the special power of 'Hide'

A) Yep that's correct. If the player doesn't have an opponent then skip that players go and skip that players powers.



Consider the following scenario:


Opponent A Strength 50 Health 20
Vs.
Opponent B Strength 60 Health 30


Dice thrown 5 + 3

Therefore no special powers are applied


Opponent A strikes first

Opponent B takes a hit of (Opponent A's strength 50 + dice roll total 8)

Therefore Opponent B loses a health score of 58 (50 + 8)


Opponent B started the round with only 30 health points, so is eliminated.


At this stage, Opponent B has not struck Opponent A to cause any damage.

Will this mean that as there has been no strike, Opponent A will not lose health in that round?.


A) Yes, that is correct.



Additional functionality added outside of the challenge brief

Game Mechanics

  • Randomly generated unique names for each creature type, loaded from JSON file
  • Functionality in the script for changing the number of creatures generated
  • Randomised winner message from a list held in a JSON file
  • Functionality in the script for testing purposes to force double dice throws
  • An additional step named 'Process Power' was added, so that the effect of the special powers could be displayed before the fight takes place

Information

  • List created in alphabetical order of the creatures eliminated in the last round
  • Extra data is shown underneath the character table to show powers being used and who strikes first
  • When powers are processed, there is a summary of the stats created from the powers effect
  • Added instructions including some of the game artwork
  • When the battle is over, a list of powers that have been used by the winning creature are displayed
  • Also displayed at the end of the battle, is a list of creatures defeated by the winner in order of elimination

UI Improvements

  • When an action button to increase or decrease health is clicked, the changed number value is animated and digits momentarily increase in size
  • A count of creatures still in the game is displayed on the page
  • When a creature is deleted either manually or automatically, the corresponding table row briefly highlights in red before deletion
  • Hovering the mouse pointer over a creature image displays the name of the creature type
  • Action buttons are greyed out and disabled when the battle is over
  • The main action button is removed on completion of the game, so that the user can only press the reset button

Artwork

  • All images designed and created by hand
  • Dice throw values represented by dice images
  • Images created to indicate when double dice are thrown
  • Additional artwork for a trophy and a first place medal
  • Artwork is created in PNG format with a transparent background, which makes changing the page colour design easier