deskweb-game

النجوم٣

التفرعات٠

آخر تحديث٢٤ يوليو ٢٠٢٦ في ١١:١٩

DeskWeb 게임 애플리케이션 생성 스킬. qooxdoo 프레임워크 내에서 Canvas/Three.js 기반 게임을 구현할 때 사용. 사용 사례: (1) 2D Canvas 기반 카드/보드 게임 구현시, (2) Three.js 3D 게임 구현시, (3) 게임 AI(LLM) 통합시, (4) 게임 상태 관리/저장시.

التثبيت

التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.

المصدر

psmon

psmon/DeskWeb

فتح مستودع GitHub عرض مستودعات المنشئ

تنزيل

المهن ذات الصلةSOC

استنادا إلى تصنيف SOC المهني

مطوّرو الويبمهن الحاسوب والرياضيات·SOC 15-1254

SKILL.md

readonly

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 게임 애플리케이션 생성 스킬

프로젝트 컨텍스트

DeskWeb은 qooxdoo v7.9 기반 Windows XP 스타일 웹 데스크톱
소스 경로: deskweb/source/class/deskweb/
프로젝트 가이드: prompt/deskweb/agent.md

Instructions

1. 파일 구조 (UI/로직 분리 필수)

deskweb/source/class/deskweb/
├── ui/NewGameWindow.js      # UI 윈도우 (qooxdoo 위젯)
├── game/NewGameGame.js       # 게임 로직 (렌더링, 규칙)
└── game/NewGameAI.js         # AI 로직 (선택, LLM 활용시)

2. 게임 윈도우 (UI Layer)

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() {
      // 툴바 (난이도, 새 게임 등)
      // 게임 캔버스 영역
      // 상태바 (점수, 타이머 등)
    }
  }
});

3. Canvas 기반 게임 (2D)

qooxdoo 위젯 내에 qx.ui.embed.Html로 Canvas 삽입
마우스 이벤트: pointerdown, pointerup, contextmenu (우클릭)
게임 루프: requestAnimationFrame 또는 qx.event.Timer
참조: SolitaireGame.js, MinesweeperGame.js

// 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);

4. Three.js 기반 게임 (3D)

Three.js CDN 또는 번들 로드
WebGL 렌더러 기본, Canvas fallback
카메라 각도 조절 UI (슬라이더)
조명: 탑다운 방향 라이팅
재질 옵션 (플랫, 광택, 매탈릭 등)
참조: TetrisGame.js, JanggiGame.js

// 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);
}

5. 게임 AI (LLM 연동)

AI 로직은 별도 파일로 분리 (예: JanggiAI.js)
LLM API 호출: https://mcp.webnori.com/api/llm/chat/completions
현재 게임 상황을 좌표/텍스트로 변환하여 프롬프트에 포함
코드 기반 가드레일 필수 (유효 수 검증)
LLM 실패시 Fallback AI 구현
전략 프롬프트를 사용자가 조정 가능하게 분리

6. 게임 상태 관리

세션 기반 저장 (멀티 윈도우 지원)
전역 설정 사용 금지 (윈도우별 독립 상태)
게임 히스토리 로컬 스토리지 저장
게임 복기/분석 기능 고려

7. 사운드/이펙트

3D 입체음향: Web Audio API
이동 애니메이션: 포물선 궤적 (3D 게임)
타격감: 사운드 + 시각 효과 조합
상태 전환 이펙트 (승리, 패배, 장군 등)

게임 유형별 참조

게임 유형	참조 파일	핵심 패턴
카드 게임	SolitaireGame.js	드래그앤드롭, 카드 스택 관리
보드 게임 (2D)	MinesweeperGame.js	격자 기반, 좌/우클릭, 난이도
3D 액션	TetrisGame.js	Three.js, 키보드 입력, 스테이지
3D + AI	JanggiGame.js + JanggiAI.js	Three.js, LLM 대전, 포물선 이동

Application.js 등록

deskweb-app 스킬의 등록 절차와 동일 (아이콘, 시작메뉴, 창 열기 메서드)

빌드/테스트

cd deskweb && qx compile               # 소스 컴파일
qx serve --listen-port=8080            # 개발 서버 실행
# 접속: http://localhost:8080/deskweb/

المزيد من هذا المستودع

نفس المستودع

deskweb-app

psmon/DeskWeb

DeskWeb 일반 애플리케이션 생성 스킬. qooxdoo 프레임워크 기반 윈도우 앱(메모장, 엑셀, HWP뷰어, iframe앱 등)을 추가할 때 사용. 사용 사례: (1) 새로운 윈도우 앱 추가시, (2) 파일 연동 앱 구현시, (3) 외부 라이브러리 통합 앱 구현시, (4) iframe 기반 외부 URL 앱 추가시.

2026-07-243

deskweb-convention

psmon/DeskWeb

DeskWeb 프로젝트 컨벤션 및 공통 패턴 스킬. 프로젝트 구조, 빌드, 테스트, 스토리지, 테마, 아이콘 관리 등 공통 규칙 참조시 사용. 사용 사례: (1) 프로젝트 구조/컨벤션 확인시, (2) 빌드/배포 절차시, (3) 스토리지/세션 관리시, (4) 아이콘/테마 커스텀시, (5) 바탕화면 기능 추가시.

2026-07-243

deskweb-llm

psmon/DeskWeb

DeskWeb LLM/AI 통합 스킬. 브라우저 내 WebLLM 또는 외부 LLM API를 활용하는 기능 구현시 사용. 사용 사례: (1) 챗봇 앱에 LLM 연동시, (2) 게임 AI에 LLM 프롬프트 설계시, (3) AI-OS 기능(앱 제어, 자동화)시, (4) WebLLM 브라우저 내 모델 로드시, (5) 스트리밍 응답 구현시.

2026-07-243

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 게임 애플리케이션 생성 스킬

프로젝트 컨텍스트

DeskWeb은 qooxdoo v7.9 기반 Windows XP 스타일 웹 데스크톱
소스 경로: deskweb/source/class/deskweb/
프로젝트 가이드: prompt/deskweb/agent.md

Instructions

1. 파일 구조 (UI/로직 분리 필수)

deskweb/source/class/deskweb/
├── ui/NewGameWindow.js      # UI 윈도우 (qooxdoo 위젯)
├── game/NewGameGame.js       # 게임 로직 (렌더링, 규칙)
└── game/NewGameAI.js         # AI 로직 (선택, LLM 활용시)

2. 게임 윈도우 (UI Layer)

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() {
      // 툴바 (난이도, 새 게임 등)
      // 게임 캔버스 영역
      // 상태바 (점수, 타이머 등)
    }
  }
});

3. Canvas 기반 게임 (2D)

qooxdoo 위젯 내에 qx.ui.embed.Html로 Canvas 삽입
마우스 이벤트: pointerdown, pointerup, contextmenu (우클릭)
게임 루프: requestAnimationFrame 또는 qx.event.Timer
참조: SolitaireGame.js, MinesweeperGame.js

// 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);

4. Three.js 기반 게임 (3D)

Three.js CDN 또는 번들 로드
WebGL 렌더러 기본, Canvas fallback
카메라 각도 조절 UI (슬라이더)
조명: 탑다운 방향 라이팅
재질 옵션 (플랫, 광택, 매탈릭 등)
참조: TetrisGame.js, JanggiGame.js

// 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);
}

5. 게임 AI (LLM 연동)

AI 로직은 별도 파일로 분리 (예: JanggiAI.js)
LLM API 호출: https://mcp.webnori.com/api/llm/chat/completions
현재 게임 상황을 좌표/텍스트로 변환하여 프롬프트에 포함
코드 기반 가드레일 필수 (유효 수 검증)
LLM 실패시 Fallback AI 구현
전략 프롬프트를 사용자가 조정 가능하게 분리

6. 게임 상태 관리

세션 기반 저장 (멀티 윈도우 지원)
전역 설정 사용 금지 (윈도우별 독립 상태)
게임 히스토리 로컬 스토리지 저장
게임 복기/분석 기능 고려

7. 사운드/이펙트

3D 입체음향: Web Audio API
이동 애니메이션: 포물선 궤적 (3D 게임)
타격감: 사운드 + 시각 효과 조합
상태 전환 이펙트 (승리, 패배, 장군 등)

게임 유형별 참조

게임 유형	참조 파일	핵심 패턴
카드 게임	SolitaireGame.js	드래그앤드롭, 카드 스택 관리
보드 게임 (2D)	MinesweeperGame.js	격자 기반, 좌/우클릭, 난이도
3D 액션	TetrisGame.js	Three.js, 키보드 입력, 스테이지
3D + AI	JanggiGame.js + JanggiAI.js	Three.js, LLM 대전, 포물선 이동

Application.js 등록

deskweb-app 스킬의 등록 절차와 동일 (아이콘, 시작메뉴, 창 열기 메서드)

빌드/테스트

cd deskweb && qx compile               # 소스 컴파일
qx serve --listen-port=8080            # 개발 서버 실행
# 접속: http://localhost:8080/deskweb/