Skip to main content
100%

Monsters! Game

✓ Published0🌍 Public
Aangusgrant
Last edited Nov 10, 2022
Created on Nov 10, 2022

Monsters! Game is an interactive memory game rendered as an SVG. Players click tiles to reveal hidden monster icons. The game uses a grid of clickable images, with each tile concealing a monster or a sock. The underlying code encodes the tile image data in base64 and decodes it on click to reveal the monster. Clicking on a sock triggers a "Game Over" message, while revealing all eleven monsters displays a congratulatory message. The visualization is built with a simple grid layout and SVG icons, with game logic handled by JavaScript event listeners.

AI-generated description

Similar vizzes

Loading thumbnail…

Monsters! Game

Monsters! Game is a single-page interactive memory game built with JavaScript and SVG icons. Players click on covered tiles to reveal hidden monsters, trying to find all 11 monsters without uncovering the sock that ends the game. The interface uses a simple three-column grid layout, and each tile toggles from a door image to a monster or sock icon. The game tracks clicks, reveals images by decoding base64-encoded data attributes, and displays a "Game Over" message when the sock is found, with an option to reload and play again.

Aangusgrant
97% match
Loading thumbnail…

Monsters! Game

Monsters! Game is a single-page interactive memory game built with JavaScript and SVG icons. Players click on covered tiles to reveal hidden monsters, trying to find all 11 monsters without uncovering the sock that ends the game. The interface uses a simple three-column grid layout, and each tile toggles from a door image to a monster or sock icon. The game tracks clicks, reveals images by decoding base64-encoded data attributes, and displays a "Game Over" message when the sock is found, with an option to reload and play again.

Aangusgrant
97% match
Loading thumbnail…

Monsters!

Monsters! displays a shuffled grid of monster-themed SVG icons in a simple three-column layout. The page uses a JavaScript function to randomize the order of an array of monster images, then renders them as an HTML grid. Each monster is a distinct SVG icon, including one-eyed, multi-limbed, tentacled, and bug-like creatures, plus a single pair of socks as an odd one out. The project credits the individual icon designers in the footer. The rendering is done in SVG, and the layout is a responsive grid that scales images on smaller screens.

Aangusgrant
82% 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
62% match
Loading thumbnail…

Demos

This interactive scatterplot lets users explore horror movie monsters by swapping the X and Y axes between four attributes—physical strength, fear factor, killing power, and horror rating—via dropdown menus. The visualization, built with D3.js v3 and SVG, uses linear scales to map the chosen attributes to circle positions, with each monster represented as a white-bordered circle. A tooltip using the d3-tip library appears on hover, while the green header and sidebar follow a cohesive Raleway-styled design. The underlying data is hardcoded as an array of monster objects.

DDarienLiang
61% match
Loading thumbnail…

VIS2

This interactive visualization displays a filtered collection of over 20,000 board games as a hexagonal grid, using a random seeded layout to position games. Users can filter by player count and category via dropdown menus, with the top 104 ranked games shown as hexagons sized by ranking. Built with D3.js (d3-hexbin, d3-collection, d3-seedrandom), it renders SVG hexagons over a canvas and includes zoom and pan navigation, while tooltips show game details on hover. The visualization animates transitions when filters change, and data comes from a CSV of board game attributes.

DDaniel
59% match
Loading thumbnail…

logos trivial pursuit

This visualization recreates the classic Trivial Pursuit board game, showing six category wedges—arts, divertissement, geography, history, science, and sport—arranged in a circular layout. Each category is represented by a distinct SVG icon and a larger background variant, all rendered with the same blue circular token and pie-piece shapes. The SVG files are created with Inkscape, using precise path data and transform matrices to position each element. The display combines individual category icons with their corresponding background panels, offering a complete visual reference for the game’s components.

RRCura
58% 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
58% match