canvas-game-publishinglisted

# Canvas Game Publishing — Multi-Platform Guide ## Architecture: Platform Adapter Pattern The key to cross-platform Canvas games is a **Platform abstraction layer**. The game core NEVER references platform-specific APIs directly — it only calls `Platform.*` methods. ### Platform Interface Define a `Platform` object with these essential methods: ```js const Platform = { name: 'browser', // 'browser' | 'wechat' | 'douyin' | 'fbinstant' createCanvas(id), // create or get the canvas element getContext(canvas, type), // get 2d/webgl context getScreenWidth(), getScreenHeight(), isTouchDevice(), canvasToLogical(canvas, cx, cy), // convert screen coords to logical coords onKeyDown(cb), onTouchStart(canvas, cb), onTouchMove(canvas, cb), onTouchEnd(canvas, cb), onResize(cb), getMousePos(e), getTouch(e), getTouches(e), preventDefault(e), createAudioContext(), getItem(key), // persistent storage read setItem(key, val),// persistent storage write requestAnimationFrame(cb), }; ``` ### Porting Flow 1. Write game core using ONLY `Platform.*` calls (60+% of the work is here) 2. For each new platform, write a thin `game.js` adapter that defines `Platform` 3. The adapter loads `game-core.js` after setting up `globalThis.Platform` ## Platform-Specific Requirements ### Web Browser - **Where to deploy**: Vercel, Netlify, Cloudflare Pages (free), or any static server - **Entry point**: `index.html` with `<canvas id="game">`