Mario Game: On-load asset position bug fix

Video Thumbnail

Premium Features

Download Video

On-load asset position bug fix

Published 3 years ago

There's a small bug you may have noticed in which the platforms of our game move the very beginning of the level whenever the browser window is refreshed. This occurs since our init() code is running before all of our game assets are loaded. Here I'll show you how to fix this using the power of promises and async / await.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

r

revankarora posted 8 months ago

now fixed

1

r

revankarora posted 8 months ago

i don't know why it is showing this

canvas.bundle.js:10 Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):

SyntaxError: /Users/ankurarora/Desktop/games/mario-game-server/src/js/canvas.js: Unexpected token, expected "{" (158:4) (at canvas.bundle.js:10:7)

[0m [90m 156 |[39m

[90m 157 |[39m [36masync[39m [36mfunction[39m init()

[31m[1m>[22m[39m[90m 158 |[39m platformImage [33m=[39m [36mawait[39m createImageAsync(platform)

[90m |[39m [31m[1m^[22m[39m

[90m 159 |[39m

[90m 160 |[39m console[33m.[39mlog(platformImage[33m.[39mwidth)

[90m 161 |[39m [0m

at constructor (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:362:19)

at Parser.raise (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:3259:19)

at Parser.unexpected (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:3279:16)

at Parser.expect (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:3589:12)

at Parser.parseBlock (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:12773:10)

at Parser.parseFunctionBody (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:11620:24)

at Parser.parseFunctionBodyAndFinish (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:11606:10)

at :3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:12921:12

at Parser.withSmartMixTopicForbiddingContext (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:11914:14)

at Parser.parseFunction (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:12920:10)

at constructor (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:362:19)

at Parser.raise (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:3259:19)

at Parser.unexpected (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:3279:16)

at Parser.expect (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:3589:12)

at Parser.parseBlock (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:12773:10)

at Parser.parseFunctionBody (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:11620:24)

at Parser.parseFunctionBodyAndFinish (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:11606:10)

at :3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:12921:12

at Parser.withSmartMixTopicForbiddingContext (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:11914:14)

at Parser.parseFunction (:3000/Users/ankurarora/Desktop/games/mario-game-server/node_modules/@babel/parser/lib/index.js:12920:10)

at ./src/js/canvas.js (canvas.bundle.js:10:7)

at startup:5:1

at startup:5:1

0

r

revankarora posted 8 months ago

still after npm start when i do cmd c it doesn't work

0

r

revankarora posted 8 months ago

for some reason when i go to terminal and do cmd c it doesn't work

0

chris posted 8 months ago

I'd recommend checking out Warp if you can (wondering if it's Mac only), it's a great terminal replacement that allows you to do things like cmd-c, view larger terminal histories etc. Great app

0

MILLAREMARK420 posted 2 years ago

Hello Chris. my name is Mark... i just want to ask how to not double jump, i dont like my game jump even though the character still in the air! and not shoot fireflower continoustly if i long press the space button. i like to shoot one at a time! can you help me please... thank you in advance....

0

webuxmotion posted 2 years ago

Hello! I fixed this issue in different way:

window.onload = () => {
  init();
  animate();
};

2

N

Nishil1323 posted 2 years ago

hello i am getting this error at runtime

ERROR in ./src/js/canvas.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Cannot find module 'babel/preset-env'

0

C

CucumberBasket posted 2 years ago

The error you're encountering is because the Babel loader is unable to find the babel/preset-env module. This is likely due to a missing or incorrect configuration.

0

p

pedrolbpcruz posted 3 years ago

hello, I have an error when I finish the 10.49 minute steps. My screen is all black and I get these errors, how do I solve it? Thanks

npm ERR! Missing script: "start"

npm ERR!

npm ERR! Did you mean one of these?

npm ERR! npm star # Mark your favorite packages

npm ERR! npm stars # View packages marked as favorites

npm ERR!

npm ERR! To see a list of scripts, run:

npm ERR! npm run

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/pedrocruz/.npm/_logs/2022-02-16T19_47_32_919Z-debug-0.log

0

chris posted 3 years ago

Hi Pedro, do you have a package.json file within your project? There should be a command within it called "start" which should get your project up and running when you run npm run start from your project directory.

If you do have that, could you send me a GitHub repo of your project? Will be able to give you a direct answer once I see that and have it up and running.

0

webuxmotion posted 2 years ago

Hi) Can you add me to discord chat?

0

XxCFxX posted 3 years ago

there is a problem with the return Promise code. Here's the error.

canvas.js:134 Uncaught TypeError: undefined is not a promise

at Promise (<anonymous>)

at createImageAsync (canvas.js:134:12)

at init (canvas.js:164:18)

at Module../src/js/canvas.js (canvas.js:320:1)

at __webpack_require__ (bootstrap:19:1)

at bootstrap:83:1

at bootstrap:83:1

and here's my code: function createImageAsync(imageSrc) { return Promise((resolve) => { const image = new Image() image.onload = () => { resolve(image) } image.src = imageSrc }) }

does anybody know what I did wrong?

0

chris posted 3 years ago

Make sure you instantiate the Promise object with new like:

new Promise()

Think it should work with just that, but let me know if it still errors out.

0

XxCFxX posted 3 years ago

ok, re making the first tutorial game lol. I will lyk what happens when I get to the new Promise area.

0

XxCFxX posted 3 years ago

new promise worked but I then got this error at 7:10 in the video.

Uncaught ReferenceError: regeneratorRuntime is not defined

at _init (canvas.bundle.js:382:43)

at init (canvas.bundle.js:378:16)

at Module../src/js/canvas.js (canvas.js:325:1)

at __webpack_require__ (bootstrap:19:1)

at bootstrap:83:1

at bootstrap:83:1

The whole screen is black, how to fix it?

0

XxCFxX posted 3 years ago

oHH. nnvm the error was in the video Lmao

0

N

Nishil1323 posted 2 years ago

Bro how did you solve it? I have completed this video but it's still not solved

0

Education

Courses
Blog

Support

Transparency

Legal

Providing the lift to launch your development career

© 2025 Chris Courses. All rights reserved.