Project #1: The Game

Overview:

Let's start out with something fun - a game!

You have two options:

Option A: make Tic Tac Toe (XO)

Option B: make any game you want!

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!

What You've Learned

By the time you submit this project, you will have covered new ground in, and reviewed, many of the big themes of the course so far:

• Command Line: Practice interacting with the computer and navigating the filesystem from the command line.
• Source Control: Manage and interact with a git repository to store changes to code.
• Programming Fundamentals: Work with objects, constructors, events, while learning how to strategically solve problems and resolve errors.
• Web Fundamentals: Learn how communication happens over the internet, and how to structure, style, and animate documents within a browser. Also learn how to respond to actions your users take and the data they input into the browser.
• Browser Applications: Dive into CSS, and figure out how to use libraries and frameworks to get lots of style and functionality for free.
• Deployment: Host a static web site in a managed hosting environment.
• Products and Teams: Document your code and your code repository so others understand what you've built.

Big Goals

• Build a web application from scratch, without a starter codebase
• Use your programming skills to work out the game logic for a simple game like Tic Tac Toe
• Separate HTML, CSS, and JavaScript files in your application
• Build an application to a specification that someone else gives you
• Build a dynamic game that allows two players to compete
• Craft a README.md file that explains your app to the world

Technical Requirements

Option A: Tic Tac Toe:

Your Tic Tac Toe app must:

• Render a game board in the browser

• Switch turns between X and O (or whichever markers you select)

• Visually display which side won if a player gets three in a row, or show a draw if neither player wins

• Include separate HTML / CSS / JavaScript files

• Stick with KISS (Keep It Simple Stupid) and DRY (Don't Repeat Yourself) principles

• Use JavaScript and jQuery for DOM manipulation

• Deploy your game online, where the rest of the world can access it

  • We will be walking you through this process!

• Use semantic markup for HTML and CSS (adhere to best practices)

• Have well-formatted, and well-commented code (e.g. Use Prettier and follow these HTML & CSS Guidelines)

• Some unique features that distinguish your game from the "normal" solution listed above. Here are some ideas:

  Potential Extra Tic Tac Toe Features

• Keep track of multiple game rounds with a win counter

• Allow players to customize their tokens (X, O, name, picture, etc)

• Get inventive with your styling, e.g. use hover effects or animations

• Use LocalStorage to persist data locally to allow games to continue after page refresh or loss of internet connectivity

• Support custom board sizes: default is 3x3 but you could allow users to choose a larger board

• Support networked multiplayer: Firebase has a nice quickstart guide

• Involve Audio in your game

• TRICKIEST: Create an AI opponent: teach JavaScript to play an unbeatable game against you

Option B: Any game you want!

If you are feeling creative and want to try something new, then go for it! In order to go this route you must run your idea by Trevor or Jackie first.

• Proposals are due by EOD today, 11/25.
• your proposal must include: a summary of your idea, a wire frame (this is a good site to make wireframnes), what you think the biggest challenges will be.
• Proposals should be created as "issues" in this repository.
• Proposals are flexible! You are welcome to update and adjust these as the project continues.

Need some ideas? Keep reading!

Other Game Ideas

Beginner

• Simon
• War - Two Player
• Self-scoring Trivia
• Memory

Medium

• Text Adventure
• Connect 4 - Two Player
• Sorry! - Multiple Players
• Checkers - Two Players
• Yahtzee - Two Players

Advanced

• Battleship - Two Player
• Black Jack - with Computer AI
• Missile Command - Level Progression

Necessary Deliverables

• Projects are due Saturday, 12/1 at midnight! Submissions should be made as a pull request to THIS REPO. *

• A working game, built by you, hosted somewhere on the internet

• A landing page with the name of your game, instructions and a start button

• A link to your hosted working game in the URL section of your Github repository

• 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, the approach taken, installation instructions, unsolved problems, any other useful information etc.

• A 5 minute presentation in which you answer the following questions:

  • What is the game about?
  • Is there any information you think might help us understand what you built?
  • What features did you include?
  • Make sure to explain anything "new" (things that we didn't cover in class)
  • What was the most difficult part of the project?
  • What was your favourite part to work on?
  • What would you like to add next?

• A 2 minute demo of your game:

  • Show us the functionality!

Suggested Ways to Get Started

• Break the project down into different components (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
• Use your Developer Tools (console.log, inspector, alert statements, etc) to debug and solve problems
  • Some great tutorials for the Developer Tools can be found here
• Work through the lessons in class, ask questions and come to office hours when you need to. Think about adding relevant code to your Tic Tac Toe game each day, 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.
• Check out Tutorial and Documentation resources 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.

Useful Resources

• MDN JavaScript Docs (a great reference for all things Vanilla JavaScript)
• DevDocs
• jQuery Docs
• GitHub Pages (for hosting your game)
• GitHub Markdown Tutorial (for working with Markdown)