Image Impact Lab

Cinevva's analyzer read this game's design doc and its source, then wrote the brief below. "Make your own" hands it to the game creator as your opening message, so you start from a real spec rather than a one-line idea.

Create a responsive browser game titled “Image Impact Lab” with a dark Korean-language interface and a canvas-based interactive play area. The page should use a dark navy radial/linear-gradient theme, rounded panels, subtle blue borders and shadows, and a compact responsive layout that fills the viewport. At the top, show the title “Image Impact Lab” and the subtitle “이미지를 올리고, 두 가지 방식으로 흔적을 남겨보세요.” On the right show two counters: “명중” (hits) and “연소” (burns), both starting at 0. Below, add a toolbar with a file-upload button labeled “🖼️ 이미지 넣기” accepting image files, a selected gold active button “🎯 사격판에 넣기”, a dark/red fire button “🔥 화염 속에 넣기”, and a “↻ 초기화” reset button. The main stage is a large rounded, bordered canvas with a dark blue background, a small pill label at the upper-left reading “사격 모드” or “화염 모드”, and a bottom-centered instructional hint that changes by mode: shooting says “화면을 탭하거나 클릭해서 과녁을 쏘세요 · PC는 마우스 클릭”; burning says “화면을 길게 누르거나 클릭해서 이미지를 불태워보세요”.

Before an image is uploaded, draw a dark blue grid-like canvas background with a subtle linear gradient from lighter navy at the top to nearly black at the bottom, vertical and horizontal blue-gray lines spaced about 40px apart, and centered Korean placeholder text: “이미지를 넣으면 여기에 나타납니다” in large light text, with “사격 또는 화염 모드를 선택하세요” beneath it in smaller muted text. If the player clicks or taps the canvas without an image, show a centered modal overlay with a dark card, title “이미지를 먼저 넣어주세요”, explanatory text “상단의 “이미지 넣기” 버튼으로 사진을 선택하세요.”, and an “확인” button that closes it.

When the player selects an image, load it locally and display it centered in the stage, preserving its aspect ratio. Fit it within approximately 56% of the stage width (capped around 500px) and 62% of the stage height (capped around 350px). Put a dark rectangular backing around the image with padding, a soft shadow, and a 5px border. In shooting mode use a pale border and add a red target reticle centered over the image: a red circular ring around 27% of the smaller image dimension plus horizontal and vertical crosshair lines. In burn mode use an orange-red glowing border and orange glow around the image instead.

Shooting mode: clicking/tapping inside the displayed image creates one impact and increments the “명중” counter. Clicking outside the image does nothing. Each impact appears at the exact click position as a dark circular bullet mark with a bright gold outline and pale crosshair-like horizontal/vertical streaks; it expands and fades out over roughly one second. Play a short low, harsh sawtooth shooting sound on impact. Mode changes should update the active button, mode pill, hint, and visual effects, and clear existing temporary marks/effects, but should not reset the counters.

Burn mode: clicking inside the image increments “연소”, spawns a cluster of about 12 animated flame particles around the click, and about 4 gray smoke puffs above/around it. The flames should be stylized layered-gradient teardrop/diamond shapes colored red-orange, orange, and yellow, wobbling as they animate and fading after a short lifetime. Smoke should drift upward slowly, expand, and remain semi-transparent. While the pointer/finger is held down and moved across the canvas, periodically create additional burn clusters along the path, approximately 35% of pointer-move events, but only when inside the image. Also maintain a low level of ambient flames along the bottom edge of the image while burn mode is active, so the image appears to be burning. Play a short deep sawtooth fire sound for burn actions. Use pointer events so both mouse and touch work, prevent canvas scrolling, and capture the pointer while pressed.

The reset button must clear all impact marks, flames, embers/smoke effects, and reset both counters to zero. Uploading a new image should clear the temporary effects but preserve the current counters. Keep a continuous animation loop for the canvas, redraw the background and image every frame, and make the canvas resize to its responsive stage dimensions on window resize. Use accessible, high-contrast controls with rounded corners and mobile-friendly touch targets; on small screens compact the toolbar and stats while preserving the same mechanics and Korean labels. There are no enemies, levels, lives, timer, or win state: this is a tactile image-playground where the goal is simply to upload an image and leave shooting or burning visual traces on it.