Chapter 3

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 II: The Canvas](http://localhost:3000/a-javascript-odyssey/the-canvas).
+At this point in the book, you should be on [Chapter III: The Canvas](http://undeadjs.com/a-javascript-odyssey/painting-a-scene).
 
 
 

scripts/image_paths.js

@@ -0,0 +1,36 @@
+const imagePaths = {
+    hero1:     'images/hero_run_01.png',
+    hero2:     'images/hero_run_02.png',
+    hero3:     'images/hero_run_03.png',
+    hero4:     'images/hero_run_04.png',
+    floor1:    'images/floor_01.png',
+    floor2:    'images/floor_02.png',
+    floor3:    'images/floor_03.png',
+    floor4:    'images/floor_04.png',
+    floor5:    'images/floor_05.png',
+    floor6:    'images/floor_06.png',
+    tree1:     'images/tree_01.png',
+    tree2:     'images/tree_02.png',
+    tree3:     'images/tree_03.png',
+    tree4:     'images/tree_04.png',
+    tree5:     'images/tree_05.png',
+    grass1:    'images/grass_01.png',
+    grass2:    'images/grass_02.png',
+    grass3:    'images/grass_03.png',
+    rocks1:    'images/rocks_01.png',
+    mountain1: 'images/mountain_01.png',
+    mountain2: 'images/mountain_02.png',
+    mountain3: 'images/mountain_03.png',
+    mountain4: 'images/mountain_04.png',
+    mountain5: 'images/mountain_05.png',
+    mountain6: 'images/mountain_06.png',
+    tech1:     'images/tech_01.png',
+    tech2:     'images/tech_02.png',
+    tech3:     'images/tech_03.png',
+    tech4:     'images/tech_04.png',
+    tech5:     'images/tech_05.png',
+    tech6:     'images/tech_06.png',
+    tech7:     'images/tech_07.png'
+}
+
+export default imagePaths

scripts/scene.js

@@ -0,0 +1,11 @@
+export default class Scene {
+
+    constructor () {
+        this.elements = []
+    }
+
+    add (object) {
+        this.elements.push(object)
+    }
+
+}

scripts/toy.js

@@ -1,5 +1,7 @@
 
-import {loadImage, drawImage, drawGrid, setScale} from './utils.js'
+import imagePaths from './image_paths.js'
+import {loadImages, drawGrid, setScale, drawScene} from './utils.js'
+import Scene from './scene.js'
 
 
 async function init () {
@@ -9,14 +11,180 @@ async function init () {
     setScale(ctx, 100)
     drawGrid(ctx)
 
-    const heroImage = await loadImage('images/hero_run_01.png')
-    drawImage(ctx, {
+    const images = await loadImages(imagePaths)
+    const scene = new Scene()
+
+    scene.add({
+        x: 0,
+        y: 0.85,
+        width: 2,
+        height: 2,
+        image: images.mountain1
+    })
+
+    scene.add({
+        x: 1.5,
+        y: 0.85,
+        width: 2,
+        height: 2,
+        image: images.mountain2
+    })
+
+    scene.add({
+        x: 3,
+        y: 0.85,
+        width: 2,
+        height: 2,
+        image: images.mountain3
+    })
+
+    scene.add({
+        x: 4.5,
+        y: 0.85,
+        width: 2,
+        height: 2,
+        image: images.mountain4
+    })
+
+    scene.add({
         x: 0,
-        y: 0,
+        y: 3,
+        width: 1,
+        height: 0.5,
+        image: images.floor1
+    })
+
+    scene.add({
+        x: 1,
+        y: 3,
+        width: 1,
+        height: 0.5,
+        image: images.floor2
+    })
+
+    scene.add({
+        x: 2,
+        y: 3,
+        width: 1,
+        height: 0.5,
+        image: images.floor3
+    })
+
+    scene.add({
+        x: 3,
+        y: 3,
+        width: 1,
+        height: 0.5,
+        image: images.floor4
+    })
+
+    scene.add({
+        x: 4,
+        y: 3,
+        width: 1,
+        height: 0.5,
+        image: images.floor5
+    })
+
+    scene.add({
+        x: 5,
+        y: 3,
+        width: 1,
+        height: 0.5,
+        image: images.floor6
+    })
+
+    scene.add({
+        x: 6,
+        y: 3,
+        width: 1,
+        height: 0.5,
+        image: images.floor1
+    })
+
+    scene.add({
+        x: 0,
+        y: 1,
+        width: 2,
+        height: 2,
+        image: images.tree1
+    })
+
+    scene.add({
+        x: 1.5,
+        y: 1,
+        width: 2,
+        height: 2,
+        image: images.tree2
+    })
+
+    scene.add({
+        x: 3,
+        y: 1,
+        width: 2,
+        height: 2,
+        image: images.tree3
+    })
+
+    scene.add({
+        x: 4.5,
+        y: 1,
+        width: 2,
+        height: 2,
+        image: images.tree4
+    })
+
+    scene.add({
+        x: 0.5,
+        y: 2,
+        width: 1,
+        height: 1,
+        image: images.grass1
+    })
+
+    scene.add({
+        x: 1.5,
+        y: 2,
+        width: 1,
+        height: 1,
+        image: images.grass2
+    })
+
+    scene.add({
+        x: 2.5,
+        y: 2,
         width: 1,
         height: 1,
-        image: heroImage
+        image: images.grass3
     })
+
+    scene.add({
+        x: 3.5,
+        y: 2,
+        width: 1,
+        height: 1,
+        image: images.rocks1
+    })
+
+    scene.add({
+        x: 4.5,
+        y: 2,
+        width: 1,
+        height: 1,
+        image: images.grass1
+    })
+
+    scene.add({
+        x: 5.5,
+        y: 2,
+        width: 1,
+        height: 1,
+        image: images.grass2
+    })
+
+
+    drawScene(ctx, scene)
+
 }
 
 

scripts/utils.js

@@ -8,6 +8,22 @@ export function loadImage (path) {
 }
 
 
+export async function loadImages (collection) {
+    const images = {}
+
+    for (let name in collection) {
+        images[name] = await loadImage(collection[name])
+    }
+
+    return images
+}
+
+
+export function setScale (ctx, scale) {
+    ctx.scale(scale, scale)
+}
+
+
 export function drawRectangle (ctx, {x, y, width, height, color}) {
     ctx.fillStyle = color
     ctx.fillRect(x, y, width, height)
@@ -19,11 +35,6 @@ export function drawImage (ctx, {x, y, width, height, image}) {
 }
 
 
-export function setScale (ctx, scale) {
-    ctx.scale(scale, scale)
-}
-
-
 export function drawGrid (ctx) {
     const {width, height} = ctx.canvas
     const cellSize = 1
@@ -44,3 +55,10 @@ export function drawGrid (ctx) {
         ctx.stroke()
     }
 }
+
+
+export function drawScene (ctx, scene) {
+    scene.elements.forEach(element => {
+        drawImage(ctx, element)
+    })
+}