For the Unit 1 Project, let's start out with something fun — a game! Everyone will get a chance to be creative and work through some tough programming challenges. Now that you've gotten your feet wet with Tic-Tac-Toe, it's up to you to come up with another game to build. You will be working individually for this project, but we'll be guiding you throughout the process and helping as you go.
Your app must:
- Render a game in the browser.
- Switch turns between two players.
- Include logic for winning, and visually indicate which player has won.
- Include separate HTML/CSS /JavaScript files.
- Stick with the KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles.
- Use JavaScript or jQuery for DOM manipulation.
- Be deployed and accessible online.
- Use semantic markup for HTML and CSS, adhering to best practices.
- A working game, built by you. Deploy to the internet (host it using GitHub Pages)
- A Git repository, hosted on GitHub, that includes a link to your hosted game and frequent commits dating back to the beginning of the project.
- A
my-process.mdfile with explanations of:- Technologies used.
- Your process/approach.
- Installation instructions.
- Unsolved problems.
- Your biggest wins and challenges.
- A five-slide presentation, to be given in front of classmates, outlining the following points:
- The game you chose.
- The rules of the game.
- Your process for turning that game into a web application (wireframes, blockers/issues that popped up).
- Screenshots of actual game play. (BONUS: video)
- Screenshots of the snippets of code you used to solve particularly interesting problems (think code highlights).
- Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
- Use your development tools (
console.log, inspector, alert statements, etc.) to debug and solve problems. - Work through the lessons in class and ask questions when you need to! Think about adding relevant code to your game each night.
- Commit early, commit often. Don't be afraid to break something. You can always revert to a previous version.
- Consult documentation resources (MDN, jQuery, etc.) at home to better understand what you'll be getting into.
Don't be afraid to write code you know you'll 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 ends but you haven't solved the win/lose game logic, you can create a button to simulate that scenario in the meantime.
Things To Avoid:
- Don't create a game that includes violence, weapons, or gore.
- Don't create a game that may offend your classmates or alienate those with specific religious, political, or philosophical views.
Make a one-player game in which people down on their luck can lose all their money by guessing which card the computer will deal next!
Test your knowledge and wits. Guess the answers to trivia questions, and have the computer tell you how right (or wrong) you are!
- MDN JavaScript Docs (a great reference for all things plain vanilla JavaScript)
- jQuery Docs (if you're using jQuery)
- GitHub Pages (for hosting your game)
- Project Workflow: Did you complete the user stories, wireframes, task tracking, and/or ERDs as detailed above? Did you use source control as expected for this phase of the course?
- Technical Requirements: Did you deliver a project that met all of the technical requirements? Given what the class has covered so far, did you build an asset that was reasonably complex?
- Creativity: Did you add a personal spin or creative element to your project submission? Did you deliver something of value to the end user (not just a login button and an index page)?
- Code Quality: Did you follow the code style guidance and best practices covered in class for elements such as spacing, modularity, and semantic naming? Did you comment your code like your instructors have in class? Valid and Semantic!
- Deployment: Did you deploy your application to a public URL using GitHub Pages?
- Implement feedback: Did you fix problems outlined in instructor feedback/reviews?
| Incomplete | Does not Meet Expectations | Meets Expecatations | Exceeds Expectations | |
|---|---|---|---|---|
| Valid, semantic code, adhering to best practices | ||||
| Creative game with complexity | ||||
| Is completely responsive | ||||
| Includes separate HTML/CSS/JavaScript files | ||||
| Sticks with the KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles | ||||
| Uses JavaScript or jQuery for DOM manipulation | ||||
| Includes the interactions listed under "Necessary Deliverables" | ||||
| Is deployed online |
This will serve as a helpful overall gauge of whether or not you've met the project goals. It can also help you identify where to focus your efforts for the next project!
Based on the requirements above, you can earn a maximum of 24 points on this project. Your instructors will score each of your technical requirements using the scale below:
| Score | Expectations |
|---|---|
| 0 | Incomplete |
| 1 | Does Not Meet Expectations |
| 2 | Meets Expectations |
| 3 | Exceeds Expectations |