@thesuperlearner
I have recently crossed my 30s and my life is very far from sorted, yet I am not giving up. These structured free videos give me hope and strength.
@martapfahl940
For everyone who is seeing this, if you want to practice your object oriented programming skills, this tutorial is really really good for that!
@Gleb_Pastushenko
At 5:09:55 the gap you see is a background defect (if you merge two backgrounds horizontally in Photoshop you will see the same gap due to the one pixel wide empty column on the left side of the image). So, when you try to compensate for this gap by subtracting the speed value, you shift the second background in such a way that it does not match the first one in the picture. So to get rid of this gap you just have to compensate 1px regardless of speed. And your background will move perfect an any speed. The only thing you have to do - is to compensate the same 1px when sliding background to the start position to avoid background jerking:
draw(context) {
context.drawImage(this.image, this.x, this.y, this.width, this.height);
context.drawImage(
this.image,
this.x + this.width - 1, <<----- compensate 1px when merging
this.y,
this.width,
this.height
);
}
update() {
this.x -= this.speed;
if (this.x < 0 - this.width + 1) this.x = 0; <<------ compensate 1px when sliding back to the start position
}
@norahyde5733
3 lessons in, after a miserably failed attempt a few years ago with Sprite sheets where I got completely lost halfway thru someone else's tutorial, so far every single thing here has worked and even though I don't fully understand 100% yet what everything is doing, you explain it in a way where I will get there as my knowledge grows. Thank you so much, this course is so fun!
@phillpeters
1 hour in and the this keyword has been completely demystified!! Your one sentence did more to explain 'this' than other complete videos I've watched.
@youarethecssformyhtml
JavaScript is love! You can literally do almost anything you think about with it from web apps to mobile, desktop apps, iot, game development...
@sugoish9461
15:53 FLASH WARNING ⚠️ Not just at this specific point, but on some occasions too shortly after, as we are dealing with animating from a spritesheet, and how to not include blank frames in the animation shown. The animation is displayed at very fast speed and the subject is black, so there is a high-speed flickering between black and white. At 18:52 the animation speed has been slowed down again, so there shouldn't be a problem after that. Just wanted to make sure this is known! Love the video so far!
@KY-xz9yb
8:01:40 background.js full 8:02:42 fixing typo on background.js 9:25:26 background completed 8:11:56 enemy.js 8:25:07 8:28:14 climbing enemy 8:31:37 end 9:06:21 particle code 9:08:52 lines 32 particle.js 7:40:21 player.js draw,onground,setstate functions 9:35:49 player.js lines 1to 31 9:07:48 playerstates line 1-30 9:10:45 full code for playerstates.js 9:15:02 collisionAnimation.js 9:18:30 9:20:58 UI.js 9:22:47 9:32:58 floatingMessage.js Full 8:39:58 main.js this.UI.draw(context input.js 7:23:30 9:24:42 main.js adding particles 8:47:00 - 8:52:20 about particles
@Gleb_Pastushenko
The problem of jumping background layers when changing speed is solved very simply (1:24:20). Along with the frame rate, you are essentially changing the speed of the game's timeline. In this case, the time in the game is set by the total number of frames. By changing the speed, you recalculate the total number of frames each time. The game jumps to a new position in the timeline, and the background layers jump to new coordinate positions corresponding to the game's position in the timeline. To save the current coordinates of the background layers, you need to save the position of the game on the timeline. In other words, when changing the speed, it is necessary to save the total number of frames. Because the total number of frames depends on the number of the "gameFrame" and on the "gameSpeed" then when changing the speed, it is necessary to change the "gameFrame" inversely proportionally to the change in speed. In the context of the code, this is just one line in the "onchange" event handler function of the slider, where you need to get the new number of the "gameFrame" by simply dividing the total number of frames by the new speed value: gameFrame = (gameFrame * gameSpeed) / e.target.value; Important: you must place this line of code at the very beginning of the handler function, where the "gameSpeed" variable remains its value until the speed is changed. I have checked this solution, it works perfectly.
@MelvinG24
For me, this has been the definitive course on how to create a 2d game with Javascript. I have used Unity to make my 2D games, but I never like it. I found Unity games too heavy with many unnecessary libraries and features that I never use in my games. So I took the initiative to rewrite one of my simples games in Javascript, and this tutorial is the perfect place to start working with
@loganmagnuson4813
Just finished the course from beginning to end. Had a blast the entire way through! This was a really fun way to learn some new stuff in JavaScript. Gonna take what I learned here and build a 2D game for my portfolio! Keep it up my friend and keep making great content! Thanks <3
@andrewllewellyn6937
There's my weekend gone 😂. I've been re-learning vanilla JavaScript, following a short period of learning it on a full-stack course. Being interested in game development also, this has come right at the right time. Thank you Frank and thank you FCC.
@mbm6048
Unbelievable, The law of attraction really works.I was looking forward to learning javascript game development so I can apply at tech with Tim's startup company. Then outta nowhere fcc posts.
@fadwarezika9041
This video came at the right time, I've been curious about game development
@CloudNey
I just got myself something cool to do on this weekend 😁😁😁 thanks for sharing your knowledge with us!
@lukyyt9637
I love how he goes silent once in a while to give us a little time to think and understand what he just explained without having to pause the video.
@Gleb_Pastushenko
About getting the XY coordinates of the cursor at the click point (2:35:00). You can get the coordinates of the cursor relative to the canvas directly, without any calculations, using the global coordinates of the cursor and the position of the canvas. To do this, you must use the canvas onclick event listener, not the window event listener, and then get the coordinates from the offsetX and offsetY properties of the event object.
@kusmaurya3675
Solution to last problem in second Project (Parallax Background )
Problem: on changing slider background moves at some other position.
Solution:
Do not use global variable gameFrame.
Refactor code of update method in Layer class like below:
update(){
this.speed = gameSpeed * this.speedModifier;
// if(this.x <= -this.width){
// this.x = 0;
// }
this.x = Math.floor(this.x - this.speed) % this.width; //this works fine
//only two lines needed in update method
}
Thankyou
@Franks laboratory
@TheodorSirmanoff
Hey Frank, a big "thank you" firstly. You spent much more time than the tutorial.length in fact. What a dedication! Impressive.
@Frankslaboratory