Part 1 here, have fun! :D kzfaq.info/get/bejne/mZNhl6WVlsWraHU.html What else should we implement

Hi Frank, I completed this part a few days ago...thank you!Very informative. I am HOOKED! 😀

This is my next challenge. Bring it on!

random small improvement I found: this movement code for the background causes a small stutter when we reset the image back to x=0, this is because the game speed pushes x by 3 and sometimes pushes x past the ultimate width, so when we get set back to 0 you can see the stutter, we also did not account for the gamespeed in this scenario. To fix this, in the update method for Layer class, I instead increment x by the width of the background image, and I also subtract the game speed to keep moving seamlessly. code: if (this.x < -this.width) this.x += this.width - (this.game.speed*this.speedModifier);

Frank, love the code refinements, I always learn something new from your excellent tutorials. Thanks for sharing your knowledge!

Dude I started this series when I started learning js but i didnt understand anything now i am much advanced and I restarted this, dude the way you explain and the easy way you code i love that

A lot of great information, wonderfully explained with useful on screen notes to help with understanding - good job as always Frank! (:

This finally made Enums make so much sense to me. Thank you so very much!!!!

Another masterpiece. Thanks Frank. Enjoy your weekend.

This channel is a great find. Thank you for these excellent tutorials. Wishing you great success.

Tip: when using "Enum types" like states, you can use Objet.freeze to ensure the values doesn't change: like this: const states = Object.freeze({SITTING:0, RUNNING:1});

Thank you so much mate. I’ve been looking for a way to create this for months !!

Just discovered the channel! It is amazing!I'm learning a lot! Thank you so much!

I love the way you teach things :)

Díky. Skvělá práce. Skvělý tutoriál.

Loving this series so far, and indeed all your videos having recently discovered your channel. I'm a JS developer of business applications with some 15 years experience and it's nice to be able to follow along with your well-written and explained code to use my skills in a different way. Great job! +1 sub, +1 notification from me.

Thanks , You always deliver

Thanks! I'll need to use that deltaTime technique at some point. Just one question: doesn't this make it refresh slower than the frameInterval? (because you use if(this.frameTimer>this.frameInterval). It would be nice to see a plot of the this.frameTimer values as they accumulate over time. I assume the average value to be something like (frameInterval+deltaTime)/2.

amazing video and explanation

First, thanks for all the effort Frank

Excellent!!

Nice video sir. Thank you for the tutorials.

Hi Frank, I'm loving your tutorial and learning so much. You started mobile controls but how do you add different states on mobile.

hello teacher, the tutorial was very good, the game is beautiful🧐

Thank you Sir, :)

thanks!!

hi teacher, im doing same with you but my player not moving when he standing ?? maybe my chrome have problem??

Hi Frank, Awesome course, i'm followig it and I'm enjoying it very much. I just have one question, why do we need to set up a server? I've tried launching the game without the server, just opening the index.html file and it does not work. I'll thank you if you can clearify this.

How did you do the energy?

I followed along, step by step, but when it's time to see the images scrolling in the background i see my character in a perfect white void 😅 i think the problem is here: update(){ if (this.x < - this.width) this.x = 0; else this.x -= this.game.speed * this.speedModifier; } with this function, if i console log the array entries with: console.log(this.backgroundLayers[0].x, this.backgroundLayers[0].y); i noticed that the x is NaN and so the program dosen't draw the images. I checked your code and my code several times but it's EXACTLEY the same. How it's possible that is NaN?

Request tutorial idle game with js

Can I find jobs in this direction? JS 2d games? Or is it just for fun?

I hate you. Now I feel not to have hours in a day to play with this new knowledge, lmao

Hi can someone help me in console say currentstate undefined please someone help me

My dog jumping soo fast on 165hz refresh rate screen and I can't find solution. Someone know what should I do?

how do you cap the fps so the game doesn't move as fast. I'm getting 144 fps because of my monitor and I find it way too quick.

is this game series finished?

Hello, how are you?? ..excuse me, do you have a Java language course?

Bro dog animating too fast how can i slow it

Hi sir please make this game installable

Can someone help me? My code not working... background.js class Layer { constructor(game, width, height, speedModifier, image) { this.game = game this.width = width this.height = height this.speedModifier = speedModifier this.image = image this.x = 0 this.y = 0 } update() { if (this.x < -this.width) this.x = 0 else this.x -= this.game.speed * this.speedModifier } draw(context) { context.drawImage(this.image, this.x, this.y, this.width, this.height) context.drawImage(this.image, this.x + this.width, this.y, this.width, this.height) } } export class Background { constructor(game) { this.game = game this.width = 1667 this.height = 500 this.layer1image = document.getElementById('layer1') this.layer2image = document.getElementById('layer2') this.layer3image = document.getElementById('layer3') this.layer4image = document.getElementById('layer4') this.layer5image = document.getElementById('layer5') this.layer1 = new Layer(this.game, this.width, this.height, 0, this.layer1image) this.layer2 = new Layer(this.game, this.width, this.height, 0.2, this.layer2image) this.layer3 = new Layer(this.game, this.width, this.height, 0.4, this.layer3image) this.layer4 = new Layer(this.game, this.width, this.height, 0.8, this.layer4image) this.layer5 = new Layer(this.game, this.width, this.height, 1, this.layer5image) this.backgroundLayers = [this.layer1, this.layer2, this.layer3, this.layer4, this.layer5] } update() { this.backgroundLayers.forEach(layer => { layer.update() }) } draw(context) { this.backgroundLayers.forEach(layer => { layer.update(context) }) } } player.js import { Sitting, Running, Jumping, Falling } from "./playerStates.js" export class Player { constructor(game) { this.game = game this.width = 100 this.height = 91.3 this.x = 0 this.y = this.game.height - this.height - this.groundMargin this.vy = 0 this.weight = 1 this.image = document.getElementById('player') this.frameX = 0 this.frameY = 0 this.maxFrame this.fps = 20 this.frameInterval = 1000/this.fps this.frameTimer = 0 this.speed = 0 this.maxSpeed = 10 this.states = [new Sitting(this), new Running(this), new Jumping(this), new Falling(this)] this.currentState = this.states[0] this.currentState.enter() } update(input, deltaTime) { this.currentState.handleInput(input) // Horizpntal Movement this.x += this.speed if (input.includes('ArrowRight')) this.speed = this.maxSpeed else if (input.includes('ArrowLeft')) this.speed = -this.maxSpeed else this.speed = 0 if (this.x < 0) this.x = 0 if (this.x > this.game.width - this.width) this.x = this.game.width - this.width // Vertical Movement this.y += this.vy if (!this.onGround()) this.vy += this.weight else this.vy = 0 // Sprite Animation if (this.frameTimer > this.frameInterval) { this.frameTimer = 0 if (this.frameX < this.maxFrame) this.frameX++ else this.frameX = 0 } else { this.frameInterval += deltaTime } } draw(context) { context.drawImage(this.image, this.frameX * this.width, this.frameY * this.height, this.width, this.height, this.x, this.y, this.width, this.height) } onGround() { return this.y >= this.game.height - this.height - this.game.groundMargin } setState(state, speed) { this.currentState = this.states[state] this.game.speed = this.game.maxSpeed * speed this.currentState.enter() } } playerStates.js const states = { SITTING: 0, RUNNING: 1, JUMPING: 2, FALLING: 3 } class State { constructor(state) { this.state = state } } export class Sitting extends State { constructor(player) { super('SITTING') this.player = player } enter() { this.player.frameX = 0 this.player.maxFrame = 4 this.player.frameY = 5 } handleInput(input) { if (input.includes('ArrowLeft') || input.includes('ArrowRight')) { this.player.setState(states.RUNNING, 1) } } } export class Running extends State { constructor(player) { super('RUNNING') this.player = player } enter() { this.player.frameX = 0 this.player.maxFrame = 8 this.player.frameY = 3 } handleInput(input) { if (input.includes('ArrowDown')) { this.player.setState(states.SITTING, 0) } else if (input.includes('ArrowUp')) { this.player.setState(states.JUMPING, 1) } } } export class Jumping extends State { constructor(player) { super('JUMPING') this.player = player } enter() { if (this.player.onGround()) this.player.vy -= 27 this.player.frameX = 0 this.player.maxFrame = 6 this.player.frameY = 1 } handleInput(input) { if (this.player.vy > this.player.weight) { this.player.setState(states.FALLING, 1) } } } export class Falling extends State { constructor(player) { super('FALLING') this.player = player } enter() { this.player.frameX = 0 this.player.maxFrame = 6 this.player.frameY = 2 } handleInput(input) { if (this.player.onGround()) { this.player.setState(states.RUNNING, 1) } } } script.js import { Player } from './player.js' import { InputHandler } from './input.js' import { Background } from './background.js' window.addEventListener('load', function() { const canvas = document.getElementById('canvas1') const ctx = canvas.getContext('2d') canvas.width = 500 canvas.height = 500 class Game { constructor(width, height) { this.width = width this.height = height this.groundMargin = 80 this.speed = 0 this.maxSpeed = 4 this.background = new Background(this) this.player = new Player(this) this.input = new InputHandler() } update(deltaTime) { this.background.update() this.player.update(this.input.keys, deltaTime) } draw(context) { this.background.draw(context) this.player.draw(context) } } const game = new Game(canvas.width, canvas.height) console.log(game) let lastTime = 0 function animate(timeStamp) { const deltaTime = timeStamp - lastTime lastTime = timeStamp ctx.clearRect(0, 0, canvas.width, canvas.height) game.update(deltaTime) game.draw(ctx) requestAnimationFrame(animate) } animate(0) })

This is my next challenge. Bring it on!