Prompt Style Atlas

代码动效参考 · 游戏与互动

Create a single self-contained HTML file that renders an animated pix…

Created by

原始 Prompt

原文已收录 · 未独立复现

Create a single self-contained HTML file that renders an animated pixel art wizard casting a spell, using vanilla JavaScript and Canvas 2D. No external assets, libraries, or network requests. RENDERING - Draw everything to an offscreen canvas at a fixed logical resolution of 128x96, then blit to a fullscreen display canvas scaled by the largest integer factor that fits the window, centered, with imageSmoothingEnabled = false and CSS image-rendering: pixelated. - All drawing snaps to integer coordinates on the logical canvas. No sub-pixel positions, anti-aliasing, gradients, or shadowBlur. - Fixed palette of ~24 hex colors: deep blues/purples for night sky, warm robe tones, 3-4 bright magic colors. Every pixel comes from this palette. CHARACTER - Build the wizard procedurally from filled rects and pixel runs, ~24x32 logical pixels: pointed hat with a bend, long beard, two-shade robe with darker outline, staff with a gem at the tip. - Parameterize the pose (staff angle, arm raise, head tilt, robe sway). Animate parameters smoothly, then quantize to the pixel grid each frame so motion reads at an 8-12 fps pixel animation feel even though the loop runs at 60fps. ANIMATION - Looping state machine: IDLE (2-frame bob, beard sway) -> CHARGE (staff raises, gem flickers, sparks spiral inward) -> CAST (bright burst, projectile fires across the scene, 1-2 pixel screen shake) -> RECOVER (settle back). Ease pose parameters between keyframes. - Pooled allocation-free particle system: preallocate and reuse. Sparks orbit the gem during CHARGE, explode outward on CAST, each particle stepping its palette index from white to magic color to dark before despawn. Snap particle positions to the grid when drawing. - Fixed 60hz timestep update with rAF rendering. Zero object allocation inside the loop. SCENE - Minimal background: dark sky, a few twinkling 1px stars, moon, stone floor line. Character silhouette must read clearly. - Subtle 1px rim light on the wizard from the gem, brightening during CHARGE and CAST. QUALITY BAR - Crisp pixels at any window size, seamless loop, stable 60fps, readable silhouette. Should look like a polished 16-bit sprite animation, not vector shapes scaled down.

查看 X 原帖

视频信息

时长: 0:19
画幅: 1280 × 1008

技术栈

canvaspixelplayable

如何使用这条 Prompt

这些案例通过代码制作动效或交互 HTML，不是 Sora、Runway 等文生视频模型的生成配方。来源 Prompt 和预览不保证同样输出，复现前请检查依赖及原帖说明。

使用流程

用来源需求重建代码动效

预览用于参考，来源文字可能省略后续修改、素材或依赖；本站未独立复现这些案例。

阅读代码动效使用指南

01
先看完整/部分原文标识，再到原帖检查缺失指令与素材。
02
向编程助手说明输出格式、库版本和素材要求，先完成一个可运行场景。
03
运行生成的项目，先检查浏览器控制台，再增加效果。
04
对照预览检查时序和交互，并检查缩放、移动端和减少动态效果模式。

结果不符合预期？先检查这些

场景黑屏？依次检查加载错误、画布尺寸、相机取景和渲染循环。
代码动效需求不能直接当作文生视频配方使用。

同类更多 Prompt

Opus 5.5 是要上天了吗？一段 prompt 一把帮我复刻了一个泡泡堂！简直是童年经典 💣 无论是游戏机制还是游戏美学我觉得都是足…

@happycapyai

opus 5.5 遊戲製作，週末快點來嘗試。

@mrblock

帮我做一个原创的手游「高光时刻」动效：[主体，例如：开宝箱 / 段位晋升 / 成就解锁 / Boss 掉落 / 角色升级]。做成一个可以…

@op7418