Project #4: Build a Game with HTML, CSS and JavaScript

For your fourth project, you’ll be creating a familiar game using HTML, CSS and JS! Please choose one of the following options (more details below):

• Flash Cards
• Trivia (Self-scoring)
• Hangman
• Tower of Hanoi
• Simon

This is an opportunity to be creative, and work through some tough programming challenges.

You will be working individually for this project, but we’ll be guiding you along the process and helping as you go. Show us what you’ve got!

If you want to choose a different game for Project #4, please consult with an instructor! Warning - many seemingly simple games end up being much more complex than you might think!

Requirements

Technical Requirements

Your game must:

• Render in the browser
• Include separate HTML / CSS / JavaScript files
• Use JavaScript for DOM manipulation
• Be deployed online, using Github Project pages and/or to a custom domain.
• Use semantic markup for HTML and CSS (adhere to best practices)
• Show a good commit history with frequent commits

Additionally, your project should stick with KISS (Keep It Stupid Simple) and DRY (Don’t Repeat Yourself) principles.

Submission

DO NOT FORK THIS REPOSITORY! Create a new repository. Then, submit your project as an issue to this repo.

You must turn in something before presentations begin. However, you’re welcome to continue working on it over the course of SEI and beyond!

With your submission please include any questions you’d like answered, or specific things on which you’d like us to focus when giving feedback.

Necessary Deliverables

Your submission must include all of the following:

• A hosted copy of your game, built by you, hosted on Github Pages
• Your HTML/CSS should pass the HTML5 Validator and CSS Validator
• A git repository hosted on Github with frequent commits dating back to the very beginning of the project
• A link to your hosted project in the URL section of your Github repo
• A readme.md file, including
  • Explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.
  • Follow this mini-lesson on writing documentation for your project

Asking For Help

Instructors will not be hosting office hours during this project week. Unit projects are an opportunity for two things:

1. Working through problems on your own. This solidifies your knowledge and is crucial for mastering the skills we’ve covered.
2. Becoming an independent developer. Developers tend to coordinate in groups, but contribute individually, so this mimics the real world.

The purpose of this project is for you to show us and future employers what you’re capable of, so we want as much of the project to be your own, independent work as possible

Suggested Ways to Get Started

• Create your bronze, silver, and gold plan.
• Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use a whiteboard!
• Use your Development Tools (console.log, inspector, alert statements, etc) to debug and solve problems
• Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know… procrastinating.
• Commit early, commit often. Don’t be afraid to break something because you can always go back in time to a previous version.
• Make it work, make it good, make it fast. Don’t get hung up on only saving or writing code that is good code. Get it working first, even if it means writing bad or ugly code. Once it’s working, come back and refactor!
• Consult documentation resources (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.
• 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.

Project Choices

Flash-Cards

Pre-load your app with some data, and let the user flip through them quickly (back or front), and use the keyboard flip the card, and to mark whether they got it right or not. Track which cards were incorrect, and re-display them until the user gets them right!

Bonus:

• Track scores over time (even if the page is reloaded)
• Include images on one or both sides of the flash card
• Let the user add flash cards (don’t need to be saved across refreshes)

Here’s an example from a previous student

Self-scoring Trivia

Pre-load your app with some questions and answers.

Test the user’s wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are!

Bonus:

• Add time-based scoring
• Track scores across games (even if the page is reloaded)
• Allow users to compete against each other on a high-score board.

Here’s an example from a previous student

Hangman

Have a player enter a word that will be guessed during the game. The word is then hidden and represented by blank spaces. The second player then chooses letters, which are revealed if present.

Bonus:

• Add timer-based scoring
• Track scores across games (even if the page is reloaded)

Here’s an example from a previous student

Tower of Hanoi

Tower of Hanoi is a mathematical puzzle where the objective is to move a stack of discs from one rod to another. There are three rules:

• Only one disk can be moved at a time
• Every move involves taking the top disk from one of the stacks and placing it on top of another stack
• No disk can be put on top of a smaller disk

Bonus:

• Add time-based scoring
• Track scores across games (even if the page is reloaded)

Here’s an example from a previous student

Simon

Simon is a test of memory. Have your program choose a sequence of different colors at random and then prompt your player repeat the sequence allowing them to go to advance to next round if the player is successful.

Bonus:

• Add timer-based scoring
• Track scores across games (even if the page is reloaded)

Here’s an example from a previous student

Useful Resources

• MDN Javascript Docs (a great reference for all things Javascript)
• Github Pages (for hosting your game)

Evaluation

Your instructors will use this rubric to assess your project:

Evaluation Rubric

Presentations

We expect everyone to attend all presentations in their entirety and will provide breaks between each session.

This means no working on your code while others are presenting. This is your chance to ask others how they tackled their project.

Plagiarism

Take a moment to re-familiarize yourself with the plagiarism policy, specifically on using work you find online and on work you do with other students.

We give assignments like this to give you the opportunity to review the material in class in a practical manner. By building something using what you’ve learned in class, you’ll be reviewing the material and gaining a deeper understanding of it.

These assignments are similar to those you can expect when applying for a job, either in the form of a take-home coding challenge or an in-person technical interview. So it’s important that you put in your best effort now and challenge yourself to do this assignment on your own.

If you are struggling with the material, that’s alright! That’s why you’re here. First, try reviewing the previous lessons and exercises. Go easy on yourself, you’re still learning! If you’re still struggling after that, come to office hours and ask an instructor for help. They’re here to help you!

Don’t copy and paste from another source or another student or the solution branch. That’s just going to put you at a disadvantage when you’re interviewing for a job.

Project Evaluation

Your instructors will evaluate your project and determine if it is complete or incomplete. We use the following rubric for our evaluation, but ultimately it is up to your instructors as to whether your project is complete or incomplete.

We will evaluate your project according to the following criteria:

• Code Quality: Is the code well formatted? Are variable and function names semantic and sensible? Is the code easy to read and understand?
• Technical Requirements: How does the project stack up to the requirements for this project? Is the developer making use of the material we’ve covered in a way that makes sense?
• Creativity & Interface: Is the application easy to navigate? Does it work well in every major browser? Is it responsive? Does it incorporate modern UI Themes?
• Functionality: Does the application work without errors or bugs? Does it present a complete app, where every feature is fully implemented in a way that makes sense?
• Presentation: Is there adequate documentation? Is the repository well organized and free of clutter?

Scoring

Each of the above categories will be scored according to the following:

For a project to be considered complete, you must achieve at least “Progressing” in each category. However, at a minimum, you should aim to achieve “Performing” in every category.

Hard Requirements

The following requirements must be met in order for the project to be considered complete:

• The project is deployed to GitHub Pages or a custom domain
• The application renders in the browser and runs without errors
• The repo has a README that adequately documents the project