Snake Game

100%

✓ Published0🌍 Public

Last edited Jun 15, 2020

Created on Jun 15, 2020

A classic Snake game rendered on an HTML5 Canvas, where a white snake moves continuously across a dark grid, controlled by arrow keys. Each time the snake consumes a randomly placed teal fruit, its score increments and its tail grows. The animation runs via `window.setInterval`, clearing and redrawing the canvas every 250 milliseconds using Canvas 2D API methods like `fillRect` and `clearRect`, with keyboard input handled through a `keydown` event listener.

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

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

65% match

Loading thumbnail…

Canvas Fiddling

A small animated square glides horizontally across a blank canvas, moving in discrete steps and disappearing from its starting position as it advances. The example demonstrates fundamental Canvas 2D drawing and animation using the HTML5 `getContext('2d')` API, with a rectangular fill drawn via `fillRect` and cleared each frame using `clearRect`. Driven by a `setInterval` timer at 20-millisecond intervals, the square’s position increments by one pixel per frame, creating a simple, linear motion loop without user interaction.

SStrunck

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

58% match

Loading thumbnail…

Taming the Dragon

This piece shows a vibrant, animated canvas of noise that evolves into flowing, organic patterns as the mouse moves. The work uses raw JavaScript and the Canvas API, employing `getImageData` and `putImageData` to create a feedback loop. Each frame applies a blur and sharpen effect to the green and blue color channels, with the mouse controlling the blending amount. The animation continuously re-renders the image data, creating a mesmerizing, self-organizing visual that resembles a living, digital organism.

CCurran Kelleher

58% match

Loading thumbnail…

Doodle Jump GL

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.

Mmaxime-plantard

57% match

Loading thumbnail…

Random Traversal

A black canvas displays a maze being generated cell by cell via a random traversal algorithm. White cells mark the growing maze structure, while magenta highlights the current frontier of possible extensions. The animation progresses in steps, using the Canvas API to draw rectangles for cells and connections. The code implements the algorithm with a frontier array and popRandom selection, using d3.v3's timer for animation control.

Mmbostock

57% match

Loading thumbnail…

Mathematical Graphic Patterns

This example generates an animated, abstract screensaver-like pattern using a grid of circles on an HTML canvas. A 30×30 grid animates each point over time, with positions and radii driven by sine and cosine functions of a continuously increasing time variable, creating swirling, rhythmic motion. The code uses the Canvas API’s 2D rendering context (`canvas.getContext('2d')`) and `requestAnimationFrame` to update frames, with a semi-transparent black overlay to create fading trails. Circle colors shift smoothly through RGB values based on grid position, while the canvas dynamically resizes to the browser window.

CConvert-Jade

57% match