refactor for organization/clarity

nathanaltice · Nov 5, 2023 · 6a831e4 · 6a831e4
1 parent 3203389
commit 6a831e4
Show file tree

Hide file tree

Showing 8 changed files with 114,583 additions and 39 deletions.
diff --git a/defs/phaser.d.ts b/defs/phaser.d.ts
diff --git a/index.html b/index.html
@@ -5,9 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>FSM</title>
     <script src="./lib/phaser.js"></script>
+    <script src="./src/scenes/Load.js"></script>
     <script src="./lib/StateMachine.js"></script>
     <script src="./src/prefabs/Hero.js"></script>
-    <script src="./src/scenes/CharacterFSM.js"></script>
+    <script src="./src/scenes/Play.js"></script>
     <script src="./src/main.js"></script>
 </head>
 <body>

diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1 @@
+{}
diff --git a/lib/StateMachine.js b/lib/StateMachine.js
@@ -39,9 +39,9 @@ class StateMachine {
 // parent class structure for all `State` subclasses
 class State {
     enter() {
-        // what happens when we enter the state
+        // this code happens *once* when we enter the state
     }
     execute() {
-        // what happens on each execute step
+        // this code happens each update step (ie every frame)
     }
 }
diff --git a/src/main.js b/src/main.js
@@ -21,7 +21,7 @@ const config = {
             debug: true
         }
     },
-    scene: [ CharacterFSM ]
+    scene: [ Load, Play ]
 }
 
 const game = new Phaser.Game(config)
diff --git a/src/prefabs/Hero.js b/src/prefabs/Hero.js
@@ -13,6 +13,15 @@ class Hero extends Phaser.Physics.Arcade.Sprite {
         this.heroVelocity = 100    // in pixels
         this.dashCooldown = 300    // in ms
         this.hurtTimer = 250       // in ms
+
+        // initialize state machine managing hero (initial state, possible states, state args[])
+        scene.heroFSM = new StateMachine('idle', {
+            idle: new IdleState(),
+            move: new MoveState(),
+            swing: new SwingState(),
+            dash: new DashState(),
+            hurt: new HurtState(),
+        }, [scene, this])   // pass these as arguments to maintain scene/object context in the FSM
     }
 }
 

diff --git a/src/scenes/CharacterFSM.js → src/scenes/Load.js b/src/scenes/CharacterFSM.js → src/scenes/Load.js
@@ -1,6 +1,6 @@
-class CharacterFSM extends Phaser.Scene {
+class Load extends Phaser.Scene {
     constructor() {
-        super("characterFSMScene")
+        super('loadScene')
     }
 
     preload() {
@@ -13,21 +13,6 @@ class CharacterFSM extends Phaser.Scene {
     }
 
     create() {
-        // change background color
-        this.cameras.main.setBackgroundColor('#FACADE')
-
-        // add new Hero to scene (scene, x, y, key, frame, direction)
-        this.hero = new Hero(this, 200, 150, 'hero', 0, 'down')
-
-        // initialize state machine managing hero (initial state, possible states, state args[])
-        this.heroFSM = new StateMachine('idle', {
-            idle: new IdleState(),
-            move: new MoveState(),
-            swing: new SwingState(),
-            dash: new DashState(),
-            hurt: new HurtState(),
-        }, [this, this.hero])   // we pass in `this` and `this.hero` so we can maintain scene/object context in the FSM
-
         // hero animations (walking)
         this.anims.create({
             key: 'walk-down',
@@ -80,23 +65,7 @@ class CharacterFSM extends Phaser.Scene {
             frames: this.anims.generateFrameNumbers('hero', { start: 28, end: 31 }),
         })
 
-        // setup keyboard input
-        this.keys = this.input.keyboard.createCursorKeys()
-        this.keys.HKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.H)
-
-        // debug key listener (assigned to D key)
-        this.input.keyboard.on('keydown-D', function() {
-            console.log('d key')
-            this.physics.world.drawDebug = this.physics.world.drawDebug ? false : true
-            this.physics.world.debugGraphic.clear()
-        }, this)
-
-        // update instruction text
-        document.getElementById('info').innerHTML = '<strong>CharacterFSM.js:</strong> Arrows: move | SPACE: attack | SHIFT: dash attack | H: hurt (knockback) | D: debug (toggle)'
-    }
-
-    update() {
-        // make sure we step (ie update) the hero's state machine
-        this.heroFSM.step()
+        // proceed once loading completes
+        this.scene.start('playScene')
     }
 }
diff --git a/src/scenes/Play.js b/src/scenes/Play.js
@@ -0,0 +1,31 @@
+class Play extends Phaser.Scene {
+    constructor() {
+        super("playScene")
+    }
+
+    create() {
+        // change background color
+        this.cameras.main.setBackgroundColor('#FACADE')
+
+        // add new Hero to scene (scene, x, y, key, frame, direction)
+        this.hero = new Hero(this, 200, 150, 'hero', 0, 'down')
+
+        // setup keyboard input
+        this.keys = this.input.keyboard.createCursorKeys()
+        this.keys.HKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.H)
+
+        // debug key listener (assigned to D key)
+        this.input.keyboard.on('keydown-D', function() {
+            this.physics.world.drawDebug = this.physics.world.drawDebug ? false : true
+            this.physics.world.debugGraphic.clear()
+        }, this)
+
+        // update instruction text
+        document.getElementById('info').innerHTML = '<strong>CharacterFSM.js:</strong> Arrows: move | SPACE: attack | SHIFT: dash attack | H: hurt (knockback) | D: debug (toggle)'
+    }
+
+    update() {
+        // make sure we step (ie update) the hero's state machine
+        this.heroFSM.step()
+    }
+}