add animations for lumberjack

index.html

@@ -12,9 +12,13 @@
         font-weight: 700;
         text-align: center;
         font-size: 26px;
+        color: #58a4b0;
+
       }
       canvas {
         margin: 0 auto;
+        width: 960px;
+        height: 600px;
       }
       button {
         min-width: 200px;
@@ -45,7 +49,6 @@
         background: -webkit-linear-gradient(top,  #c7efcf 0%,#eef5db 100%); /* Chrome10-25,Safari5.1-6 */
         background: linear-gradient(to bottom,  #c7efcf 0%,#eef5db 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
         filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c7efcf', endColorstr='#eef5db',GradientType=0 ); /* IE6-9 */
-        color: #58a4b0;
         display: -webkit-flex;
         display: -moz-flex;
         display: -ms-flex;
@@ -67,4 +70,5 @@ <h1>Newbie God</h1>
         </div>
       </div>
     </div>
+    <p>ARROWS: MOVE &nbsp;&nbsp;–&nbsp;&nbsp; W: WRATH OF GOD &nbsp;&nbsp;–&nbsp;&nbsp; SPACEBAR: INTERACT</p>
 </body>

js/playState/characters/lumberjack.js

@@ -3,6 +3,10 @@ function Lumberjack (game, x, y) {
   Phaser.Sprite.call(this, game, x, y, 'lumberjack')
   this.anchor.set(0.5, 0.5)
 
+  this.animations.add('stop', [0]);
+  this.animations.add('go', [1]);
+  this.animations.add('fishing', [2]);
+
   this.game.physics.enable(this)
   this.body.collideWorldBounds = true
 }
@@ -12,8 +16,15 @@ Lumberjack.prototype = Object.create(Phaser.Sprite.prototype)
 Lumberjack.prototype.constructor = Lumberjack
 
 Lumberjack.prototype.goFish = function (direction) {
-  this.isHappy = true
-  this.game.add.tween(this).to({ x: '-150' }, 1500, Phaser.Easing.Elastic.InOut, true)
+  this.animations.play('go');
+
+  const tween = this.game.add.tween(this).to({ x: '-160' }, 1500, Phaser.Easing.Elastic.InOut, true)
+
+  tween.onComplete.add(() => {
+    this.animations.play('fishing');
+    this.isHappy = true
+  })
+
 }
 
 module.exports = Lumberjack

js/playState/methods.js

@@ -55,20 +55,20 @@ PlayState._handleCollisions = function () {
 
   // surrounding characters areas
   this.game.physics.arcade.overlap(this.god, this.sinnerArea, () => {
-    if (!this.sinner.isDead) {
+    if (!this.sinner.isDead && !this.sinner.isHappy) {
       this.sinnerText.visible = true
     }
   })
 
   this.game.physics.arcade.overlap(this.god, this.lumberjackArea, () => {
-    if (!this.lumberjack.isDead) {
+    if (!this.lumberjack.isDead && !this.lumberjack.isHappy) {
       this.lumberjackText.visible = true
     }
   })
 
   // bullets
   this.game.physics.arcade.collide(this.wrath.bullets, this.lumberjack, this.onBulletVsCharacter, null, this)
-  this.game.physics.arcade.collide(this.wrath.bullets, this.cat, this.onBulletVsCharacter, null, this)
+  // this.game.physics.arcade.collide(this.wrath.bullets, this.cat, this.onBulletVsCharacter, null, this)
   this.game.physics.arcade.collide(this.wrath.bullets, this.sinner, this.onBulletVsCharacter, null, this)
 
   // melt snow

js/playState/preload.js

@@ -1,6 +1,5 @@
 const preload = function () {
   this.game.load.image('background', 'assets/images/background.png')
-  this.game.load.image('lumberjack', 'assets/images/lumberjack.png')
   this.game.load.image('sinner', 'assets/images/sinner.png')
   this.game.load.image('interactArea', 'assets/images/interactArea.png')
   this.game.load.image('bullet', 'assets/images/bullet.png')
@@ -19,6 +18,7 @@ const preload = function () {
   this.game.load.audio('sfx:wrath', 'assets/sound/wrath.wav')
 
   this.game.load.spritesheet('god', 'assets/images/god.png', 99, 168)
+  this.game.load.spritesheet('lumberjack', 'assets/images/lumberjack.png', 72, 123)
 }
 
 module.exports = preload

js/playState/update.js

@@ -5,15 +5,21 @@ module.exports = function () {
   this._handleInput()
 
   if (this.lumberjack.isDead && this.sinner.isDead) {
-    this.game.state.start('end', false, false, 'evil')
+    setTimeout(() => {
+      this.game.state.start('end', false, false, 'evil')
+    }, 1000)
   }
 
   if (this.lumberjack.isHappy && this.sinner.isHappy) {
-    this.game.state.start('end', false, false, 'awesome')
+    setTimeout(() => {
+      this.game.state.start('end', false, false, 'awesome')
+    }, 1000)
   }
 
   if ((this.lumberjack.isHappy && this.sinner.isDead) ||
      (this.lumberjack.isDead && this.sinner.isHappy)) {
-    this.game.state.start('end', false, false, 'regular')
+       setTimeout(() => {
+         this.game.state.start('end', false, false, 'regular')
+       }, 1000)
   }
 }