Skip to main content
100%

Monsters! Game

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

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.

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
100% match
Loading thumbnail…

Monsters! Game

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.

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
81% 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
61% 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
59% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Fork of HTML Starter

This interactive word search game displays a 15x15 grid of letters containing 15 hidden animal, nature, and food-themed words for children to find. Users select words by clicking and dragging horizontally or vertically across adjacent cells, with highlighted selections and visual feedback on the word list. The game uses vanilla JavaScript with DOM manipulation to generate the grid, place words using directional placement logic, and handle mouse event listeners for selection. Random letter filling completes the grid, styled with CSS grid layout and playful Comic Sans typography.

KKareena
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
Loading thumbnail…

Fork of Curran's Face a Là Sol LeWitt - Getting it Right &B&W Game

This animated game challenges players to stop the screen when all Sol LeWitt-inspired patterns appear in black and white. The visualization uses SVG elements created via `document.createElementNS` with the `http://www.w3.org/2000/svg` namespace, rendering at full window size. Patterns consist of complex path data that flicker at varying speeds; clicking the screen checks whether all patterns are grayscale. Correct guesses increment the score and halve the timer, while wrong guesses reduce lives (displayed as icons). The game resets automatically after losing all lives, with CSS transitions controlling visibility changes.

Zzaioris
57% match