Pacman Simulation

100%

Pacman Simulation

✓ Published0🌍 Public

Last edited Sep 30, 2020

Created on Sep 30, 2020

This interactive Pacman simulation presents a maze with blue walls, a yellow player circle, and collectible red and green fruit. The player controls Pacman by moving the mouse cursor within the maze’s boundaries. The simulation uses React to manage state and D3.js functions like `scaleOrdinal` for color mapping and `range` to generate game points. SVG elements render the maze, Pacman, and fruits, with mouse events triggering point collection and hiding consumed items.

AI-generated description

This program uses React & D3 to build a pacman simulation. This program was inspired by the Bowl of Fruits and Mouse Follower tutorial.

MIT Licensed

Similar vizzes

Loading thumbnail…

pacman

This example visualizes the classic Pac-Man character and dots using SVG shapes. It shows a yellow circle with a wedge-shaped mouth, created with a path, and a small black eye. Three yellow dots trail the character to the right. The code uses hand-coded SVG elements, including `circle` and `path`, combined with CSS for styling and a `transform` to flip the mouth shape. The static vector graphics are drawn directly in HTML.

Aadonisacruz0@gmail.com

75% match

Loading thumbnail…

React interactive

A yellow circle follows the mouse cursor across an SVG canvas, updating its position in real time as the user moves the pointer. The visualization demonstrates React state management with D3, using the `useState` hook to track mouse coordinates and passing them as `cx` and `cy` attributes to the circle element. The app renders through ReactDOM, while the SVG is defined directly in JSX, with no external data source.

RRuanzhenglin

66% match

Loading thumbnail…

Bowl of Fruit

A bowl of fruit animates through a sequence of five apples that shrink, change type, and disappear over time. The visualization demonstrates how SVG circle elements are added, updated, and removed using D3's enter, merge, and exit selections. Each fruit's color and radius come from `scaleOrdinal` color and size scales, while a `transition().duration(1000)` animates the circles' growth, movement, and removal. The React app drives the state changes through timed `setTimeout` calls, and the `fruitBowl` function handles the animated rendering.

Ccacho2294

66% match

Loading thumbnail…

Bowl of Fruit - Click events with D3.js!

This example demonstrates interactive SVG circles representing a bowl of fruit, where clicking a fruit highlights it with a black stroke. The visualization uses D3.js data joins to smoothly transition fruit sizes and positions when apples are removed or replaced with lemons over timed intervals. The `fruitBowl` function handles enter, update, and exit selections with animated radius and x-coordinate transitions. React is used as the framework wrapper, while `scaleOrdinal` maps fruit types to colors and radii, and event listeners trigger the selection state updates.

SSaroj Khanal

66% match

Loading thumbnail…

Mouse Move

This example presents a mouse-tracking game in which a colored dot follows the cursor as long as it stays inside the visualization area. The game starts only after the user clicks a green "Start" button; once active, moving the cursor outside the defined bounds changes the dot’s color to red, indicating the player is "out." Built with React and D3 v6, the visualization uses React’s `useState` hook to manage game state and cursor position, while SVG rendering with a `VizContainer` component handles the static margins and drawing area. Mouse events (`onMouseMove`, `onMouseLeave`) update the dot’s coordinates, clamped to the inner dimensions.

VVikil Lakkavatri

66% match

Loading thumbnail…

Mouse Follower - Interaction with React

A smiling yellow face rendered with React and SVG follows the mouse cursor across a full-screen canvas. The application tracks pointer movement via React's `useState` and `useCallback` hooks, updating the circle's center coordinates on every `onMouseMove` event. The face is composed of reusable React components—`Face`, `BackGroundCircle`, `Eyes`, and `Mouth`—where the mouth path is generated using the D3 `arc()` generator. All rendering uses SVG elements positioned within a `<g>` transform, demonstrating a simple interactive visualization built with React state management and D3's geometry utilities.

AAlark Joshi

65% match

Loading thumbnail…

Bowl of Fruit - General Update Pattern with labels! with D3.js!

This example demonstrates the general update pattern in D3.js, showing how a static bowl of fruit changes over time as items are eaten or replaced. The visualization uses SVG rendering with React, where circles represent apples and lemons, colored and sized via `scaleOrdinal` encodings. The code animates through three distinct transitions—removing an apple, swapping an apple for a lemon, and filtering out another—using `selectAll`, `enter`, `merge`, and `exit` to manage dynamic data updates. The fruit bowl itself is a rounded rectangle, and text labels appear below each fruit, all orchestrated through the custom `fruitBowl` function called sequentially with setTimeout.

Fforcox43

65% match

Loading thumbnail…

Some React Stuff

A React application renders a yellow circle with a black border that tracks the user's mouse movement. The visualization uses ReactDOM to mount a `Face` component, which is composed of a `BackgroundCircle` SVG element, alongside eye and mouth shapes with configurable offsets and radii. The code imports React 17 and D3 7 from CDN, with the circle's position and dimensions controlled by props such as `centerX`, `centerY`, and `strokeWidth`. The interactive behavior responds to cursor position within a 960 by 500 pixel viewport.

Vvaz360

65% match