Your first interactive front end creation.
Read this entire document before writing a line of code.
NOTE: CSS Videos are linked at the bottom of this README.
You'll be building one more browser game, synthesizing all the knowledge you've packed into your brain over the past week! You'll be leveraging the power of JavaScript to create a Racing Game, where two players can move their "cars" across the browser to compete for the win.
You will be working individually for this project, but we encourage you to get help from your peers and even pair-program on each other's projects when bugs arise.
By the time you submit this project, you will have leveled-up in many big themes in the course:
- Terminal: Practice interacting with the computer and navigating the file-system from the Command Line.
- Git: Manage and interact with a git repository to store changes to code.
- JavaScript: Work with objects and events, while learning how to strategically solve problems and resolve errors.
- Front-End: Work on HTML structure, CSS styles, and animating documents within a browser. Also, learn how to respond to actions your users take and the data they input into the browser.
- Documentation: Document your code and your GitHub repository so others understand what you've built.
Your app must:
- Use vanilla JavaScript. Keep an eye out for the
$
symbol when looking for solutions! example:$('div')
. That's jQuery, we'll get there later. - Minimize the use of global variables
- Abide by the separation of concerns principle with separate HTML, CSS, and JavaScript files
- Leverage CSS styling for a pleasing and user experience
- Stick with the KISS (Keep It Simple Stupid) and DRY (Don’t Repeat Yourself) principles
- Use a public Github repository with frequent commits and descriptive commit messages!
A user should be able to...
- See a two "players" on the left side of the screen, one above another.
- See a finish line on the right side of the screen.
- Move each player towards the finish line by pressing a specific key (ex. right arrow for player one, 'd' for player 2).
- Let the players know the race is over when one player has crossed the finish line
- A working game, built by you
- A git repository hosted on Github with frequent commits dating back to the very beginning of the project
- **Break the project down into small, manageable pieces. and brainstorm each component individually. Use the whiteboard! Pseudo code! Write comments!
- Use your development tools (
console.log
, Chrome JavaScript console, Chrome debugger) to debug and solve problems. - Here is the documentation for
debugger
- Use your classmates as resources. It is helpful to help others. Don't be afraid to ask for help!
- Commit early, and commit often. Write commit messages that describe what you changed in each commit.
- Use the docs and be a Google wizard. This is what developers spend most of their time doing!
- Create a NEW GitHub repository
- You'll need an
index.html
,style.css
, andapp.js
. Make sure your stylesheet and JavaScript files are linked inindex.html
.
These feature ideas are for "extra credit"! Don't focus on them until you've hit the core requirements.
- Let the user know if player one or player two won!
- Keep track of multiple game rounds with a win counter.
- Make it look amazing!
- Allow customized players (name, symbol, color, avatar, etc.).
- Use localStorage to keep track of game state, even if the user refreshes the page.
- Get creative with inventive styling, e.g. use hover effects or animations to spiff things up. Get creative with backgrounds.
- Display a countdown timer ("3, 2, 1, Go!"), the winning time, and the best time.
- Race against a bot.
- Instant replay: record yourself and then race against yourself, in real-time.
- Integrate with a 3rd party API: flickr, youtube, spotify, giphy, etc.
- Whatever else your heart desires!
- MDN Javascript Docs - a great reference for all things JavaScript
- If you want to host you game on the web: Github Pages or BitBalloon - for hosting your game
You will get feedback by next Friday to review that morning!
- Watch this video about box model.
- Watch this video about display.
- Watch this video about position.
- Watch this video about units of measure.
- Watch this video more about units of measure.