PlayWeaver PlayWeaver

Ý tưởng game của bạn. Thành hiện thực có thể chơi được. Chỉ trong vài giây. Your Game Idea. A Playable Reality. In Seconds.

MỞ ỨNG DỤNG LAUNCH LIVE APP XEM BÀI DEVPOST VIEW DEVPOST SUBMISSION XEM GITHUB REPO VIEW GITHUB REPO
PlayWeaver project visual
Vai trò: MY ROLE: Trưởng dự án, Kiến trúc sư Full-Stack & Lập trình viên Full-Stack Project Lead, Full-Stack Architect & Full-Stack Developer
Công nghệ: STACK: Cloudflare Pages, featherless.ai, imgbb, mobbin.com, OpenAI, Upstash Redis, HTML5, CSS3, JavaScript Cloudflare Pages, featherless.ai, imgbb, mobbin.com, OpenAI, Upstash Redis, HTML5, CSS3, JavaScript
Trạng thái: STATUS: ĐANG HOẠT ĐỘNG ACTIVE

Hình ảnh & video Product previews

Video demo ngắn của PlayWeaver. Short PlayWeaver demo video.

AwardsGiải thưởng

LOVHACK SEASON 2

Giải thưởng của PlayWeaver PlayWeaver Awards

PlayWeaver xếp hạng 04/127 chung cuộc tại LovHack Season 2 năm 2026 và chiến thắng DevSwarm Builder Opportunity Track, được ghi nhận nhờ biến ý tưởng game thô thành prototype do AI tạo ra và có thể chơi ngay. PlayWeaver placed 04/127 overall at LovHack Season 2 in 2026 and won the DevSwarm Builder Opportunity Track, recognized for turning raw game ideas into playable AI-generated prototypes.

04/127 Xếp hạng chung cuộc Overall placement
Winner Chiến thắng DevSwarm Builder Opportunity Track DevSwarm Builder Opportunity Track
2026 LovHack Season 2 LovHack Season 2
Xem bài Devpost OPEN DEVPOST SUBMISSION MỞ ẢNH MINH CHỨNG TẠM OPEN PLACEHOLDER PROOF
Images coming soonHình ảnh sẽ được bổ sung

Ảnh minh chứng tạm cho phần giải thưởng PlayWeaver trong tương lai. Placeholder proof images for the future PlayWeaver award section.

Giới thiệu Overview

[?] Vấn đề [?] The Problem

Một ý tưởng game có thể rất hào hứng trong năm phút đầu, rồi việc cài engine, viết boilerplate và tìm placeholder art hút sạch năng lượng trước khi prototype kịp tồn tại. A game idea can feel exciting for five minutes, then engine setup, boilerplate, and placeholder art drain the energy before the prototype exists.

[!] Giải pháp [!] The Solution

PlayWeaver biến một ý tưởng đơn giản thành bản thiết kế game trực quan, rồi tạo prototype HTML5 Canvas ngay bên cạnh bảng thiết kế. Người dùng có thể trò chuyện với AI, thêm ảnh tham khảo, sắp xếp cơ chế bằng node và thử ngay kết quả trong khung iframe. PlayWeaver turns a plain idea into a visual game plan, then generates an HTML5 Canvas prototype beside the design board. Users can chat with the AI, add image references, map mechanics as nodes, and instantly test the result in an iframe preview.


GHI CHÚ: Mã nguồn được công khai tại github.com/elaxuwu/PlayWeaver. NOTE: The source code is public at github.com/elaxuwu/PlayWeaver.

Tính năng Features

FEAT_01 FEAT_01

Bảng thiết kế dạng node Node-Based Design Board

Trình chỉnh sửa tạo một canvas node 2D cho cơ chế, nhân vật, bối cảnh, điều kiện chiến thắng và ảnh tham khảo. The editor creates a 2D node canvas for mechanics, characters, settings, win conditions, and visual references.

FEAT_02 FEAT_02

AI điều khiển giao diện AI UI Executor

DeepSeek thông qua featherless.ai đọc đoạn chat và xuất các lệnh JSON chặt chẽ để thao tác trực tiếp lên bảng thiết kế. DeepSeek through featherless.ai reads chat and emits strict JSON commands that physically manipulate the board.

FEAT_03 FEAT_03

Bộ tạo game HTML5 tức thì Instant HTML5 Game Generator

OpenAI tạo và viết lại từng phần mã game Canvas có thể chơi được dựa trên trạng thái bảng, HTML hiện tại và URL asset đã tải lên. OpenAI generates and incrementally rewrites playable Canvas game code from the board state, existing HTML, and uploaded asset URLs.

FEAT_04 FEAT_04

Autosave an toàn cho asset Asset-Safe Autosave

Ảnh tải lên được chuyển sang ImgBB, còn Upstash Redis lưu trạng thái dự án gọn sạch để prototype có thể khôi phục mà không bị quá tải Base64. Uploaded images move to ImgBB while Upstash Redis stores clean project state, keeping prototypes recoverable without Base64 overload.

Công nghệ Technology

View full technical detailsXem chi tiết kỹ thuật
Hạng mục CATEGORY Thành phần sử dụng USED COMPONENTS MỤC ĐÍCH PURPOSE
AI đã dùng AI Used featherless.ai, OpenAI Điều khiển bảng thiết kế bằng chat tốc độ cao và xử lý phần tạo game nặng hơn. Fast chat-driven board control plus heavier game generation.
Frontend HTML5, CSS3, JavaScript Trình chỉnh sửa node, canvas kéo/phóng, liên kết node, giao diện chat và khung xem trước game bằng iframe. Node editor, panning and zooming canvas, links, chat UI, and game iframe preview.
Backend & Cơ sở dữ liệu Backend & Database Cloudflare Pages, Upstash Redis Hosting serverless, lưu trạng thái, lưu dự án và lịch sử chat. Serverless hosting, state persistence, project saves, and chat history.
Asset Assets imgbb, mobbin.com Lưu trữ hình ảnh và hỗ trợ quy trình dùng ảnh tham khảo. Image hosting and visual reference workflow support.
Triển khai Deployment Cloudflare Pages Triển khai ứng dụng live công khai. Public live app deployment.