SCRIPT-8

100%

✓ Published0🌍 Public

Last edited Jan 26, 2019

Created on Jan 26, 2019

SCRIPT-8 is a canvas-based game cassette that runs a simple interactive program written with the SCRIPT-8 engine. It renders a small scene using the engine’s built-in drawing commands and updates it each frame through its game loop. The code uses SCRIPT-8’s `tick` callback to handle input and time, and employs its `sprite` and `map` APIs to place graphics on the screen. The visible result shows a basic character or object moving in response to keyboard controls, with the entire experience contained in a single `code.js` file. No external libraries are used beyond the SCRIPT-8 runtime.

AI-generated description

This is a SCRIPT-8 cassette.

Similar vizzes

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

88% match

Loading thumbnail…

SCRIPT-8

This example shows a minimal SCRIPT-8 cassette program that renders the text "Hello world!" on a virtual pixel display. The entire visualization is defined in a single `code.js` file using the SCRIPT-8 runtime, where a `draw` function calls the built-in `print` method to place text at coordinates (42, 60). The accompanying metadata files—`chains.json`, `map.json`, `phrases.json`, `songs.json`, and `sprites.json`—are all empty, indicating no additional assets or logic. The rendering approach relies entirely on SCRIPT-8’s canvas-based API, with no external libraries like d3 or Three.js involved.

FFrozenfire92

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

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

61% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

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

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

56% match

Loading thumbnail…

canvas-sketch x akai-lpd8

This example shows a real-time abstract drawing that responds to MIDI controller input. It maps knob positions to the x and y coordinates and size of an ellipse, which is drawn repeatedly to create a flowing, generative trail. Pads and the fourth knob trigger resets and color changes. The sketch uses the `canvas-sketch` framework with p5.js, and the `akai-lpd8` library to read control changes and note-on events from the hardware device.

MMAKIO135

56% match