To practice combining all the elements we've learned from previous classes (HTML, CSS, and JS) within the framing of building a web based Connect 4 game.
Connect 4 is a relatively simple game, played on a 6x7 grid. Players take turn selecting a column and placing a marker of their own at the lowest empty cell in that column. Players win by having 4 of their markers in a row (vertical, horizontal, or diagonal) anywhere on the board. You can read more about the rules and history here:
https://en.wikipedia.org/wiki/Connect_Four
You are going to build an interactive, responsive web application that plays a game of Connect 4 against an AI. At the very least, your game must:
- Allow the user to place their markers by click on the page
- Have a simple AI that automatically plays after the user
- End the game as soon as 4 markers are in a row
- Determine when a tie should happen
- Allow the user to play multiple games without reloading the page
- Track a user's wins, losses, and ties across multiple games
- Look good both on a laptop and smartphone
- Use Materialize's grid system
You can include as many external CSS and JS files as you need. However, you must include an index.html file. This is what we'll run first to determine your grade. If needed, we will also look at your other individual CSS and JS files.
Remember to simplify the game enough so that it's achievable within the timeframe you have. *So long as you explicitly list your assumptions, it's OK to reduce the complexity of your program. For example, you can assume the AI will just pick a move at random.
The point of this assignment is to get you to use HTML, CSS, and JS in a comprehensive, coordinated way, not to see if you can write an Connect 4 AI. Don't spend too much time on the skills we're not targeting. Of course, if you finish early, you can go back and polish up the parts you glanced over.
You can use the boilerplate index.html file in this repo as a starting point.
These will probably be useful for you:
- Materialize: https://materializecss.com/
- Common web interface components: https://www.w3schools.com/howto/default.asp
- The DOM in depth https://developer.mozilla.org/en-US/docs/Web/API/Document
- Other ways to alter the DOM https://developer.mozilla.org/en-US/docs/Web/API/Element
- DOM element classes examples https://developer.mozilla.org/en-US/docs/Web/API/Element/classList#examples
Submit a single github link before 11:59pm EST on Jan 11, 2021 using the following form. Only one student on your team needs to submit and be sure to tag all the team members when submitting.