메뉴
DeskWeb 게임 애플리케이션 생성 스킬. qooxdoo 프레임워크 내에서 Canvas/Three.js 기반 게임을 구현할 때 사용. 사용 사례: (1) 2D Canvas 기반 카드/보드 게임 구현시, (2) Three.js 3D 게임 구현시, (3) 게임 AI(LLM) 통합시, (4) 게임 상태 관리/저장시.
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
| name | deskweb-game |
| description | DeskWeb 게임 애플리케이션 생성 스킬. qooxdoo 프레임워크 내에서 Canvas/Three.js 기반 게임을 구현할 때 사용. 사용 사례: (1) 2D Canvas 기반 카드/보드 게임 구현시, (2) Three.js 3D 게임 구현시, (3) 게임 AI(LLM) 통합시, (4) 게임 상태 관리/저장시. |
| author | DeskWeb Team |
| date | "2026-03-07T00:00:00.000Z" |
deskweb/source/class/deskweb/prompt/deskweb/agent.mddeskweb/source/class/deskweb/
├── ui/NewGameWindow.js # UI 윈도우 (qooxdoo 위젯)
├── game/NewGameGame.js # 게임 로직 (렌더링, 규칙)
└── game/NewGameAI.js # AI 로직 (선택, LLM 활용시)
qx.Class.define("deskweb.ui.NewGameWindow", {
extend: qx.ui.window.Window,
construct: function() {
this.base(arguments, "게임 이름", "deskweb/images/newgame.svg");
this.set({
width: 700, height: 600,
showMinimize: true, showMaximize: true,
contentPadding: 0
});
this.setLayout(new qx.ui.layout.VBox());
this._createUI();
},
members: {
__game: null,
_createUI: function() {
// 툴바 (난이도, 새 게임 등)
// 게임 캔버스 영역
// 상태바 (점수, 타이머 등)
}
}
});
qx.ui.embed.Html로 Canvas 삽입pointerdown, pointerup, contextmenu (우클릭)requestAnimationFrame 또는 qx.event.Timer// Canvas 삽입 패턴
var canvas = new qx.ui.embed.Html('<canvas id="game-canvas"></canvas>');
canvas.addListenerOnce("appear", function() {
var el = canvas.getContentElement().getDomElement();
var ctx = el.querySelector("canvas").getContext("2d");
// 게임 초기화
}, this);
// Three.js 초기화 패턴
_initThreeJS: function(container) {
this.__scene = new THREE.Scene();
this.__camera = new THREE.PerspectiveCamera(45, width/height, 0.1, 1000);
this.__renderer = new THREE.WebGLRenderer({ antialias: true });
container.appendChild(this.__renderer.domElement);
// 조명
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 0);
this.__scene.add(light);
}
https://mcp.webnori.com/api/llm/chat/completions| 게임 유형 | 참조 파일 | 핵심 패턴 |
|---|---|---|
| 카드 게임 | SolitaireGame.js | 드래그앤드롭, 카드 스택 관리 |
| 보드 게임 (2D) | MinesweeperGame.js | 격자 기반, 좌/우클릭, 난이도 |
| 3D 액션 | TetrisGame.js | Three.js, 키보드 입력, 스테이지 |
| 3D + AI | JanggiGame.js + JanggiAI.js | Three.js, LLM 대전, 포물선 이동 |
deskweb-app 스킬의 등록 절차와 동일 (아이콘, 시작메뉴, 창 열기 메서드)
cd deskweb && qx compile # 소스 컴파일
qx serve --listen-port=8080 # 개발 서버 실행
# 접속: http://localhost:8080/deskweb/
DeskWeb 일반 애플리케이션 생성 스킬. qooxdoo 프레임워크 기반 윈도우 앱(메모장, 엑셀, HWP뷰어, iframe앱 등)을 추가할 때 사용. 사용 사례: (1) 새로운 윈도우 앱 추가시, (2) 파일 연동 앱 구현시, (3) 외부 라이브러리 통합 앱 구현시, (4) iframe 기반 외부 URL 앱 추가시.
DeskWeb 프로젝트 컨벤션 및 공통 패턴 스킬. 프로젝트 구조, 빌드, 테스트, 스토리지, 테마, 아이콘 관리 등 공통 규칙 참조시 사용. 사용 사례: (1) 프로젝트 구조/컨벤션 확인시, (2) 빌드/배포 절차시, (3) 스토리지/세션 관리시, (4) 아이콘/테마 커스텀시, (5) 바탕화면 기능 추가시.
DeskWeb LLM/AI 통합 스킬. 브라우저 내 WebLLM 또는 외부 LLM API를 활용하는 기능 구현시 사용. 사용 사례: (1) 챗봇 앱에 LLM 연동시, (2) 게임 AI에 LLM 프롬프트 설계시, (3) AI-OS 기능(앱 제어, 자동화)시, (4) WebLLM 브라우저 내 모델 로드시, (5) 스트리밍 응답 구현시.