From 80306f783501e44ae8774b0fde7d0cc36d179973 Mon Sep 17 00:00:00 2001 From: Mark Date: Sun, 26 May 2024 15:37:42 -0400 Subject: [PATCH] feat: improve game init function --- index.html | 4 +-- src/helpers/{kaboom.ts => game.ts} | 6 +++- src/helpers/index.ts | 2 +- src/helpers/level.ts | 4 ++- src/index.ts | 4 ++- src/levels/0.ts | 18 +++++++--- src/scenes/game.ts | 53 +++++++++++++++++------------- src/scenes/index.ts | 2 +- src/types/index.ts | 1 + src/types/level.ts | 1 + src/types/sprite.ts | 4 +++ 11 files changed, 66 insertions(+), 33 deletions(-) rename src/helpers/{kaboom.ts => game.ts} (58%) create mode 100644 src/types/sprite.ts diff --git a/index.html b/index.html index 73ea85b..4e30760 100644 --- a/index.html +++ b/index.html @@ -59,8 +59,8 @@

Code Arcade

diff --git a/src/helpers/kaboom.ts b/src/helpers/game.ts similarity index 58% rename from src/helpers/kaboom.ts rename to src/helpers/game.ts index a0e7ba1..e3d6fc9 100644 --- a/src/helpers/kaboom.ts +++ b/src/helpers/game.ts @@ -1,9 +1,13 @@ import kaboom from 'kaboom' -export function initKaboom() { +import { initGameScene } from '../scenes' + +export function initGame() { kaboom({ width: 600, height: 600, canvas: document.querySelector('canvas')!, }) + + initGameScene() } diff --git a/src/helpers/index.ts b/src/helpers/index.ts index 65049bf..21bbd43 100644 --- a/src/helpers/index.ts +++ b/src/helpers/index.ts @@ -1,4 +1,4 @@ export * from './cursors' export * from './editor' -export * from './kaboom' +export * from './game' export * from './level' diff --git a/src/helpers/level.ts b/src/helpers/level.ts index 9905c12..3737748 100644 --- a/src/helpers/level.ts +++ b/src/helpers/level.ts @@ -9,5 +9,7 @@ const titles = document.querySelectorAll( ) as NodeListOf export function renderLevel(level: Level) { - titles.forEach((title) => (title.innerText = level.title)) + titles.forEach( + (title) => (title.innerText = `Level ${level.level}: ${level.title}`), + ) } diff --git a/src/index.ts b/src/index.ts index dda3b90..4f4f51f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,9 +1,11 @@ import './style.css' import './scenes' +import { Scene } from './types' + const level = Number(new URLSearchParams(location.search).get('level')) || 0 -go('game', level) +go(Scene.game, level) // press F1 // debug.inspect = true diff --git a/src/levels/0.ts b/src/levels/0.ts index d947916..6b592ec 100644 --- a/src/levels/0.ts +++ b/src/levels/0.ts @@ -1,11 +1,21 @@ import { addCursorKeys } from '../helpers' +import { Scene, Sprite } from '../types' -export const title = 'Level 0: Hello, World!' +export const level = 0 +export const title = 'Hello, World!' export function prescript() { - loadSprite('player', 'sprites/bean.png') - const player = add([sprite('player'), pos(80, 40), area()]) - addCursorKeys(player) + loadSprite(Sprite.player, 'sprites/bean.png') + loadSprite(Sprite.exit, 'sprites/door.png') + + addCursorKeys( + add([sprite(Sprite.player), pos(50, 50), area(), Sprite.player]), + ) + add([sprite(Sprite.exit), pos(500, 500), area(), Sprite.exit]) + + onCollide(Sprite.player, Sprite.exit, () => { + go(Scene.game, level) + }) } export const script = ` diff --git a/src/scenes/game.ts b/src/scenes/game.ts index a846cab..abb7f25 100644 --- a/src/scenes/game.ts +++ b/src/scenes/game.ts @@ -1,28 +1,37 @@ -import { editorView, getLevel, initKaboom, renderLevel } from '../helpers' +import { editorView, getLevel, initGame, renderLevel } from '../helpers' +import { Scene } from '../types' -const buttons = document.querySelectorAll('.run') +export function initGameScene() { + scene(Scene.game, async (currentLevel: number) => { + const level = await getLevel(currentLevel) + renderLevel(level) -scene('game', async (currentLevel: number) => { - const level = await getLevel(currentLevel) - renderLevel(level) + editorView.dispatch({ + changes: { + from: 0, + to: editorView.state.doc.length, + insert: level.script.trim(), + }, + }) - editorView.dispatch({ - changes: { - from: 0, - to: editorView.state.doc.length, - insert: level.script.trim(), - }, - }) + function run() { + initGame() + level.prescript() + const script = editorView.state.doc.toString() + eval(script) + level.postscript() + } - function run() { - initKaboom() - level.prescript() - const script = editorView.state.doc.toString() - eval(script) - level.postscript() - } + run() - run() + const buttons = document.querySelectorAll( + '.run', + ) as NodeListOf - buttons.forEach((button) => button.addEventListener('click', run)) -}) + buttons.forEach((oldButton) => { + const newButton = oldButton.cloneNode(true) as HTMLButtonElement + newButton.addEventListener('click', run) + oldButton.parentNode?.replaceChild(newButton, oldButton) + }) + }) +} diff --git a/src/scenes/index.ts b/src/scenes/index.ts index 1fa8286..252d9cd 100644 --- a/src/scenes/index.ts +++ b/src/scenes/index.ts @@ -1 +1 @@ -import './game' +export * from './game' diff --git a/src/types/index.ts b/src/types/index.ts index 12ffbb6..c7b1361 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,2 +1,3 @@ export * from './level' export * from './scene' +export * from './sprite' diff --git a/src/types/level.ts b/src/types/level.ts index 9076d97..54820c5 100644 --- a/src/types/level.ts +++ b/src/types/level.ts @@ -1,4 +1,5 @@ export interface Level { + level: number title: string prescript: () => void script: string diff --git a/src/types/sprite.ts b/src/types/sprite.ts new file mode 100644 index 0000000..f841920 --- /dev/null +++ b/src/types/sprite.ts @@ -0,0 +1,4 @@ +export enum Sprite { + exit = 'exit', + player = 'player', +}