100%

Retro Pong by Claude 3.7 Sonnet

✓ Published0🌍 Public

Last edited Jul 17, 2025

Created on Jul 17, 2025

This example recreates the classic Pong arcade game as a two-player interactive animation. The code implements full game logic with paddle controls, score tracking, ball physics that increase difficulty, and retro sound effects generated through the Web Audio API. The visual design uses a monochrome palette with a Courier New font, rendered entirely through DOM manipulation of HTML elements. All gameplay mechanics, including collision detection, paddle movement, and game state management, are handled with vanilla JavaScript and CSS positioning.

AI-generated description

Retro Pong Game

A classic implementation of the Pong game using vanilla HTML, CSS, and JavaScript.

Controls

Player 1 (Left Paddle)

W: Move Up
S: Move Down

Player 2 (Right Paddle)

Arrow Up: Move Up
Arrow Down: Move Down

Features

Two-player gameplay
Score tracking
Realistic ball physics with increasing difficulty
Retro sound effects
Classic visual design

MIT Licensed

Similar vizzes

Loading thumbnail…

The (Ping) Pong Game

The (Ping) Pong Game is a two-player arcade game rendered on a 300x300 HTML5 Canvas, where a ball bounces between a top paddle and a mouse-controlled bottom paddle. The simulation tracks collisions between the ball and paddle edges, adjusting the ball’s angle and speed upon edge hits, and increments scores until one player reaches 10 points. The code uses the Canvas API for drawing, JavaScript classes for game entities (GameView, Paddle, Ball, Play), and mouse event listeners for input. This example, based on the book *JavaScript Crash Course*, demonstrates interactive collision detection and score tracking in a minimal, browser-based setup.

AAxVa 🐍 💪

74% match

Loading thumbnail…

Effective JavaScript: Frogger

This is a complete implementation of the arcade game Frogger, rendered as an interactive animation on an HTML5 Canvas. The player controls a character with arrow keys to navigate across lanes of moving enemies, earning points by reaching the top while managing a limited number of lives. The code uses the game loop in `engine.js` with `requestAnimationFrame` for smooth updates, and custom `Enemy` and `Player` classes handle movement, collision detection, and score/life tracking. Sprites are loaded via the `Resources` utility and drawn using the Canvas `drawImage` method.

KKacieW

59% match

Loading thumbnail…

SCRIPT-8

This example uses SCRIPT-8, a JavaScript fantasy console for creating retro-style games and visualizations. It renders a colorful, animated scene directly to the canvas using the console’s built-in graphics API. The visualization draws sprites and map data from JSON files, with procedural animation driven by the `requestAnimationFrame` loop. SCRIPT-8’s `pixel` and `sprite` functions handle the drawing, while its input and sound APIs are loaded but unused, focusing purely on visual output. The cassette’s empty chains, songs, and phrases files confirm a minimal, self-contained demonstration of the platform’s rendering capabilities.

FFrozenfire92

57% match

Loading thumbnail…

Curran's Face a Là Sol LeWitt - Getting it Right

An interactive game challenges players to time a screen freeze so that only black-and-white patterns are visible, referencing Sol LeWitt's art. The animation cycles through colorful horizontal and vertical stripe groups masked by a face-shaped SVG path. Using the SVG Mask API and `createElementNS`, the code builds layered `<rect>` elements and toggles their visibility via `getComputedStyle` and `setInterval`. A score increments on correct timing, and the timer accelerates after each success, increasing difficulty.

FFelipe Maion

56% match

Loading thumbnail…

Untitled

This example shows a static soccer pitch drawn on a Canvas element, with a white ball and a player marker that move toward a target point. The pitch includes all standard markings—midline, center circle, penalty areas, goal boxes, and corner arcs—rendered with Canvas 2D `rect`, `arc`, and `lineTo` calls. A `requestAnimationFrame`-driven loop animates the ball’s movement, which uses trigonometry to calculate direction and applies a speed decay factor, while the player moves linearly toward its destination. The code uses plain JavaScript and the Canvas API directly without any external libraries.

MMKlaasman

56% 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

56% 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

55% match

Loading thumbnail…

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

The game displays a face made of Sol LeWitt-inspired patterns that flicker between black-and-white and colored states. Players click to freeze the animation when all patterns are monochrome; correct guesses increase score and speed, while mistakes cost lives. The game uses the SVG DOM API to create elements, with `createSVGElement` and mouse event listeners controlling the interaction and timing.

FFelipe Maion

55% match