Errata

Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

Errata for Making Isometric Social Real-Time Games with HTML5, CSS3, and JavaScript

Submit your own errata for this product.

The errata list is a list of errors and their corrections that were found after the product was released.

The following errata were submitted by our customers and have not yet been approved or disproved by the author or editor. They solely represent the opinion of the customer.

Color Key: Serious technical mistake Minor technical mistake Language or formatting error Typo Question Note Update

Version Location Description Submitted by Date submitted
Printed Page Page 51
Figure 2-6

Tile 1,0 is located at X: CW/2, which is computed from (CW/2 - TW/2) + 1 * TW/2.
The text in the figure shows the wrong location X: CW/2 - TW/2.
From the image, it is not easy to locate Tile 1,0.

 joerg fellner  Nov 04, 2011 
Other Digital Version 1

JavaScript should have a capital 'S' in Script on the front cover / book title.

 Christian Oliff  May 29, 2011 
PDF Page 1
Chapter1, Page 2

In the middle of page 2, talking about how to access a canvas through JavaScript.
------
In order to start using the HTML5 Canvas API, we just need to reference the canvas tag by using its id attribute value (myCanvas),
------

But the HTML code above this paragraph is
------
<canvas id="game" width="100" height="100">
Your browser doesn't include support for the canvas tag.
</canvas>
------

and the JavaScript below is :
------
window.onload = function () {
var canvas = document.getElementById('game');
var c = canvas.getContext('2d');
}
------

In this part, the id should be "game". Although in the rest of the book, it is "myCanvas".

 Anonymous  Dec 15, 2011 
Printed Page 5-7
p5 last code example, pg 6 "showIntro()" example

In the code examples on the aforementioned pages it uses:

var logoImg = new Image();
logoImg.src = '../img/logo.png';

var originalWidth = logoImg.width;
...
c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

Due to JavaScript's asynchronous the image does not load until after the canvas. However, a catch 32 exists in that in between the code (not shown here) calculations are done against an image that has yet to be loaded (e.g. logoImg.width calls). Therefore parameters such as originalWidth are 0.

This causes the logo.png to not load on the canvas. As such you must click the refresh button after the initial load in order for the logoImg to actually load. In order to correct this you must wrap your code in the logoImg.load call to prevent a manual refresh/reload or a double reload in order to get the logo.png to display. As such:

...
var logoImg = new Image();

logoImg.onload = function() {
var originalWidth = logoImg.width;

logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

var logo = {
img: logoImg,
x: (canvas.width/2) - (logoImg.width/2),
y: (canvas.height/2) - (logoImg.height/2)
}

c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

c.fillStyle = "#000000";
c.font = "bold 16px Arial, sans-serif";
...

c.fillText (phrase, xCoord, (logo.y + logo.img.height) + 50);
};

logoImg.src = "../img/logo.png";
}


See documentation here for more information: https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Using_images

 John Sacks  Mar 18, 2013 
8
fadeToWhite function

alphaVal does not need to be re-declared with "var" since it is in already declared in the function's arguments array.

 Peter Menner  Sep 14, 2011 
Printed Page 52
Code block 1: grid offsets

The grid offsets do not depend on the grid dimension, but only on moving the grid on the canvas element, such as centering it with (canvas.width / 2) - (tile.width / 2).

Test:
Running example 2-3 with a grid of dimension 100 x 100 does not produce acceptable results.

So: use
var gridOffsetX = 0, gridOffsetY = 0;
instead of
var gridOffsetX = grid.width, gridOffsetY = grid.height;

Note:
Mabe, this problem was introduced to compensate for using e.clientX/Y instead of e.offsetX/Y for translating the mouse clicks.

 joerg fellner  Nov 04, 2011 
Printed Page 52
Code blocks 2/3: translate mouse clicks

Computing row and col from mouse click with this formula assumes mouse coordinates relative the Canvas element. The properties e.clientX and e.clientY, however, return coords relative the browser window, which does not take into account Body margins/paddings and scrolling the browser window.

So: use the equivalent of MS IE's properties
e.offsetX and e.offsetY
instead of
e.clientX and e.clientY
or:
remove any Body margins/paddings, and avoid scrolling.

 joerg fellner  Nov 04, 2011 
Printed Page 53
middle: // Check the boundaries!

Must check
.. && row < grid.width && col < grid.height
(compare to < instead of <=)

 joerg fellner  Nov 08, 2011 
Printed Page 59
top: // Place the building

For calculating the building locations according to Figure 2-10 on page 56, must make
new BuildingPortion(cinema.buildingTypeId, row-i, col-j)
(instead of coordinates i, j)

 joerg fellner  Nov 08, 2011 
Printed Page 59
center code: function draw()

Multi-tile objects are not always drawn correctly:
When placing cinemas on tiles [3,2] and [1,3], the "foreground" cinema on [3,2] is partly hidden by the "background" cinema on [1,3].
Note:
In the code repository, the drawing loops are interchanged (row first, then col). In this case, a "foreground" cinema on [2,3] is partly hidden by a "background" cinema on [3,1].
I think, drawing should not be in row order or in col order, but diagonally:
first draw tile [0,0]
then [1,0], [0,1]
then [2,0], [1,1], [0,2]
and so on.

 joerg fellner  Nov 09, 2011