Read this entire document before writing a line of code.
- Overview: What is this project?
- Topics Covered: What skills are we using?
- Timeline: When is it due?
- Technical Requirements: What technologies will I be using?
- Specs: What are the core features?
- Deliverables: What is necessary to call this complete?
- Tips: Do you have any helpful advice?
- Getting Started: How should I begin approaching this?
- Submission: How do I turn in the project?
- Bonus: What if I want to do more?
- Resources: Where can I look for help online?
- Project Feedback: How will I get feedback from instructors?
You'll be building one more browser game, synthesizing all the knowledge you've packed into your brain over the past week and a half! You'll be leveraging the power of jQuery 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.
- Assigned: Wednesday, May 17
- Due: Thursday, May 18 @ 9am
Your app must:
- Use jQuery
- 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 logical user experience
- Stick with the KISS (Keep It Simple Stupid) and DRY (Don’t Repeat Yourself) principles
- Include a public Github repository with frequent commits and descriptive commit messages!
- Have useful documentation that you or other developers can reference later.
- Chiggen Chase - a racing game
- Airplane Crash! - a "racing game" dodging birds so you don't crash.
- Labyrinth game - find the yellow coin and get to the orange exit while avoiding the red Minotaur.
- Bubble pop game - pop the bubbles and try to beat the records.
A user should be able to...
- See a game board on page load
- Move their player by pressing a specific key
- See who won the round, or if it was a tie
- A working game, built by you
- A git repository hosted on Github with frequent commits dating back to the very beginning of the project
- A
readme
with explanations of the technologies used, existing features, planned features, and anything else you'd like to add. See example-readme as a guide, and use this Markdown cheatsheet to help with formatting.
- Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use the whiteboard!
- Use your development tools (
console.log
, Chrome JavaScript console, Chrome debugger) to debug and solve problems. - Use your classmates as resources. once you have asked 3 people & Googled it, feel free to ask an instructor.
- Commit early, and commit often. Write commit messages that describe what you changed in each commit.
- Don’t be afraid to break something, because you can always go back in time to a previous version (given you have followed the previous tip).
- Use the docs and be a Google wizard. This is what developers spend most of their time doing!
- Don’t be afraid to write code that you know you will have to remove later. Create temporary elements (buttons, links, etc.) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then.
- Create a NEW GitHub repository from your GitHub account. Make sure you're in your
develop
folder, and create the project locally. Follow the steps togit init
the new repo. - You'll need an
index.html
,main.css
, andmain.js
. Make sure your stylesheet and JavaScript files are linked inindex.html
, and also include the CDNs you'll be using (Bootstrap, jQuery).
- As you make code changes, frequently commit and push to GitHub.
- Once you've finished the project and pushed your work to GitHub, please add the link to your project's GitHub repo to our Google doc.
These feature ideas are for "extra credit"! Don't focus on them until you've hit the core requirements.
- Integrate Object Oriented Programming design patterns.
- Keep track of multiple game rounds with a win counter.
- 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.
- MDN Javascript Docs - a great reference for all things JavaScript
- jQuery Docs
- Github Pages or BitBalloon - for hosting your game
See the feedback doc for details.
implementation attempts
//let saffiWidth = ');
//
');
// ('h1').text('Lhurgo Wins!!!!');
// }
// switch(key.which) {
// //65 = a
// case 65:
// $tarmo.css('left', positionOne.left + 40 + 'px');
// break;
// //76 = l
// case 76:
//