feat(scenes): add tutorial

src/constants/scene.ts

@@ -3,4 +3,5 @@ export enum Scene {
   Lose = 'Lose',
   Preload = 'Preload',
   Title = 'Title',
+  Tutorial = 'Tutorial',
 }

src/scenes/index.ts

@@ -2,6 +2,7 @@ import './game'
 import './lose'
 import './preload'
 import './title'
+import './tutorial'
 
 import { Scene } from '../constants'
 

src/scenes/title.ts

@@ -3,11 +3,11 @@ import { addButton } from '../gameobjects'
 
 scene(Scene.Title, () => {
   const { x, y } = center()
-  const margin = 100
+  const buttonHeight = 80
 
   const textbox = add([
     rect(400, 100),
-    pos(x, y - margin),
+    pos(x, y - buttonHeight * 2),
     anchor('center'),
     color(255, 255, 255),
   ])
@@ -20,14 +20,27 @@ scene(Scene.Title, () => {
 
   addButton({
     width: 220,
-    height: 80,
+    height: buttonHeight,
     radius: 8,
     x,
-    y: y + margin,
+    y: y + buttonHeight,
     text: 'Play',
     onClick() {
       play(Sound.Hit)
       go(Scene.Game)
     },
   })
+
+  addButton({
+    width: 220,
+    height: buttonHeight,
+    radius: 8,
+    x,
+    y: y + buttonHeight * 2 + 20,
+    text: 'Tutorial',
+    onClick() {
+      play(Sound.Hit)
+      go(Scene.Tutorial)
+    },
+  })
 })

src/scenes/tutorial.ts

@@ -0,0 +1,35 @@
+import { Scene, Sound } from '../constants'
+import { addPlayer } from '../gameobjects'
+import { addButton } from '../gameobjects'
+
+scene(Scene.Tutorial, () => {
+  const { x } = center()
+
+  const textbox = add([
+    rect(600, 100),
+    pos(x, 80),
+    anchor('center'),
+    color(255, 255, 255),
+  ])
+
+  textbox.add([
+    text('WASD or arrow keys to move\nLeft click to shoot'),
+    anchor('center'),
+    color(0, 0, 0),
+  ])
+
+  addPlayer()
+
+  addButton({
+    width: 220,
+    height: 80,
+    radius: 8,
+    x,
+    y: height() - 80,
+    text: 'Play',
+    onClick() {
+      play(Sound.Hit)
+      go(Scene.Game)
+    },
+  })
+})