Connect4

100%

✓ Published0🌍 Public

Last edited Feb 16, 2016

Created on Feb 16, 2016

Connect4 is an interactive, animated implementation of the classic Connect Four game, rendered with SVG, Canvas, and WebGL. Players take turns dropping colored discs into a 7x6 grid, with the interface built using Bootstrap-styled buttons for controls. The visualization uses multiple rendering technologies to draw the game board and pieces, with smooth animations for disc drops and win-state highlights. The source code is available as a gist by andresin87.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist a89d7fc0f8e78309dd5959f6df960e0a

A Connect-4 game simulation renders a 6-by-7 ASCII board where two players, X and O, alternate placing pieces. The code demonstrates game state management with functions to drop a piece into a column and check for a four-in-a-row win condition across horizontal, vertical, and diagonal directions. After each move, a `printBoard` function outputs the current grid, initially showing empty slots as asterisks and updating to display player tokens. The implementation uses plain JavaScript with no external libraries, running via the `npm run start` command, and relies on standard array operations and nested loops for board traversal.

Aamazingandyyy

74% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays four solid-colored circles arranged in a diamond pattern around a central point within an SVG canvas. The visualization uses raw SVG markup with inline circle elements, each defined by cx, cy, and r attributes alongside hex color fills. The page embeds the SVG inside a flex-container for centering and includes a stylesheet for subtle border styling. An accompanying JavaScript file only logs a message to the console, confirming the static nature of the graphic. The code relies solely on native SVG and HTML, with no additional data sources or libraries.

CCurran Kelleher

65% match

Loading thumbnail…

todo

A simple game rendered on a Canvas element, controlled by clicking the window to launch a magenta square upward against gravity. Obstacles, rendered as green blocks, continuously scroll from right to left; the score increments every frame the player avoids them, and resets upon collision. The game loop uses a custom `d3.timer` to update physics and redraw the canvas, while a separate `div` element displays the score. The code applies basic geometry for collision detection and movement, with the D3.js library handling selection and layout conventions.

11wheel

64% match

Loading thumbnail…

SVG ring 4

An interactive radial menu displays numbered, color-coded squares around a ring. Users spin the ring by dragging, and the active square is determined by its angular position. Built with AngularJS and SVG, the visualization updates the ring's rotation and active index based on mouse events, with a transition animation on release.

MMcNull

64% match

Loading thumbnail…

flickgame

flickgame is a compact, self-contained visualization that recreates the classic game of "Flick" on an HTML canvas. The source file encodes the entire game board—a 168×62 grid of cells—as a run-length encoded string, where numbers indicate repeated cell states and letters represent colors (e.g., `0` for background, `e` for a dark fill, `a` for a lighter fill, `d` and `1` for drawing strokes). The visualization decodes this compressed data to render a pixel-art scene of a stylized character, with each canvas row drawn sequentially. The piece demonstrates how a simple textual format can be transformed into a visual, interactive game interface, referencing the original Flickgame. The encoding highlights the efficiency of run-length representation for grid-based graphics.

Aaman-tiwari

64% match

Loading thumbnail…

Chess board Visualization

This visualization displays a chessboard with move annotations on the side, where hovering over a move like "d4 d5" highlights the corresponding squares in red. Built with D3.js v7, it uses D3 selections to append SVG `rect` elements for the board squares and `text` elements for coordinates and moves, with mouseover and mouseout events to trigger color changes via style modifications. Data for the board squares is generated programmatically from column and row arrays.

Bbubbabjh

64% match

Loading thumbnail…

Solitaire

A solitaire pegboard game rendered as an SVG using D3 version 6, where players click brown pegs to select them and then click highlighted purple target positions to jump and remove pegs. The board is a 9x9 grid with a cross-shaped play area, and the scoreboard displays the remaining pegs. The code uses D3’s `scaleLinear`, `selectAll`/`data` joins, and event handlers for click interactions, with a restart button and a "GAME OVER" message when no legal moves remain.

Bbjfmbeck

64% match

Loading thumbnail…

Conway's Game of Life

The example implements Conway’s Game of Life on a 64×128 SVG grid, rendering each cell as a rectangle. It shows cellular automaton patterns evolving over time under the standard birth, survival, and death rules, with controls to select sample patterns, start or pause simulation, and edit the grid by clicking cells. The JavaScript uses D3 v3 to bind grid data to SVG rects and to update fills, while the simulation logic is implemented with bitwise operations on typed arrays for efficient neighbor counting and state transitions. Predefined patterns, such as “Planes” and “Symm 4,” are included in a separate data file.

NNPashaP

64% match