Doodle Jump GL

100%

Doodle Jump GL

✓ Published0🌍 Public

Last edited Oct 10, 2020

Created on Oct 4, 2020

A doodler character jumps upward through a vertical grid of platforms, with controls for left, right, and upward movement. The game tracks a score, detects collisions with platforms to trigger jumps, and ends when the doodler falls below the bottom. Rendered as an HTML/CSS animation in a 400-by-500 grid, it updates state every 50 milliseconds via `setInterval`, with keyboard input handled through a `keydown` event listener. Platforms reset when they scroll past the bottom, and the game-over screen displays the final score.

AI-generated description

MIT Licensed

Similar vizzes

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

70% match

Loading thumbnail…

first D3

This example shows a fullscreen grid of 200 vertical rectangles, each a random color, animating upward indefinitely. The rendering approach uses raw SVG elements created via the `document.createElementNS` API, with styles set directly on each rectangle. The animation relies on the Web Animations API (`element.animate`) to translate each rectangle along the Y-axis with randomized durations and infinite iterations. No external JavaScript libraries are used; the page is a minimal HTML document with inline CSS and JavaScript, demonstrating basic D3-free DOM manipulation for a generative visual effect.

GGusnaRWX

62% match

Loading thumbnail…

Google Hurdles

This example animates a Google Doodle as a hurdles-style race, where the logo repeatedly leaps and lands in a rhythmic loop. The visualization is driven entirely by synthetic keyboard events, which the code dispatches to the document’s `hplogo` element via the standard DOM `Event` API. A `setInterval` triggers left- and right-arrow keydown, keypress, and keyup events every 10 milliseconds, simulating a rapid jogging motion. The rendering is purely DOM-based, relying on the browser’s built-in event handling to animate the logo, with no external visualization library such as D3 or Canvas.

Mmbostock

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

60% match

Loading thumbnail…

Basic Laberinth

This interactive D3 maze generator creates a 15x15 tile-based labyrinth. Players navigate by clicking directional arrows along the board’s edges to slide entire rows or columns of tiles, demonstrating a classic sliding-puzzle mechanic. The visualization uses SVG paths and gradients for the stone-textured board and colored tiles, with a redundant spare tile that moves as rows and columns shift. The code employs D3 selections and event handlers, including `select`, `range`, and custom `touch` logic, to manage tile state and animation on user input.

IIan Newby

59% match

Loading thumbnail…

Fork of D3 Starter

A grid of fifteen circles undulates vertically and changes radius in a continuous sine-wave pattern, creating a flowing wave effect across the screen. Running on a timer that updates every 20 milliseconds, the animation redraws each circle's y-coordinate and radius based on a sine function. The code uses D3 v6’s `select`, `range`, and data joins with `join('circle')` to bind and update SVG circle elements, while the viewport-sized SVG fills the browser window.

Wwgloss

59% match

Loading thumbnail…

DS Aug, Code 6

This visualization animates the dive-by-dive performance of a synchronized springboard team, using flowing, color-coded circles to represent the execution scores of each athlete across their routine. The code renders to both a Canvas, for the animated flow lines, and an SVG, using d3.v4 scales and lodash for data processing. Each circle's radius maps to the dive's difficulty via `d3.scaleLinear`, while its path is generated through a recursive midpoint-displacement algorithm adapted from a Dan Gries tutorial. The animation length and rotation are tied to the dive’s raw score and total, with gradients reflecting the athlete’s country and gender.

PPatrick Wojda

59% match

Loading thumbnail…

Isometric III

An animated field of white, wireframe cubes rotates and rises in an isometric grid. Each cube spins on its vertical axis, with the rotation amount and vertical position varying by its distance from the center, creating a wave-like motion across the diamond-shaped pattern. Built with D3’s `d3-timer` and `d3-ease` modules, it uses a custom `isometric` library to project 3D coordinates onto a 2D Canvas context, drawing paths with `moveTo` and `lineTo`. The animation is driven by the timer’s elapsed time, and cube placement uses both Manhattan and Cartesian distance calculations.

Mmbostock

59% match