spbooks / html5games1 Goto Github PK
View Code? Open in Web Editor NEWCode archive for the book HTML5 Games: Novice to Ninja
Code archive for the book HTML5 Games: Novice to Ninja
where is the WebGL2Renderer ?
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.
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 ;-)
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?
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.
(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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.