|
|
# Project #1: The Game
|
|
|
|
|
|
## Overview of `connect four`
|
|
|
|
|
|
|
|
|
|
|
|
### The game
|
|
|
|
|
|
[Connect Four](https://en.wikipedia.org/wiki/Connect_Four) is a two-player adventure of mystery, mayhem, and intrigue. It's probably a thing in your universe, but feel free to read up on it if you have to.
|
|
|
|
|
|
## Project Details
|
|
|
|
|
|
### Necessary features
|
|
|
|
|
|
A basic implementation of this project must include:
|
|
|
|
|
|
1. An interactive board which renders on page load
|
|
|
2. A way for players to set their name
|
|
|
3. A way for players to mark an empty space on their turn
|
|
|
4. The game should end when there is a winner, or if the game is a tie
|
|
|
5. The game should report the end state
|
|
|
|
|
|
Additionally you should use CSS to ensure a reasonable amount of styling to keep your project presentable.
|
|
|
|
|
|
### Advanced features
|
|
|
|
|
|
Going above and beyond the basic implementation is desirable, should you have the time. Feel free to enhance your project with any of the following features:
|
|
|
|
|
|
1. A button on `game over` to reset the game back to initial state
|
|
|
2. A way to keep track of Player 1 vs. Player 2 wins
|
|
|
- An option to play vs. a computer with AI
|
|
|
- Level 1: Random empty space is good enough
|
|
|
- Level 2: Computer chooses a space which immediately blocks a player win
|
|
|
3. Add in the ability to store a game to play later. This might use Firebase or local storage to do so.
|
|
|
4. Add in the ability to play live with somebody remotely. This will definitely need to use [Firebase](https://www.firebase.com/).
|
|
|
|
|
|
## Implementation
|
|
|
|
|
|
### Technologies
|
|
|
|
|
|
You will be expected to use the following technologies to implement this project:
|
|
|
|
|
|
- **HTML**
|
|
|
Your HTML should be semantic.
|
|
|
|
|
|
- **CSS**
|
|
|
Your game should be stylish.
|
|
|
|
|
|
- **JavaScript & jQuery**
|
|
|
Your game should be playable *and* responsive.
|
|
|
|
|
|
|
|
|
### Timeframe
|
|
|
|
|
|
The timeframe for this project is approximately 3 continuous days of class time and 2 weekend days.
|
|
|
|
|
|
## Expectations
|
|
|
|
|
|
### You
|
|
|
|
|
|
As a student you should be doing the following things:
|
|
|
|
|
|
- **Planning **
|
|
|
Plan out your project before you begin. What data structures will you need (objects, arrays)? What layout will your project have on the page (you could make a wireframe)? How will you organize your code? Pseudo-code out any thorny issues you might already anticipate.
|
|
|
|
|
|
- **Version Control**
|
|
|
Use **git** and **github** for version control, and make frequent incremental commits to prevent large scale implosions. Make a fresh repo outside the wdi-lettuce repo for your project so that
|
|
|
it will be public.
|
|
|
|
|
|
- **Hosting**
|
|
|
Host your application on **githubpages**, or something similar so the class and instructors can use it.
|
|
|
|
|
|
### Us
|
|
|
|
|
|
Since your instructors will be assessing your work, they will look for the following things:
|
|
|
|
|
|
- **Project Workflow**
|
|
|
Did you you plan your project before you started? 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 add a personal spin or creative element into your project submission? Did you deliver something of value to the end user?
|
|
|
|
|
|
- **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?
|
|
|
|
|
|
- **Problem Solving**
|
|
|
Are you able to defend why you implemented your solution in a certain way? Can you demonstrate that you thought through alternative implementations? (Note that this part of your feedback evaluation will take place during your one-on-one code review with your instructors, after you've completed the project.)
|
|
|
|
|
|
## Deliverables
|
|
|
|
|
|
By the time the project is over, we will expect the following from you:
|
|
|
|
|
|
* A **working game, built by you**, hosted somewhere on the internet
|
|
|
* A **link to your hosted working app** in the URL section of your Github repo
|
|
|
* A **git repository hosted on Github**, with a link to your hosted project, 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, etc.
|
|
|
|
|
|
Most importantly a **technical demonstration** of your app which:
|
|
|
|
|
|
* Is 5 minutes in length
|
|
|
* Shows off all features of the app
|
|
|
* Explains the technical details
|
|
|
* Explains the technical challenges
|
|
|
* Explains which improvements you might make
|
