HTML5Games

sueandant1 · November 2, 2019, 9:30pm

I have started working through HTML 5 Games;Novice to Ninja. I have loaded npm and budo and set up the initial game but now when I start npm it tries to load build.js but it just keeps running.
Anyone else had this problem? and how do I stop it?

James_Hibbard · November 3, 2019, 9:29am

Hi,

Sorry to hear that you are having problems with the book.

Could you be a little more specific. Assuming you’re following the steps in the book, could you let me know where you started from and at what point you are having trouble. Then I can follow the same steps on my PC and see if I can shed any light.

sueandant1 · November 3, 2019, 7:44pm

Thanks James. I hope you got my earlier reply explaining that I think I’ve solved the problem. I have now run into a different problem!
I have run npm install --save-dev babelify babel-core babel-preset-env. I now have a load of warnings:
babelify@10.0.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
rs@1.0.0 No repository field
optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_module/fsevents):
notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {“os”:“darwin”,“arch”:“any”}(current{“us”:“win42”,“arch”:“x64”})
And this is meant to be a book for novices like me!
How do I deal with this?
Best wishes
Tony Holland

James_Hibbard · November 3, 2019, 7:52pm

Nope Where did that end up?

When you post code, can you surround inline code in backticks, or highlight it and press the </> button in the toolbar. Likewise, can you please delimit code blocks with three backticks, or as above, mark it and hit the </> button.

This gives you: npm install --save-dev babelify babel-core babel-preset-env

And:

babelify@10.0.0 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
rs@1.0.0 No repository field
optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_module/fsevents):
notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {“os”:“darwin”,“arch”:“any”}(current{“us”:“win42”,“arch”:“x64”})

which is much easier to read.

As to the cause of your error, it sounds like some kind of dependency mismatch. Could you please let me know which steps I can take to reproduce your problem on my machine (i.e. where are you in the book). Just running the commands above work fine for me, so it is very likely that these dependencies are colliding with something else.

sueandant1 · November 3, 2019, 9:28pm

Hi

Here is my previous reply which because it came to my mailbox I sent to
discourse+06d5ecf9fa8ee002a06f81734c508eb0@sitepoint.com

Thanks James
I think I’ve now solved the problem.
The book doesn’t make clear that npm start is a batch program terminated by ctrl c.
Also it doesn’t explain what happens when npm start runs, is every time the game is played the cmd monitor displays the programs being accessed. I thought it was trying and failing to create build.js!
I am now wiser.
Many thanks for your offer of help
Best wishes
Tony Holland

I was working through chapter 1 and got as far as the section headed “Build Tools and Workflow”.
When setting up the package.js file I made no entries for “test command”, “git repository” or “keywords”: as a novice I have no idea what those require!
I hope that’s the information you need, but if not please let me know.
Best wishes
Tony Holland

James_Hibbard · November 4, 2019, 12:11pm

Ok, I see what’s happening.

With this command: npm install --save-dev babelify babel-core babel-preset-env

you’re installing babelify, which is pulling in the latest version of the package (v10.0.0). This now depends on Babel 7.x, but the above command is installing Babel 6.x.

So, what you need to do:

Delete your node_modules folder.
Change your package.json file to look like this:

{
  "name": "whatever",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "budo src/main.js:build.js --live -- -t [ babelify --presets [ @babel/preset-env ] ]"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babelify": "^10.0.0",
    "budo": "^11.6.3"
  }
}

Run npm i
Run npm run start
Visit http://192.168.178.27:9966/

And everything should work.

sueandant1 · November 4, 2019, 7:30pm

Thanks James, but sadly that hasn’t worked. Here is the print out:

npm ERR1 code ETARGET
npm ERR! notarget No matching version found for Babel-core@7.6.4.
npm ERR! notarget In most cases you or one of your dependencis are rquesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notargetIt was specified as a dependency of 'rs'
npm ERR! notarget

package.json is stored in C:/game/rs on my PC and that is where node_modules folder should be.

What am I doing wrong?

Best wishes

Tony Holland

James_Hibbard · November 4, 2019, 8:21pm

That’s a shame. Maybe we can take it from the top.

First off, which versions of Node and npm do you have installed?

You can find this with the commands node -v and npm -v.

Let me know and I’ll switch to the same versions, then try running through the instructions again.

sueandant1 · November 4, 2019, 9:21pm

Thanks for all your time, James
node version 13.0.1
npm version 6.12.0
Looking through all the error messages it seems it cannot find module @babel/core; should this be included in the “start” instruction in package.json?
Best wishes
Tony

James_Hibbard · November 5, 2019, 7:00am

No worries. Happy to help.

So, let’s start over. Please run through the following steps and tell me what happens.

Create a game folder on your Desktop. I know you might think “Eh? Desktop? I’m working in C:/game/rs”, but it’s important to do the following steps outside of your project folder (where you might have conflicting dependencies installed, for example).
Change into the game folder and open a terminal.
Run npm init -y. This should produce a package.json file.
Install the dependencies with this command. This should create a node_modules folder in your game folder.

npm i --save-dev budo babelify @babel/core @babel/preset-env

In your game folder, create a res folder and a src folder.
In the res folder, create a main.css file and add the following:

#board {
  width: 640px;
  height: 480px;
  margin: auto;
}

In the src folder, create a main.js file and add the following:

const myGuess = Math.floor(Math.random() * 20) + 1;
let guesses = 0;
let guess;

while (guess !== myGuess) {
  guess = parseInt(prompt("What number am I thinking of?"), 10);
  guesses++;
  if (guess < myGuess) {
    alert("Higher.");
  } else if (guess > myGuess) {
    alert("Lower.");
  }
}
alert(`Well done! You got it in ${ guesses }!`);

Create an index.html file in the game folder and add the following:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Game</title>
  <link rel="stylesheet" href="res/main.css" />
</head>
<body>
  <div id="board"></div>

  <script type="module" src="build.js"></script>
</body>
</html>

The contents of your game folder should now look like this:

game
├── index.html
├── node_modules
│   └── lots of folders
├── package.json
├── package-lock.json
├── res
│   └── main.css
└── src
    └── main.js

Open package.json and edit the scripts section to be:

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

Your entire package.json file should look like this:

{
  "name": "game",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "budo src/main.js:build.js --live -- -t [ babelify --presets [ @babel/preset-env ] ]"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.4",
    "@babel/preset-env": "^7.6.3",
    "babelify": "^10.0.0",
    "budo": "^11.6.3"
  }
}

From your terminal run: npm run start
You should see something like the following output:

> game@1.0.0 start /home/jim/Desktop/game
> budo src/main.js:build.js --live -- -t [ babelify --presets [ @babel/preset-env ] ]

[0000] info  Server running at http://192.168.178.27:9966/ (connect)
[0000] info  LiveReload running
[0000] 327ms      2832B (browserify)
[0005] 4ms           0B GET    200 /
[0005] 1ms          60B GET    200 /res/main.css
[0005] 0ms           0B GET    200 /build.js

Visit http://192.168.178.27:9966 in your browser and you should see:

Let me know how you get on.

sueandant1 · November 5, 2019, 8:58pm

Thanks James; it now works after I sorted out a number of self generated bugs!

One small change I had to make, "+ guesses +" instead of ${ guesses }

I am now a bit puzzled by the failure of the book text, which seems the same as your re-write, or am I wrong?

Best wishes

Tony

James_Hibbard · November 6, 2019, 5:12am

Yay!

Lol, that makes zero sense as it is being piped through babel and the file containing:

alert(`Well done! You got it in ${ guesses }!`);

isn’t even being served (rather the transpiled version thereof).

Did you copy/paste the code from my post above, or did you type it up yourself? If the latter, then pls note that those are backticks, not single quotes.

sueandant1 · November 6, 2019, 7:49pm

Thanks again James. I copied your text and that works fine. I have now found the backtick key on my keybord! (and that also works). Now, on with the book.
Best wishes
Tony

system · February 6, 2020, 2:49am

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