Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 

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

About

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

Resources

Releases

No releases published

Packages

No packages published