Power Four

Power Four, otherwise known as Connect Four, is a strategy game for two people. Players take turns dropping their tokens into the grid, stacking them vertically, horizontally, or diagonally. Players use strategy to block the other player's moves. The first person to get four in a row wins. This is a childhood favorite of mine and I hope you enjoy it too!

To Play

The game is deployed here.

Just click on the column on the grid where you would like to place your token. The token will fill in the lowest available space. Once a player places their token the turn will immediately switch to the other player. Keep placing tokens until one player achieves four of their tokens in a row.

Screenshots

Languages

• Javascript
• HTML
• CSS

Wireframe

Future Improvements

• Add more elements that change in light/dark mode
• Add player turn indicator in smaller screen views
• Possibility to play against the computer

Built With

• Font: Google Fonts https://fonts.google.com/
• Buttons: Bootstrap https://getbootstrap.com/docs/5.1/components/buttons/
• HUD Image: Hud Vectors by Vecteezy https://www.vecteezy.com/free-vector/hud
• Star Background Image: Wallpaper Bat https://wallpaperbat.com/green-galaxy-wallpapers
• Favicon: Token by Lars Meiertoberens from the Noun Project https://thenounproject.com/
• Sound fx: FreeSFK https://www.freesfx.co.uk/Default.aspx
• Neon effect: CSS Tricks https://css-tricks.com/how-to-create-neon-text-with-css/