Giter VIP home page Giter VIP logo

project-00's Introduction

Project 0 - Racing Game

Read this entire document before writing a line of code.

Contents


Overview

What is this project?

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.


Topics Covered

What skills are we using?

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.

Timeline

When is it due?
  • Assigned: Wednesday, May 17
  • Due: Thursday, May 18 @ 9am

Technical Requirements

What technologies will I be using?

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.

Sample projects


Specs

What are the core features?

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

Deliverables

What is necessary to call this complete?
  • 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.

Tips

Do you have any helpful advice?
  • 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.

Getting Started

How should I begin approaching this?
  • 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 to git init the new repo.
  • You'll need an index.html, main.css, and main.js. Make sure your stylesheet and JavaScript files are linked in index.html, and also include the CDNs you'll be using (Bootstrap, jQuery).

Submission

How do I turn in the project?
  • 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.

Bonus

What if I want to do more?

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.

Resources

Where can I look for help online?

Project Feedback

How will I get feedback from instructors?

See the feedback doc for details.

project-00's People

Contributors

cameronjacoby avatar mnfmnfm avatar ibi8588 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.