What began as a class assignment with a number of suggested optional bonus features grew into a flashy, thematically-focused game with a functioning and reasonably competitive AI.
Taking inspiration from one of my favorite anime, Neon Genesis Evangelion, "Connect Four: The Final Episode" comes complete with music, sound effects, and a visual design which are mutually complimentary, and together pay tribute to the aforementioned landmark series. Using assets both borrowed and newly remixed, the visual presentation is driven by vanilla JavaScript code managing CSS transitions, and is the best example in my portfolio of my creative sense for visual design. Visual and audio fades create an epic yet moody atmosphere, completely in keeping with the tone of the original show; it is perhaps best taken ironically given the target age-range of the actual game, but the impression is a strong one nonetheless.
From a programmer's perspective, the centerpiece of the project is the AI engine of my own design. It is a simple move evaluator, written on entirely too many lines of code, but given the due date of the project, expediency was my most important consideration. However, it does work; try and beat it. If you are unfamiliar with Connect Four strategy or otherwise incautious, it may very well come up victorious, as it almost completely beyond silly errors. It contains no knowledge of the mathematical solution(s) to Connect Four, but it is a decent opponent. And that, at least, allows for a bit of solo-player fun!
Finally, the game loop is water-tight, and can be restarted seemlessly even after adjusting options such as player number, player order, or the gameboard dimensions. Basic animations using the very cool Dynamics.js library (credit to Michael Villar) govern the coin bounce, and several free sounds from freesound.org were incorporated as sound effects. The music is borrowed from the original NGE soundtrack, while most of the two large banner images are borrowed from some excellent fanart. The coins and board were of my own design, borrowing images from the show.
Please try it here.
- Static Webpage
- HTML
- CSS
- JavaScript
- JQuery
- Dynamics.js