Chapter 6 - Hero

Readme.md

@@ -4,7 +4,7 @@ This mini-game is designed for educational purposes as part of the interactive b
 
 The source code for the book can be found on [GitHub](https://github.com/Perky-Crow/undead).
 
-At this point in the book, you should be on [Chapter V: Infinite World](http://undeadjs.com/a-javascript-odyssey/infinite-world).
+At this point in the book, you should be on [Chapter VI: Hero](http://undeadjs.com/a-javascript-odyssey/hero).
 
 
 

scripts/hero.js

@@ -0,0 +1,50 @@
+export default class Hero {
+
+    constructor () {
+        this.x      = 0
+        this.y      = 2.5
+        this.width  = 1
+        this.height = 1
+
+        this.frames     = ['hero1', 'hero2', 'hero3', 'hero4']
+        this.frameIndex = 0
+        this.frameTime  = 0
+        this.frameSpeed = 0.2
+
+        this.gravity   = 35
+        this.jumpForce = -9
+        this.velocityY = 0
+        this.groundY   = 2.5
+    }
+
+    get sprite () {
+        return this.frames[this.frameIndex]
+    }
+
+    jump () {
+        if (this.y === this.groundY) {
+            this.velocityY = this.jumpForce
+        }
+    }
+
+    update (deltaTime, camera) {
+        this.x = camera.x + 0.5
+        this.frameTime += deltaTime
+
+        const nextFrameTime = this.frameSpeed / camera.speed
+
+        if (this.frameTime > nextFrameTime) {
+            this.frameTime = 0
+            this.frameIndex = (this.frameIndex + 1) % this.frames.length
+        }
+
+        this.y += this.velocityY * deltaTime
+        this.velocityY += this.gravity * deltaTime
+
+        if (this.y > this.groundY) {
+            this.y = this.groundY
+            this.velocityY = 0
+        }
+    }
+
+}

scripts/scene.js

@@ -1,5 +1,7 @@
+import Hero from './hero.js'
 import {floatBetween, randomPick} from './utils.js'
 
+
 export default class Scene {
 
     constructor () {
@@ -18,6 +20,8 @@ export default class Scene {
             height: 4,
             speed: 2
         }
+
+        this.hero = new Hero()
     }
 
     add (type, object) {
@@ -114,6 +118,7 @@ export default class Scene {
 
     update (deltaTime) {
         this.camera.x += this.camera.speed * deltaTime
+        this.hero.update(deltaTime, this.camera)
         this.generateWorld()
     }
 

scripts/toy.js

@@ -1,6 +1,6 @@
 
 import imagePaths from './image_paths.js'
-import {loadImages, setScale, drawScene, startAnimationLoop, clearCanvas, drawGrid} from './utils.js'
+import {loadImages, setScale, drawScene, startAnimationLoop, clearCanvas} from './utils.js'
 import Scene from './scene.js'
 
 
@@ -15,12 +15,14 @@ async function init () {
 
     startAnimationLoop(function (deltaTime) {
         clearCanvas(ctx, scene.camera)
-
-        drawGrid(ctx, scene.camera)
+
         scene.update(deltaTime)
         drawScene(ctx, scene, images)
     })
 
+    canvas.addEventListener('pointerdown', () => {
+        scene.hero.jump()
+    })
 }
 
 

scripts/utils.js

@@ -73,8 +73,23 @@ export function drawScene (ctx, scene, images) {
             drawImage(ctx, drawParams)
         })
     }
+
+    drawHero(ctx, scene, images)
 }
 
+function drawHero (ctx, scene, images) {
+    const hero = scene.hero
+
+    const drawParams = {
+        x:      hero.x - scene.camera.x,
+        y:      hero.y - scene.camera.y,
+        width:  hero.width,
+        height: hero.height,
+        image:  images[hero.sprite]
+    }
+
+    drawImage(ctx, drawParams)
+}
 
 export function startAnimationLoop (callback) {
     let lastTime = 0