JavaScript Game Development Course for Beginners

Hope you have fun with the projects! 😊 If you have any questions or have issues downloading the art assets let me know! Thanks FCC for sharing my course! ❤🙏

Excellent video! I learned many things from this video.
But I have a question. Is it okay to write
@type {HTMLCanvasElement}
on the first line?

What IDE is this?

hello. Thanks for the video. What's the name of the program you are using to code?

If you find that your sprites are getting scaled without any reason, or the sprite images are not at the correct position in the browser render, fix this issue by fixing the width and height at the html canvas tag, this will fix it for sure

Can you please give me the coding? Like for all the projects? Cus I kinda wanna copy them and be able to study them more carefully. I am a 10 year old kid in Japan…I don't wanna talk about this that much, but here I gotta tell you I am in an orphanage, I really love coding, but the big mean adults won't get me an online course. Something about money?

2

1

0

a+a

Hi. I've been following the tutorial to a T, and I have my photos in the same folder as my code, but when I go to run it, all I get is a black screen with the game slider at the bottom, and nothing is scrolling. What did I do wrong?

i lost it after 25 min you keep going leave me behind save yourself

For project 5, my time to next frame is around 8.3 ms

What a beautiful journey Frank, this tutorial is awesome (maybe a bit fast sometimes) and you're a great teacher. Big up!

10:43 11/19/2023
27:22

Hi guys) Just started exploring and finished the 2nd project. But a question came up, maybe you have solved it. If the second parallax image we need only in CANVAS_WIDTH width, as we need the beginning of this one, then if I try to optimize and crop the unnecessary part of the second image in this way:
ctx.drawImage(this.image, 0, 0, CANVAS_WIDTH, this.height, this.x + this.width, this.y, CANVAS_WIDTH, this.height);

In this case, the second image moves down by y coordinates, but they are exactly the same and I don't understand what the problem is. Perhaps you know what the problem is and how I can crop the unnecessary part of the second image correctly?

Chatgpt called and said your not longer needed lol

Will this work if I do it on VS?

Late to the party, but people in late 2023 are still enjoying this. Thank you @Frankslaboratory, this was great.

This shouldn't be free

Perfect to practice javaScript and English 2×1 😅

apt

select

apt

i noticed in the first lesson, the "gameFrame" variable has a runaway value. If anyone following along wants to solve this, and you have named your variables the same, you can replace line 84

gameFrame++;

with the ternary expression

position + 1 >= spriteAnimations[playerState].loc.length
? gameFrame = 0
: gameFrame++;

for those unfamiliar with ternary expressions, they are another way to write simple if/else statements

@Frankslaboratory i can't find the art assets!

I Frank sir it is very nice tutorial . learns a lot.
and I came up with new pattern of enemy moving. In your chapter 3, the first pattern where creatures jumps. I tried to move that creatures in that given given window and I caome up with this solution.
class Enemy{

constructor(){

this.speed = Math.random() * 4 – 2;

this.spriteWidth = 293;

this.spriteHeight = 155;

this.width = this.spriteWidth / 2.5;

this.height = this.spriteHeight / 2.5;

this.x = Math.random() * (CANVAS_WIDTH – this.width);

this.y = Math.random() * (CANVAS_HEIGHT – this.height);

this.frame = 0;

this.place = true;

this.flapSpeed = Math.floor(Math.random()*3+1);

}

update(){

if(this.x <= 0 || this.x >= CANVAS_WIDTH-this.width || this.y <= 0 || this.y >= CANVAS_HEIGHT-this.height) this.place = !this.place;

if(this.place){

this.x += this.speed;

this.y += this.speed;

}else{

this.x -= this.speed;

this.y -= this.speed;

}

if(gameFrame % this.flapSpeed == 0){

this.frame >= 5 ? this.frame = 0 : this.frame++;

};

}

draw(){

ctx.drawImage(enemy1,this.frame * this.spriteWidth,0,this.spriteWidth,this.spriteHeight,this.x,this.y,this.width,this.height);

}

}

I am just taking a extra boolean variable and in update method minus speed or plus speed on basis of on which border creatures reach.

Thanks again for this tutorial.

11:08

what is the IDE that you use

as a beginner, start a javascript course, to learn the basics? or just dive deep and start with 2D game development that I like?

Frontend developer? wow

Which program is he using to code? Thanks in advance

4 xd and btw – great course!

Any easy way to have and show the time count DOWN from maxTime?