A two-player grid-based game rendered in the browser, made using HTML, CSS and JavaScript learnt in the first three weeks of the WDI course.
Play the game online
The project's requirements were as follows:
- Render a game in the browser.
- Switch turns between two players.
- Design logic for winning & visually display which player won.
- Include separate HTML / CSS / JavaScript files.
- Use Javascript or jQuery for DOM manipulation.
- Deploy your game online, using GitHub Pages.
- HTML5
- CSS3, including animation
- JavaScript
- Git and GitHub
- Google Fonts
- Asana
Homepage
Game in progress
First player wins
Users unfortunately can't win diagonally, yet. The game's complexity wasn't fully clear to me until I reached the win logic part of coding. I had to re-plan and only include horizontal and vertical wins to the new MVP.
The user experience of the game could also be improved: instructions on a separate screen with a button to start the game, button to reset the game when it finishes, etc.
We started this project two and a half weeks into our coding bootcamp, after only a little over a week of learning JavaScript. To get to a functioning game after that is a win enough for me. There were a lot of challenging moments, but that's what the learning process is like 🤓.
If I had more time I would:
- Add event listeners on the entire column, as opposed to the 'invisible' top row, to better guide the user.
- Diagonal wins.
- Reset game button.
- Improve styling.
- Add sounds effects with HTML5 audio.
- Give users the option to choose from a few different token colours.
- Subtle animation on the winning tokens at the end of the game.
Feel free to check out my Portfolio with more projects, or LinkedIn profile.