Skip to main content
SimilarExport ZIP
100%

The (Ping) Pong Game

✓ Published1🌍 Public
AAxVa 🐍 💪
Last edited Nov 22, 2024
Created on Oct 5, 2024

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.

AI-generated description

Play the (Ping) Pong game. Use the mouse to move the bottom paddle. Hit the ball with the edges of the paddle to change the angle and speed of the ball. The play stops when a player reaches 10 points.

This example is based on the book "JavaScript Crash Course: A Hands-On, Project-Based Introduction to Programming" by Nick Morgan, No Starch Press, 2024.

Visit also my repo https://github.com/ax-va/JavaScript-Crash-Course-Morgan-2024.

MIT Licensed

Similar vizzes

Loading thumbnail…

Retro Pong by Claude 3.7 Sonnet

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.

CCurran Kelleher
74% match
Loading thumbnail…

Bouncing Balls

Ten colorful circles bounce around a canvas, affected by gravity and repelling each other when they touch. Users can click and drag any ball to fling it, with a spring-like pull force applied toward the mouse cursor. The simulation runs on HTML5 Canvas with requestAnimationFrame, using physics calculations for velocity, dampening, and collision detection between boundaries and other circles.

CCurran Kelleher
67% 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
66% match
Loading thumbnail…

Bouncing Balls

Bouncing Balls demonstrates a physics simulation of colorful particles colliding and bouncing within a canvas. Clicking adds new balls to the scene. The visualization uses D3’s `forceSimulation` with `forceCollide`, `forceX`, and `forceY` to handle particle interactions, while a custom `timer` loop applies gravity and wall collision logic. Rendering is done via the Canvas 2D API, with trails, velocity lines, and arrowheads colored by speed using HSL values.

CCurran Kelleher
63% 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
63% 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
63% match
Loading thumbnail…

CANVAS PELOTAS

This example displays a single blue ball bouncing across a canvas that fills the browser window, rendered using the Canvas API. The prototype-based `Balls` object uses `ctx.arc` with `fillStyle` to draw the circle, while random color and velocity generator functions are defined but not yet utilized. The JavaScript code sets up the canvas dimensions dynamically through `window.innerWidth` and `window.innerHeight`, and positions a transparent heading over the visualization.

Jjuansebas930329
63% match
Loading thumbnail…

Untitled

This visualization demonstrates a first-person raycasting engine rendered on an HTML canvas using the p5.js library. It shows a top-down map view alongside a player-controlled camera that casts rays to detect wall collisions, simulating a 3D perspective effect. The code uses p5.js functions like `fill`, `rect`, `circle`, and `line` for drawing, while the WebGL-accelerated canvas handles the animation loop. The scene features a grid-based maze with red player indicators and directional lines.

Rrahulram70
62% match