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.
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)
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
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.
If you are using Codepen, use the following links to change the avatar from the default blue avatar:
- Pink Avatar: https://s3-us-west-2.amazonaws.com/s.cdpn.io/929057/avatar-pink.svg
- Purple Avatar: https://s3-us-west-2.amazonaws.com/s.cdpn.io/929057/avatar-purple.svg
- Green Avatar: https://s3-us-west-2.amazonaws.com/s.cdpn.io/929057/avatar-green.svg
- Blue Avatar: https://s3-us-west-2.amazonaws.com/s.cdpn.io/929057/avatar-blue.svg
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!
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:
- Light Shapes Background: https://s3-us-west-2.amazonaws.com/s.cdpn.io/929057/geometry-white.svg
- Dark Shapes Background: https://s3-us-west-2.amazonaws.com/s.cdpn.io/929057/geometry-black.svg
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
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;
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.
- You Don't Know JavaScript book series
- jQuery Documentation
- Phaser.js - Build games with JavaScript.
- 100 Days of Code Challenge
- Some games created using JavaScript and/or CSS: Tile Game, Word Guessing Game, Connect 4 (css only),
- Shape background is based on this png background from Subtle Patterns