Project #1

Make a game!

Overview

For this project, you'll be creating a familiar game with HTML and JS! Please choose one of the following:

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


Technical Requirements

Your app must:

  • Render a beautiful game in the browser and be easy to use
  • Design logic for winning & visually display which player won
  • Include separate HTML / CSS / JavaScript files
  • Stick with KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles
  • Use Javascript or jQuery for DOM manipulation
  • Use OOP Design (at least 2 custom Constructors)
  • Deploy your game online, where the rest of the world can access it using bitballoon
  • Use semantic markup for HTML and CSS (adhere to best practices)

Necessary Deliverables

  • A working game, built by you, hosted somewhere on the internet
  • A link to your hosted working game in the URL section of your Github repo
  • A git repository hosted on Github, with a link to your hosted game, and frequent commits dating back to the very beginning of the project
  • A README.md file with explanations of the technologies used, current features, project roadmap, installation instructions, and game-play instructions.

Suggested Ways to Get Started

  • Break the project down into different components Create user-stories, draw wireframes, and write pseudocode! Spend a lot of time on this.
  • Use your Development Tools (debugging, global variables, console.log, etc) to solve problems
  • Reference lessons in class & ask questions to TAs & Instructors when you need to!
  • Commit often! Commit at least every time you complete a user story. That way you don’t have to be afraid of breaking your code, as you can always rollback to an older version.
  • Consult documentation resources (MDN, jQuery, etc.) 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. You are encouraged to 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 it until then.

Useful Resources


Stretch Goals

When you have completed all of the core requirements for the game (listed above), we encourage you to try some stretch goals:

**Stretch Goals** (Click Here)
**DO NOT ATTEMPT BONUSES UNTIL YOU HAVE A WORKING [MVP](https://en.wikipedia.org/wiki/Minimum_viable_product)**

Arbitrary Restrictions (to make you a better programmer):

  • Do not use more than 3 html id attributes anywhere in your code.
  • Do not put anything in the global scope (except for Constructors).
  • Do not use numbered variables (e.g. player1, card_one, or cardA)
  • Do not use console.log(), alert(), or prompt() anywhere in your code.

Bonus Ideas:

  • Reset the game without refreshing
  • Keep track of total score / high score / wins
  • Display a timer / winning time
  • Allow player customization (like name, avatar, color)
  • Randomize an initial value (pick a random color, shuffle the order of cards)

Project Feedback + Evaluation

  • Project Workflow: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)?

  • Technical Requirements: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?

  • Creativity: Did you added a personal spin or creative element into 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 code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class?

  • Deployment: Did you deploy your application to a public url using GitHub Pages?

  • Total: Your instructors will give you a total score on your project between:

    Score Expectations
    0 Incomplete.
    1 Does not meet expectations.
    2 Meets expectations, good job!
    3 Exceeds expectations, you wonderful creature, you!

This will serve as a helpful overall gauge of whether you met the project goals, but the more important scores are the individual ones above, which can help you identify where to focus your efforts for the next project!