HTML5Games chapter 2 first game: the Rick game, I am getting stuck? Help

main.js:20 Uncaught TypeError: Cannot read property ‘appendChild’ of null
at addClicker (main.js:20)

I am working through the GAMES book and in the first game the Rick game I am getting stuck??? Help

I have moved this to the JS forum since it’s a JS question.

Without seeing your code (JS and HTML) it’s difficult to tell what might be wrong, but have you double-checked there’s not a typo in your code?

Edit: Have you got an image named rick.png in your res/images folder?

I presume that it’s this book here?

With Chapter 1, I couldn’t run the npm run build command because the book author was bored with the process.

The chapter 1 repo is at https://github.com/spbooks/html5games1/tree/master/ch01

On using the build command that’s in the package.json file:

"build": "browserify src/main.js -o bundle.js -t [ babelify --presets [ env ] ]"

But that’s called bundle.js whereas the book says:

Okay, rename bundle.js to build.js

"build": "browserify src/main.js -o build.js -t [ babelify --presets [ env ] ]"

I’m told by npm when I attempt to do npm run build

Error: Cannot find module '@babel/core'

So, it’s time to install that.

npm install --save-dev @babel/core

Does it build? No.

Cannot read property 'bindings' of null while parsing file: C:\Users\paulm\OneDrive\Documents\programming\html-games\src\main.js

I find advice elsewhere on the internet that the solution to that is to use a different preset env.

npm install --save-dev @babel/preset-env

and update the start and build scripts in package.json

    "start": "budo src/main.js:build.js --live -- -t [ babelify --presets [ @babel/preset-env ] ]",
    "build": "browserify src/main.js -o build.js -t [ babelify --presets [ @babel/preset-env ] ]"

and now a separate build.js file can be successfully built.

That’s the chapter 1 issues sorted out. If you can find your way to success with things up to there, then chapter 2 builds on top of chapter 1.

2 Likes

To be fair to the author, it’s the babelify package that requires Babel 7 and the corresponding preset. I’m sure this has only become an issue as the book has aged.

Do you have a link to the repo? I’d be interested to see if they included a package-lock.json file.

Yes, the repo is at https://github.com/spbooks/html5games1

Too many times I’ve seen things fail due to changes after publication.

An idea for future books is to include version numbers, which guarantees to keep things working at a later date.

4 Likes

Agree absolutely. This is also what a lock file would accomplish, that one could clone the repo and no matter what has happened since the book was published, one would still have a working program.

And thanks for the link…

1 Like

This is what the book says about the image:

Because this is the DOM, we have to remember our normal website-making rules. The image for the game has to go in the correct folder ( res/images/ ),

Chapter 2 also says:

Starting from our project skeleton again, with our friend rick.png copied into the images directory,

but doesn’t tell you where to get rick.png

The Preface section though does have a Supplementary Materials section, that gives you a link to the code archive at https://github.com/spbooks/html5games1

And there in the ch02 folder, you’ll find the 01-dom-rick-clicker/res/images/rick.png image that you’re looking for.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.