spbooks / html5games1

Code archive for the book HTML5 Games: Novice to Ninja

HTML5 Games: Novice to Ninja

Hello and thanks for checking out HTML5 Games: Novice to Ninja! These are the code examples for the book. If you are reading this then you are among the first people in the world getting your hands dirty. If you have issues running the examples, find any inconsistencies and errors, or you have suggestions then please either log an issue or email me at [email protected] (or ping me @mrspeaker), I will try to help.

Try the examples.

They will run in all recent browsers - check out all the examples and play some of the games!

Making your own games

To modify the code and make your own game you'll need to be able to run it. Each example also includes an npm package.json file for converting the code into a single file that can be run in any browser. For each example you need to run:

npm install

You only have to do this once per example. This installs all the dependencies and files needed to run and package your game. Use the command:

npm start

It will start a webserver (at the URL http://localhost:9966/ by default). You can test your changes at the URL.

Building for the outside world

Once you've finished your game and are happy with your changes, you can run:

npm run build

Which will convert the code into a single build.js file that can be run with the included index.html file. These two files (along with any of your game assets and images) can then be deployed to a public server for everyone to play. If you make a game, please let me know on Twitter (@mrspeaker)!

Getting help

Setting up a workable build system to run code can be the most frustrating aspect of JavaScript development. If you are having any trouble running or modifying the examples, either log an issue on the code repository, send me an email at [email protected], or ping me @mrspeaker on twitter - and we'll get it sorted.

Using JavaScript Native Modules

Recently, most browsers have began to support JavaScript Native Modules. this means the step of converting all the code into a single file is not necessary - you can just make changes to your code and see the results without even needing npm.

(For Firefox before version 60 it's enabled behind the about:config dom.moduleScripts.enabled flag).

This is really convenient and cool - however, if you want to run your games locally on your own computer they still need to be served by a webserver. This is because JavaScript modules will only work via http:// and not file:// - so you can't just double-click and run it. There is a webserver in the root directory (that is, in html5games1/) that you can install and run (via npm) with:

npm install
npm start

This will run a server on http://localhost:9966/. If you browse here there will be links to each example.

Examples to come

I'm organizing the code for each chapter. There's still a little tidying going on. Also, still remaining:

ch09/01-02,05-10

html5games1's Issues

build.js file isn't created

I followed the instructions in chapter 1 for using babel and the project runs fine - except for no build.js file appears when I use npm start. The index.html file links to it but it isn't created.

Bravedigger -- Crazy Death Spiral

(This is not an issue with the tutorial code, but an issue in my code that's been stumping me. If this is not the appropriate place to ask these sort of questions, let me know.)

I've built out the Chapter 5 Bravedigger code, and everything seems to be working perfectly, save for a really strange issue. If, at any point during the game, the player character moves left, then upon death the death spiral animation. The below pictures should hopefully communicate what I mean.

As best as I can tell, I've copied the tutorial code almost verbatim for the player logic (and the parts that aren't exact are just personal style differences which don't affect the death spiral). I've also played with the final result posted on the examples site, and that version doesn't suffer the same problem.

Part of the problem is I'm not entirely sure what the problem is. I've already checked my rotation render method, and it seems to work just fine. The pivot [x,y] coordinates don't seem to be modified before render. I've tried searching for general issues with rotation offsets, but so far haven't found anything that helps.

Again, if this isn't the right place for issues like these, I apologize. I'm just going crazy because I can't figure out what my code is doing differently from the tutorial code to cause this bug.

EDIT: I said "right" when I meant "left". Also, took out some code that tried to fix the bug, but failed.

import pop from '../../pop/'
const { Texture, TileSprite, wallslide } = pop

const texture = new Texture('res/img/bravedigger-tiles.png')

class Player extends TileSprite {
  constructor(controls, map) {
    super(texture, 48, 48)
    this.controls = controls
    this.map = map
    this.hitBox = {
      x: 8,
      y: 10,
      w: 28,
      h: 38
    }
    this.speed = 210
    this.anchor = { x: 0, y: 0 }
    this.frame.x = 4
  }

  update(dt, t) {
    const { pos, controls, map, speed, gameOver } = this

    if (gameOver) {
      // TODO: Figure out why moving left prior to death causes this spiral to be exaggerated
      this.pivot.y = 24
      this.pivot.x = 24
      this.rotation += dt * 5
      return
    }

    let { x, y } = controls
    const xo = x * dt * speed
    const yo = y * dt * speed
    const r = wallslide(this, map, xo, yo)
    if (r.x !== 0 && r.y !== 0) {
      r.x /= Math.sqrt(2)
      r.y /= Math.sqrt(2)
    }
    pos.x += r.x
    pos.y += r.y

    // Animate
    if (r.x || r.y) {
      // Walking frames
      this.frame.x = ((t / 0.08) | 0) % 4
      // Walking left or right?
      if (r.x < 0) {
        this.scale.x = -1
        this.anchor.x = 48
      }
      if (r.x > 0) {
        this.scale.x = 1
        this.anchor.x = 0
      }
    } else {
      // Standing still
      this.frame.x = ((t / 0.2) | 0) % 2 + 4
    }
  }
}

export default Player

const { width, height } = img missing from page 41

Hi,

I have the most recent version of your book downloaded from SitePoint, and I am using the latest version of Adobe Reader.

On page 41, the draw function that is used for the snowflakes on the canvas is missing the const { width, height } = img declaration in the text.

Chapter 7 seems lacking

Hi, really enjoying the book as it's quite useful.

Slight problem though, the sample code for chapter 7 seems like it has the latter half missing. It gets as far as the asset manager, but doesn't include anything relating to the Web Audio API section or other parts.

Is this intentional?

where is the WebGL2Renderer ?

where is the WebGL2Renderer ?

Funny mistake in Chapter 5: class Totem

Hi Guys

the original code conrtains a funny, non-reproducible, but regular bug!

Here is the original code:

class Totem extends TileSprite {

  ....

  update(dt, t) {
    if (math.randOneIn(250)) {
      this.fireIn = 1;
    }
    if (this.fireIn > 0) {
      this.fireIn -= dt;
      // Telegraph to the player
      this.frame.x = [1, 0][((t / 0.1) | 0) % 2];
      if (this.fireIn < 0) {
        this.fireAtTarget();
      }
    }
  }
}

Now here's what happens form time to time: By sheer coincidence, fireIn might end up exactly as zero after a couple of frames (around 60). In that case, no bullet will be fired (because fireIn < 0 is false) and no further subtraction will occur (because fireIn > 0 is also false). Happens regularly on my mac with Safari ;-)

imgs