Data

Tools

Indexes

Applications

Experiments

Open Source Science

https://github.com/caleb531/connect-four

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

https://github.com/caleb531/connect-four

Science Score: 26.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ○
    CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (12.0%) to scientific vocabulary

Keywords

connect-four game html5 javascript minimax mithril
Last synced: 5 months ago · JSON representation

Repository

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

Basic Info
Statistics
  • Stars: 30
  • Watchers: 4
  • Forks: 10
  • Open Issues: 0
  • Releases: 1
Topics
connect-four game html5 javascript minimax mithril
Created about 9 years ago · Last pushed 7 months ago
Metadata Files
Readme License

README.md

Connect Four

Copyright 2016-2025 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 Mr. A.I.

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 (>= 18), so make sure you have that 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:

bash npm install -g pnpm pnpm install

3. Serve app locally

To serve the app locally, run:

bash pnpm dev

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 pnpm dev is still running).

Owner

  • Name: Caleb Evans
  • Login: caleb531
  • Kind: user
  • Location: Carlsbad, CA

Hi, I'm Caleb, a web developer who lives for Christ by building enjoyable apps and useful tools. I hope you are blessed by what I've made!

GitHub Events

Total
  • Watch event: 4
  • Push event: 40
  • Pull request event: 2
Last Year
  • Watch event: 4
  • Push event: 40
  • Pull request event: 2

Dependencies

package.json npm
  • @rollup/plugin-commonjs ^11.0.2 development
  • @rollup/plugin-json ^4.0.2 development
  • @rollup/plugin-node-resolve ^7.1.1 development
  • autoprefixer ^10.4.2 development
  • chai ^4.2.0 development
  • chai-dom ^1.8.1 development
  • eslint ^8.10.0 development
  • gulp ^4.0.0 development
  • gulp-noop ^1.0.0 development
  • gulp-sass ^5.0.0 development
  • gulp-sourcemaps ^2.6.4 development
  • gulp-terser ^1.2.0 development
  • istanbul ^0.4.5 development
  • karma ^6.3.16 development
  • karma-chai-dom ^1.1.0 development
  • karma-chrome-launcher ^2.2.0 development
  • karma-coverage ^1.1.2 development
  • karma-mocha ^1.3.0 development
  • karma-sinon-chai ^2.0.2 development
  • karma-sourcemap-loader ^0.3.7 development
  • mocha ^6.1.4 development
  • remap-istanbul ^0.13.0 development
  • rollup ^1.32.1 development
  • rollup-plugin-glob-import ^0.4.5 development
  • rollup-plugin-terser ^5.3.0 development
  • sass ^1.35.2 development
  • sinon ^7.3.2 development
  • sinon-chai ^3.3.0 development
  • typeface-ubuntu 0.0.22 development
  • workbox-build ^4.3.1 development
  • clipboard ^2.0.4
  • compression ^1.7.4
  • esm ^3.2.25
  • express ^4.17.1
  • express-enforces-ssl ^1.1.0
  • helmet ^3.21.2
  • mithril ^2.0.4
  • moment ^2.29.4
  • socket.io ^4.4.1
  • socket.io-client ^4.4.1
  • sw-update-manager ^1.0.0
  • tiny-emitter ^1.1.0
  • underscore ^1.9.1
  • uuid ^3.3.2
.github/workflows/docker.yml actions
  • actions/checkout v3 composite
.github/workflows/lint.yml actions
  • actions/checkout v3 composite
  • actions/setup-node v3 composite
  • pnpm/action-setup v2 composite
.github/workflows/tests.yml actions
  • actions/checkout v3 composite
  • actions/setup-node v3 composite
  • pnpm/action-setup v2 composite
Dockerfile docker
  • node 16-alpine build
pnpm-lock.yaml npm
  • 541 dependencies