Skip to content

The slickest way to get 4-in-a-row, written using HTML5, JS, and Mithril (like React). Features an AI player, online multiplayer capability, and a smooth user interface

License

caleb531/connect-four

main
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Connect Four

Copyright 2016-2022, Caleb Evans
Released under the MIT License

tests

This is the slickest Connect Four app around, written using HTML5, JavaScript, and Mithril (a React-like framework). You can play on your phone or computer, with a friend or against the AI. Just be sure to enjoy and have fun. :)

You can play the app online at:
https://connectfour.calebevans.me/

Implementation

User interface

The entire app UI is constructed and managed in JavaScript using Mithril. Chip transitions are handled by CSS to maximize performance and smoothness. The grid layout is styled with CSS Flexbox to enable the stacking of grid elements from the bottom up.

AI Player

Like many traditional board game AIs, my Connect Four AI uses the minimax algorithm. For my particular implementation, I've chosen to use a maximum search depth of three (meaning the AI examines possibilities up to three turns into the future). This is combined with alpha-beta pruning to dramatically reduce the number of possibilities evaluated.

My scoring heuristic works by counting connections of chips that intersect with an empty slot, giving exponentially more weight to larger connections. For example, every single chip touching an empty slot is worth four points, a connect-two is worth nine points, a connect-three is worth sixteen points, and so on. A winning connection of four or more chips is given the maximum/minimum score.

In the app, the AI player is lovingly referred to as "Mr. AI".

Run the project locally

1. Install global dependencies

The project requires Node (>= 8) and Gulp, so make sure you have both installed.

2. Install project dependencies

Install packages

This project uses pnpm (instead of npm) for package installation and management. From the cloned project directory, run:

npm install -g pnpm
pnpm install

3. Serve app locally

To serve the app locally, run:

gulp serve

You will then be able to view the app at http://localhost:8080. Any app files will be recompiled automatically when you make changes to them (as long as gulp serve is still running).

About

The slickest way to get 4-in-a-row, written using HTML5, JS, and Mithril (like React). Features an AI player, online multiplayer capability, and a smooth user interface

Topics

Resources

License

Stars

Watchers

Forks

Languages