Code Monkey home page Code Monkey logo

mullinb / connectfour-thefinalepisode Goto Github PK

View Code? Open in Web Editor NEW
1.0 0.0 0.0 39.24 MB

A fully-featured two-player browser game with optional computer opponent. 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.

Home Page: https://mullinb.github.io/ConnectFour-TheFinalEpisode/

HTML 1.40% JavaScript 90.01% CSS 8.59%
html css javascript jquery browser-game computer-player ai dynamics-js game-loop

connectfour-thefinalepisode's Introduction

mullinb.github.io

A fully-featured two-player browser game with optional computer opponent

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.

Technologies

  • Static Webpage
  • HTML
  • CSS
  • JavaScript
  • JQuery
  • Dynamics.js

connectfour-thefinalepisode's People

Contributors

mullinb avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.