Build a Game with JavaScript & jQuery Tech Lady #5 Hackathon
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
final
images
readme-files
starter
README.md

README.md

Let's Build a Game with JavaScript

Build a Game with JavaScript & jQuery - Tech Lady #5 Hackathon Workshop

screenshot of game

Getting Started

First step: Get access to the starter code! You can follow along using your own text editor or utilize Codepen.io.

View the final version of the game here.

Online

The starter code is avaliable on Codepen.io.

Access the code on Codepen.io And via this bit.ly link: (http://bit.ly/tech-lady-game)

Local Machine

Clone or download this repository to view the code on your local machine. If using the command line, use the following commands:

>   git clone git@github.com:brittanyrw/Build-a-Game-With-JavaScript.git
>   cd starter

Images & Styling

The above starter code includes pre-made illustrations. If you would like to style your game, please feel free to use the images below or create your own! A starter color palette is also avaliable below and in the starter code.

Avatars

Four female avatars

If you are using Codepen, use the following links to change the avatar from the default blue avatar:

If you are on a local machine: You may use the links above or utilize the avatar images that are located in the images folder. In the HTML file on line 29 change the color in the name of the svg image and you're done!

Background

Examples of background images

If you are using Codepen, use the following links to change the background-image (shapes) for the body. Then change the background-color to customize further:

If you are on a local machine: You may use the links above or utilize the background images that are located in the images folder. In the CSS file on line 20, change out the link with images/geometry-black.svg (or white).

Bonus Purple Shapes Background (default): https://s3-us-west-2.amazonaws.com/s.cdpn.io/929057/geometry-purple.svg

Colors

Starter colors

Need some help chosing colors? The above colors go well together and are utilized in the starter code. These colors can be found in the starter code at the top of your CSS.

  • blue: #1352A2;
  • pink: #F97572;
  • black: #333332;
  • off-white: #F0F1EE;
  • yellow: #FFD464;
  • green: #5AAD5C;
  • purple: #704996;

Contact Me

Suggested Challenges & Updates

Now that you have built the game, let's try some extra features! Below is a list of suggested challenges and features you could add to this game to learn more about JavaScript and jQuery.

  • Optimize the code. In the final version of the game there are functions that can be condensed, try it out!
  • Add a starting screen with instructions and a game start button.
  • Allow the user to choose their own avatar before the game starts. (You have four avatar images provided for you!)
  • Add additional user statistics.
  • Add animations such as changing the background color of a button when clicked or slide transitions.
  • Convert the jQuery code to vanilla JavaScript.
  • Animate the avatar SVG image so that the avatar smiles when a statistic increases and frowns when it decreases.

Additional Resources

Sources