@jonsoku2/game-sdk
v1.0.0
Published
Canvas-based 2D game development SDK with AI integration
Maintainers
jonsoku2Readme
@jonsoku2/game-sdk
Canvas-based 2D game development SDK with AI integration for creating browser games.
Features
- 🎮 Canvas 2D Rendering - High-performance game rendering engine
- 🤖 AI Integration - AI-powered game generation and templates
- 📱 Mobile Optimized - Touch controls and responsive design
- 🎯 Game Templates - Pre-built templates for Action, Puzzle, Casual, and Strategy games
- ⚡ TypeScript Support - Full type safety and IntelliSense
- 🔄 Lifecycle Management - Complete game state management
Installation
NPM
npm install @jonsoku2/game-sdkCDN
<!-- jsDelivr (recommended) -->
<script src="https://cdn.jsdelivr.net/npm/@jonsoku2/game-sdk@latest/index.mjs" type="module"></script>
<!-- unpkg -->
<script src="https://unpkg.com/@jonsoku2/game-sdk@latest/index.mjs" type="module"></script>Quick Start
Basic Usage
import { GameSDK, ActionGame } from '@jonsoku2/game-sdk';
// Create canvas element
const canvas = document.createElement('canvas');
canvas.width = 800;
canvas.height = 600;
document.body.appendChild(canvas);
// Initialize GameSDK
const gameSDK = new GameSDK(canvas);
// Create and start a game
const gameConfig = {
category: 'action',
name: 'My Action Game',
world: { width: 800, height: 600, gravity: 0.5 },
player: { x: 100, y: 500, speed: 5, jumpForce: 12 }
};
const game = new ActionGame(gameConfig);
await game.initialize();
gameSDK.start();Using with HTML
<!DOCTYPE html>
<html>
<head>
<title>My Game</title>
</head>
<body>
<canvas id="game-canvas" width="800" height="600"></canvas>
<script type="module">
import { GameSDK, ActionGame } from 'https://cdn.jsdelivr.net/npm/@jonsoku2/game-sdk@latest/index.mjs';
const canvas = document.getElementById('game-canvas');
const gameSDK = new GameSDK(canvas);
const gameConfig = {
category: 'action',
name: 'Browser Game',
world: { width: 800, height: 600 },
player: { x: 100, y: 500, speed: 5 }
};
const game = new ActionGame(gameConfig);
game.initialize().then(() => {
gameSDK.start();
});
</script>
</body>
</html>Game Templates
Action Games
import { ActionGame } from '@jonsoku2/game-sdk';
const config = {
category: 'action',
name: 'Platformer Game',
world: { width: 800, height: 600, gravity: 0.5, friction: 0.85 },
player: { x: 100, y: 500, width: 32, height: 32, speed: 5, jumpForce: 12 },
enemies: [{ type: 'walker', speed: 2, health: 50 }],
weapons: [{ type: 'bullet', damage: 25, speed: 8 }]
};Puzzle Games
import { PuzzleGame } from '@jonsoku2/game-sdk';
const config = {
category: 'puzzle',
name: 'Match-3 Game',
grid: { width: 8, height: 8, cellSize: 40 },
pieces: { colors: ['#ff0000', '#00ff00', '#0000ff'], minMatchLength: 3 },
gameRules: { targetScore: 1000, timeLimit: 180 }
};API Reference
GameSDK
Main SDK class for managing the game lifecycle.
class GameSDK {
constructor(canvas: HTMLCanvasElement)
start(): void
pause(): void
resume(): void
stop(): void
getRenderer(): Canvas2DRenderer
}Game Templates
ActionGame- Platform, shooter, and action gamesPuzzleGame- Match-3, tetris, and puzzle gamesCasualGame- Clicker, collector, and casual gamesStrategyGame- Turn-based and strategy games
AI Integration
The SDK includes AI-powered game generation capabilities:
import { GameSDKGenerator } from '@jonsoku2/game-sdk';
const generator = new GameSDKGenerator({
model: yourLangChainModel,
includeBundledSDK: false,
optimizeForMobile: true
});
const gameResponse = await generator.generateGame({
category: 'action',
prompt: 'Create a space shooter game',
difficulty: 'medium',
graphics: 'retro'
});Browser Support
- ✅ Chrome 90+
- ✅ Firefox 88+
- ✅ Safari 14+
- ✅ Edge 90+
Performance
- Bundle Size: ~170KB (39KB gzipped)
- Target FPS: 60 FPS
- Mobile Optimized: Touch controls and responsive canvas
Contributing
This SDK is part of the GameFlow Platform. For contributions, please see the main repository.
License
MIT License - see LICENSE file for details.