spbooks / html5games1 Goto Github PK

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.

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 ?

(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

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 ;-)

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.