feat: improve game init function

index.html

@@ -59,8 +59,8 @@ <h1 class="title mobile">Code Arcade</h1>
     </main>
 
     <script type="module">
-      import { initKaboom } from './src/helpers'
-      initKaboom()
+      import { initGame } from './src/helpers'
+      initGame()
     </script>
 
     <script type="module" src="src/index.ts"></script>

src/helpers/kaboom.ts → 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()
 }

src/helpers/index.ts

@@ -1,4 +1,4 @@
 export * from './cursors'
 export * from './editor'
-export * from './kaboom'
+export * from './game'
 export * from './level'

src/helpers/level.ts

@@ -9,5 +9,7 @@ const titles = document.querySelectorAll(
 ) as NodeListOf<HTMLHeadingElement>
 
 export function renderLevel(level: Level) {
-  titles.forEach((title) => (title.innerText = level.title))
+  titles.forEach(
+    (title) => (title.innerText = `Level ${level.level}: ${level.title}`),
+  )
 }

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

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 = `

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<HTMLButtonElement>
 
-  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)
+    })
+  })
+}

src/scenes/index.ts

@@ -1 +1 @@
-import './game'
+export * from './game'

src/types/index.ts

@@ -1,2 +1,3 @@
 export * from './level'
 export * from './scene'
+export * from './sprite'

src/types/level.ts

@@ -1,4 +1,5 @@
 export interface Level {
+  level: number
   title: string
   prescript: () => void
   script: string

src/types/sprite.ts

@@ -0,0 +1,4 @@
+export enum Sprite {
+  exit = 'exit',
+  player = 'player',
+}