Vertical Platformer Game Tutorial with JavaScript and HTML Canvas

This course was made possible thanks to Hostinger (a really great hosting service). Save up to 91% of by using the discount code CHRISCOURSES on checkout at www.hostinger.com/chriscourses
Demo: chriscourses.xyz/
Game assets: drive.google.com/drive/folder...
GitHub source code: github.com/chriscourses/verti...
Tiled map editor: www.mapeditor.org/
Warrior Art by Luiz Melo: luizmelo.itch.io/medieval-kin...
Background Art by Trixie: trixelized.itch.io/starstring...
0:00 Project summary
0:58 Project setup
8:55 Domain setup
16:15 Gravity
33:35 Player movement
42:50 Background sprite
57:22 Collision blocks
1:29:54 Collision detection
1:51:31 Sprite animation
2:16:19 Hitbox implementation
2:32:09 Sprite swapping
2:56:33 Platform jumping
3:11:27 Horizontal camera panning
3:31:13 Vertical camera panning
3:41:06 Launch final product to Hostinger

Пікірлер: 232

  • @ChrisCourses
    @ChrisCourses Жыл бұрын

    In regards to having your game run on a live URL, I personally believe Hostinger is the the best shared hosting solution you can find at the moment-it's much simpler to set up than other solutions like GoDaddy and Bluehost (I've used both of these plenty of times throughout my 10 year development career), and the overall interface is cleaner too. This is the only video of mine where you can get a deal with them right now, so for a discounted rate, you can use www.hostinger.com/chriscourses and the coupon code CHRISCOURSES

  • @somerandomchannel382

    @somerandomchannel382

    Жыл бұрын

    Something cool to add would be a platformCollision viewer. PlatformCollision being an array. With mouse movement and determine size of array element its pretty easy to track where the mouse is in terms of the map. Then just change right element index on click to 202 values. Maybe something to add in future? :)

  • @maxgamer6476

    @maxgamer6476

    Жыл бұрын

    Please man make map in game that tells you were are you

  • @brunoferreyra3486

    @brunoferreyra3486

    29 күн бұрын

    O

  • @tara-nay

    @tara-nay

    21 күн бұрын

    Wq

  • @darthpromenaderpaprika5252

    @darthpromenaderpaprika5252

    16 күн бұрын

    Jktttktkkttwttwtwtwtwtwtwttwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwttwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwttwtwtwtwtwtwtwtwtwtwtwtttwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwttwtwtwtwtwtwtwtwtwtwtwtwtwtwtwtwttwtwtwtttwtwtwtttwtwtwtwtwtwtwtwtwtwwtwtwtwtwtwtwttwtwtwtwtwtwtwtwtwtwtwttwtw🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂😂🎉🎉😂🎉😂🎉😂😂🎉🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂😂🎉🎉😂🎉😂🎉😂😂🎉🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂🎉😂twtetwtwtwtwttwtwtwtwtwttwtwwtwtwtwtwtwtwtwtwtwtwttwtwtwtwttwtwtwtwtwtwwwwtwttwtwtwtwwtwttwwwttwtwtttttwtwtwtwttwtwtwwtwtwtwtwttwwtwwtwtwtwtwtwtwtwtwtwtwtwwtwtwttwtwwtttwtwtwwtwtwtwtwtwtwwttwwtwtwtwtwtwwtwtwttwtwwtwtwwtwtwtwtwttwwwtwwt😂twwtwwtwtwtwwwtwwwtwwtwtwwtwtwttwwwwtwtwttwtwwwwtwtwtwtwtwtwtwtwtwwtwwtwwtwtwtwtwwtwwtwwwww😂😂😂eetetwwwwwtwtwtwwwtwtwtwtwtwwtwtwtwtwtwtwwtwwtwtwwtwtwwtwtwwwtwtwtwwtwtwwwtwwww😂twtetwwtwtwtwwtwwttwtwwtwtwwtwttwtwtwwwtwwtwttwtwwtwtwtwtwtwwtwtwtwtwtwwtwtwwwttww😂😂😂😂😂😂😂😂😂😂😂😂teetetwwwttwtwtwwtwtwwtwwwwtwwtww😂teettewrwwtwwtwwttwwwwwwwww😂😂😂😂😂😂🎉😂😂😂😂😂🎉😂😂😂🎉😂🎉😂🎉😂😂😂🎉😂🎉😂😂😂😂😂🎉😂🎉😂😂🎉😂🎉😂😂🎉😂😂😂😂🎉😂😂😂🎉😂🎉😂😂😂😂😂🎉😂😂😂😂😂😂😂😂🎉😂😂🎉etwwtwwtwtwtwwtwtwtwwwwwwwwwww😂😂wwtewtwwwwwwwtwtwtwwww😂wwwwwwwwwwtwwwwwwwwwwwwwwwwwwwwww😂😂😂😂😂😂😂😂😂😂😂twwwtewwwwwwwtwwwwwwwwwwww😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂🎉😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂😂

  • @cedric_mllr
    @cedric_mllrАй бұрын

    Bro i keep falling asleep and always get these multiple hour long videos of creating games

  • @Oxyopiia

    @Oxyopiia

    Ай бұрын

    actually me

  • @account-pi3nj

    @account-pi3nj

    Ай бұрын

    On god!

  • @ricelordalt9183

    @ricelordalt9183

    Ай бұрын

    This is my second time

  • @greatswiss4252

    @greatswiss4252

    25 күн бұрын

    The same, when i wake up i see that YT algorithm gave me vids that i don't watch like programming tutorials.

  • @Gumisprettygood

    @Gumisprettygood

    24 күн бұрын

    I’ve been falling asleep to YT the last couple days and every morning when I wake up it’s always on this specific video

  • @d0senB13R
    @d0senB13R27 күн бұрын

    I woke up here again!

  • @micemincer
    @micemincer Жыл бұрын

    edit: So you people know - this is the only yt channel with 0 - 100 tutorials on this subject and without clowning, with some tolerable product placement and with professional content and host. Better to download so it never get lost.

  • @ThomasGiles

    @ThomasGiles

    Жыл бұрын

    “Without product placement”? LOL

  • @micemincer

    @micemincer

    Жыл бұрын

    @@ThomasGiles LOL - don't watch it then

  • @oliveryt7168

    @oliveryt7168

    Жыл бұрын

    @@micemincer simply correct your statement since it's not true... why so salty?

  • @micemincer

    @micemincer

    Жыл бұрын

    @@oliveryt7168 corrected

  • @Ayoubased

    @Ayoubased

    Жыл бұрын

    @@micemincer oof the salt

  • @trixelized912
    @trixelized91211 ай бұрын

    It's surreal gaining interest in web game development and seeing your own stuff pop up. Thank you for using my tileset!! I never expected people to like it all that much, I mocked it up in a few days '^^

  • @ChrisCourses

    @ChrisCourses

    11 ай бұрын

    Awesome, definitely one of the best looking tile sets I found on itch.io, thank you for making it available for use!

  • @mohamed745600
    @mohamed745600 Жыл бұрын

    I appreciate the production quality of these videos.

  • @ej3fm494
    @ej3fm4944 ай бұрын

    Your tutorials are so detailed and easy to understand. I appreciate your work on these videos !

  • @commandprompt7171
    @commandprompt7171 Жыл бұрын

    dude thank you so much for this tutorial, I came from c/c++ to java script, and I was hating it like crazy, because I had no main function and while loop, and the for loops will crash on my side constantly, the way you are explaining java script makes a lot of sense, thank you!

  • @collinsk8754
    @collinsk87544 ай бұрын

    Excellent OOP principles in a fun and practical way! Thank you! 👏👏

  • @tonussi
    @tonussiАй бұрын

    Seriously the quality of your videos are so good! Story-telling is perfect.

  • @nikolaikilt
    @nikolaikilt5 күн бұрын

    I am loving your clear explanations and how you go through the code. It is very fun to learn like this! Keep it up!

  • @FoxSock
    @FoxSock8 күн бұрын

    i dont know how i got here, i dont know how i got 11 minutes in with no fucking clue that i was even watching this, but i feel marginally smarter, so thank you

  • @pabloqp7929
    @pabloqp7929 Жыл бұрын

    omg 1 minute in and already know this makes for a great weekend project thanks!

  • @thefuntech2810
    @thefuntech2810 Жыл бұрын

    It Tooks me 2 days to understand and built this project by your video very nice video and explanation keep growing may your channel get a million subscriber .

  • @djcaly84
    @djcaly84 Жыл бұрын

    Pro tip: In Sublime, you can save the file name directly if you write it on the first line, and press Ctrl/Cmd + S and Enter/Return. I always do Ctrl + N , write the file name in the first line of the file, Ctrl + S, Enter, Ctrl + A, and start typing whatever.

  • @ambertrail6665

    @ambertrail6665

    Жыл бұрын

    Pro tip: Use VSC instead of sublime ;D

  • @-Hari-03
    @-Hari-032 күн бұрын

    accidentally watched over 3 hours of this while asleep. edit: damn this is actually good wtf

  • @zianjohnillustrisimo9375
    @zianjohnillustrisimo9375 Жыл бұрын

    So far this is the only proper Javascript game tutorial I have ever seen👆👍 👍👍

  • @RichardBrent90111
    @RichardBrent90111 Жыл бұрын

    Fantastic and professional video, thank you.

  • @its.arjun.s
    @its.arjun.s Жыл бұрын

    You're stuff is amazing! Very informative. Also, could you tell about how you would go around making a replay system for a game?

  • @sonomacoastfilms
    @sonomacoastfilmsАй бұрын

    so awesome... man I wish I knew this like 30 years ago

  • @spanfabrik
    @spanfabrik Жыл бұрын

    Chris, the effort, time and love you put into your tutorials is VERY MUCH appreciated. Words can hardly express how much I appreciate what you are publishing here on this channel. The code is easy to read and easy to follow along. For me as a former C# developer (about 12 years ago, back in the days) this is very helpful. I wanted to write a ToDo-List app using HTML and JavaScript. Then I stumbled upon your KZread channel, now I seriosly need to create a 2d platformer :). After I am done with this course here I will definitely check out the premium stuff on your homepage

  • @JorgedelCampoAndrade
    @JorgedelCampoAndrade9 ай бұрын

    Simply grateful for this great tutorial and all your background work to complete it and share it.

  • @m1kegame_dev456
    @m1kegame_dev45622 күн бұрын

    I love these videos, I do. But I am getting g sick and tired of waking up to them

  • @trooperware486
    @trooperware486 Жыл бұрын

    I'm enjoying this course a lot and I can't wait for the next steps. I'm trying to use classic sprites in your development, but when I dowload a sprite sheet, animations frames are not the same width. My question is: should I adapt development to get position, width and height for every frame or preprocess sprite sheets?

  • @aylictal
    @aylictal Жыл бұрын

    @Chris Courses @3:08:25 your method to fix this is one way to fix it, but a better way to fix it (especially in very fast simulations) is to untie your update loop from your render loop. Using this will make you able to set your velocities essentially infinitely fast while still updating in between the position based upon delta time. It does make physics much more cumbersome to deal with in games, but it also preserves things like a velocity going so fast that it can warp through collision detections. It will also make physics much more predictable in that it doesn't matter what speed the RAF is firing, the player jumping will remain consistent in rising and falling. Here is a boilerplate I use to achieve this, however any value being modified in this.update needs to be multiplied by that dt argument to simulate the "in between phases" that aren't going to be drawn on screen. Think of them as intermediate updates between render frames. I included a dumbed down version of an enemy class to show how it can be used. class Enemy { constructor(args) { //whatever } update(dt) { //example of how to use delta time this.x += this.vel * dt } render(ctx) { //etc } } class Game { constructor(){ const canvas = document.createElement('canvas') document.appendChild(canvas) this.ctx = canvas.getContext('2d') this.dt = 1/60 this.last_time = 0 this.accumulated_time = 0 this.entities = [] this.entities.push(new Enemy(args)) } tick(time){ this.accumulated_time += (time - this.last_time) / 1000 //if a user leaves the tab. RAF will stop firing, however the following while loop condition could get stuck otherwise due to time still increasing. this is a stop limit in those cases: if (this.accumulated_time > 200) this.accumulated_time = 200 while (this.accumulated_time > this.dt){ this.entities.forEach(e => e.update(this.dt)) this.accumulated_time -= this.dt } this.entities.forEach(e => e.render(this.ctx)) this.last_time = time //mock pretending if client got 5fps behavior //setTimeout(this.tick.bind(this), 1000/5, performance.now()) requestAnimationFrame(this.tick.bind(this)) } }

  • @aylictal

    @aylictal

    Жыл бұрын

    I had to research a lot on this and should probably give credit to Glenn Fiedler "Fix Your Timestep" article he wrote a few years back. He wrote his in java and I tailored it for JS in my example, but it works pretty solidly even with very fast moving objects and collisions.

  • @myfavost
    @myfavost Жыл бұрын

    This is some amazing stuff. You got a new sub! also can i ask for something? Can you provide a tutorial on how to animate a character with just body parts and not a sprite sheet? If that is too much in vanilla maybe create a bone animation in spine or something and implement that in a game. Really can't find much material on that. Thank you!

  • @vitoralecrim
    @vitoralecrim11 ай бұрын

    Hello, fantastic class! I'm really enjoying it! I have a question. Once I complete the entire project, I'd like to replace the warrior sprite with one I discovered, but it has a different height. Is there a method to modify the crop box in order to scale any sprite height to a specific size for the player sprite? This way, I can easily switch sprites without concerning myself with their actual dimensions.

  • @SandeepKumar-my7pk
    @SandeepKumar-my7pk Жыл бұрын

    great work man!

  • @alsq110
    @alsq11016 күн бұрын

    I fell asleep and woke to this

  • @Flipper_Auu
    @Flipper_Auu Жыл бұрын

    chris your videos is so much clear and smooth with no complicated code thank u from bottom of my heart my young brother learn from u and he ststed creating his dream game

  • @Mind--Blow
    @Mind--Blow Жыл бұрын

    hey Chris , i made it thanks for course!

  • @2dapoint424
    @2dapoint424 Жыл бұрын

    Chris, can you create a simple 3D game using three.js?

  • @worldbest3097

    @worldbest3097

    Жыл бұрын

    it gonna be awesome

  • @shazam314

    @shazam314

    Жыл бұрын

    Have you heard of 'Sougen'?

  • @HuynhLuong227

    @HuynhLuong227

    Жыл бұрын

    @@shazam314 it's beatifull

  • @HuynhLuong227

    @HuynhLuong227

    Жыл бұрын

    me too, hope Chris move to game 3D with threejs

  • @newuser689

    @newuser689

    Жыл бұрын

    @@shazam314 sougen on deez balls?

  • @ucstudiotv
    @ucstudiotv8 ай бұрын

    Hi Chris, I used the platformer logic you taught us to create an adventure game, using panning and a camera box. however, the panning method you taught us seems very buggy. sometimes it works properly and the player can pan in all four directions north, south, east, and west. but sometimes the player doesn't pan at all. Can you help me to solve this problem? I would really appreciate it thank you.

  • @otisrancko
    @otisrancko Жыл бұрын

    This is awesome....it would be great if it had more levels and other great features....I just dockerized it!

  • @joao.pinheiroa
    @joao.pinheiroa Жыл бұрын

    Really great tutorial! And I think this changes I made are a fix for 2 bugs at once: teleporting to the up platform and when falling fast go through it. I set a max gravity value (which even we irl have) of 7. So it stops accelerating. I added 3 to the hitbox height when cauculating if there was a collision in a platform, so it detects the collision a little before it occurs so it have more time to react, so the risk of the oine player frame beeing before and the other after the collision box is now gone. And added 1 to the platform collision box height just to make sure. And as the collision box of the player goes a little more down than the player, the 'teleportation' to the up platform when it shouldnt is also gone. :) There are any problems related to this solution?

  • @tobbe8287
    @tobbe8287 Жыл бұрын

    What tool do you use to draw arrows and lines on the screen when demonstrating and explaining?

  • @prashlovessamosa
    @prashlovessamosa Жыл бұрын

    Your channel is heaven to me.

  • @azureharris8647
    @azureharris86479 ай бұрын

    Hey so im following your content and was doing well up to 51 minutes with tiled. I downloaded Tiled and added the picture. but when I click export as, it doesnt give me the option to grab javascript files. Any suggestions ? I really wanted to complete this project

  • @SamiullahKhan

    @SamiullahKhan

    25 күн бұрын

    i already have no experience with tiled, so I skipped that part by copying collisionBlock and platformCollisionBlock array from data.js file in the linked repo file. I finished the tutorial that way. You can alway improve the process later

  • @Frankslaboratory
    @Frankslaboratory Жыл бұрын

    Nice one Chris!

  • @djneils100
    @djneils100 Жыл бұрын

    amazing content! thanks

  • @Denis-di6hc
    @Denis-di6hc Жыл бұрын

    I downloaded this video cause this kind of brilliant shouldn't be lost

  • @hippiehans
    @hippiehans Жыл бұрын

    Very nice tutorial! 🙏

  • @i3looi2
    @i3looi2 Жыл бұрын

    For the gravity/velocity issue, isn;t it better to just cap the max-speed ? Since that's also how RL works. You cannot build momentum indefinitely. And also you would not like the game visuals to move faster than intended.

  • @jeremymorris5355
    @jeremymorris5355 Жыл бұрын

    This is great! Thanks!

  • @ghamaw
    @ghamaw Жыл бұрын

    Thanks, the tutorial you made was really helpful chris! by any chance do you plan to make a video tutorial on making a simulator game like stardew valley in the future?

  • @suggestname1
    @suggestname1 Жыл бұрын

    Hi Chris, i appreciate your tutorials, its possible to make a diagonal walk plataform ? like > " / ", move like sonic game.

  • @zohaibqurban7386
    @zohaibqurban7386 Жыл бұрын

    i love your ideas

  • @chrystian4517
    @chrystian4517 Жыл бұрын

    Thanks a lot for the video

  • @MaximoJoshua
    @MaximoJoshua Жыл бұрын

    one other question was why loop in the gravity collision detection example? Couldn't you say, "If the bottom of the player would be below the bottom of the canvas, set their position to be at the bottom"? like if they were going to fall 1.5 pixels, but can't, fall the remaining amount then stop

  • @mdhossen7082
    @mdhossen7082 Жыл бұрын

    wow awesome, Thanks

  • @Coding_Asmr_PraDev
    @Coding_Asmr_PraDev Жыл бұрын

    Thanks for the great content. 1 Que how much it take for u to create video this long?

  • @user-pi4hl3bu2o
    @user-pi4hl3bu2o8 ай бұрын

    chris is one of the best coder🤩🤩

  • @abdullahnaim10
    @abdullahnaim10 Жыл бұрын

    Thank you for this amazing tutorial!!! Is anyone have issues with the sprite onload part? Iv been stuck on it for days and cant figure out why the sprite isnt colliding after removing the declared width and height from the player class and using the onload function in the sprite class instead. Would appreciate any help and thank you!

  • @meetmulani7017
    @meetmulani7017 Жыл бұрын

    Sir, can you make a video or tell me which programming books you prefer to learn js as a beginner like me.

  • @kytosai
    @kytosai Жыл бұрын

    I really want to buy your courses, but I can't listen to English well. So I'm really looking forward to this feature. I really hope you'll look into this. Thank you!

  • @ukaszmrowka3213
    @ukaszmrowka3213 Жыл бұрын

    Hi, Great work! what is the name of the app for the todo list? Thanks.

  • @matteociprandi3968
    @matteociprandi3968 Жыл бұрын

    Hi, i like your method to teach, thanks very much for what u doing. I have a question, why u use javascript not unity ??

  • @zev108
    @zev108 Жыл бұрын

    isn't it better to create the "collision blocks" in tiled using "Object Layers"?

  • @gflaap
    @gflaap Жыл бұрын

    Hi Chris, great work! Will you continue this tutorial and will it be part of the premium section and uploaded on your website? Can't find the course there yet ;)

  • @ChrisCourses

    @ChrisCourses

    Жыл бұрын

    Haven't decided just yet, have to finish off some of the other courses first like Pacman, Pokemon, and Fighting Game. But can definitely add it to the site if you'd like to view there instead, just let me know 🙏

  • @gflaap

    @gflaap

    Жыл бұрын

    @@ChrisCourses Sounds Great! I would love to See this course also in your Website. I‘am currently doing the Space invaders tutorial and have just finished adding Sound effects 🔥👍🏻

  • @ChrisCourses

    @ChrisCourses

    Жыл бұрын

    @@gflaap ok great! I'll upload those today for ya

  • @gflaap

    @gflaap

    Жыл бұрын

    @@ChrisCourses Great, really appreciate. Best regards from Germany ✌🏼

  • @adolphineatingchildren2641
    @adolphineatingchildren2641 Жыл бұрын

    Really good course do you know of a way to make the pixel look crisp

  • @soumelee5661
    @soumelee5661 Жыл бұрын

    it looks so cool wowo

  • @dafrdev3333
    @dafrdev3333 Жыл бұрын

    When using requestAnimationFrame() we don't need use the delta time, since requiestAnimationFrame is based on the displlay refresh rate right? So there is not problems whith the game speed being different on a player at 60fps and other 144fps?

  • @NETANELPL
    @NETANELPL Жыл бұрын

    When the guy is running to the left his legs are moving clockwise, backwards compared to the direction he is going. Looks like Michael Jackson moon walk :-) You probably need to iterate the animation images in reversed order for this case. Great quality tutorial, BTW. Thanks.

  • @calebprenger3928
    @calebprenger3928 Жыл бұрын

    Drawing a rectangle over all existing canvas drawing is not the advised way of clearing. You want to use "context.clearRect" method

  • @coreyrobertmalone4590
    @coreyrobertmalone45905 ай бұрын

    Hi Chris. I love your videos. I got to 2:30 : 55 and my guy teleports up ontop of the red ledge instead of stopping at the red collision blocks at the left of the screen. Any ideas why that might happen ?

  • @ajayshekhawat2292
    @ajayshekhawat2292 Жыл бұрын

    thank you bro

  • @onurgul3689
    @onurgul36896 ай бұрын

    Its nice but the map is limited and everytime the blocks are in the same position how i can change it ? I want to create endless map to the up and blocks randomly located

  • @Kurai_Isshin
    @Kurai_Isshin Жыл бұрын

    Hello, just finished coding this and it worked. I was wondering if you could do a Yugioh type game next

  • @dannieamme8180
    @dannieamme8180 Жыл бұрын

    What does the code look like for the Screen moving up or down in relation to the character (main Object),So when the Character falls,the background moves up And when the Character moves /jumps up the Background moves down

  • @enmanuelcolina4203
    @enmanuelcolina420310 ай бұрын

    hola, se supone que camera es como todo la vision del mapa, mientra sque camerabox es la de vision del jugador? se puede entender asi?

  • @Ketchup911
    @Ketchup9114 ай бұрын

    How does he draw the diagrams on screen ?

  • @Dj_Shalenec
    @Dj_ShalenecАй бұрын

    i have a problem: x postion change going smooth, but y changed abruptly, it just teleport player when jump, for example

  • @EduardKaresli
    @EduardKaresli6 ай бұрын

    Hi Chris, very nice work, but I am curious, have you managed to monitize your web games in any way? Are web games still a feasible business in 2023?

  • @mohammadfouad6706
    @mohammadfouad6706 Жыл бұрын

    Amazing :D

  • @Pyhia
    @Pyhia2 күн бұрын

    Again I wake up to this

  • @ArtcodEAscetik
    @ArtcodEAscetik2 ай бұрын

    nice tutorial ! maybe it would be better to use State pattern for Sprite Swapping ?

  • @Quake1dan
    @Quake1dan Жыл бұрын

    Great work chris! Would you consider doing a super auto pets clone? Much love :)

  • @aliceonabanjo1077
    @aliceonabanjo1077 Жыл бұрын

    Hi Chris,how do you make money through game development,and is javascript great for that tacks because most people don't play game online anymore

  • @mrakov
    @mrakov Жыл бұрын

    Just a small question: why didn't u use event emitter(subscription) model but all the time add different action to the different part of script(just a newcomer in web games that's why asking for)?

  • @SamiullahKhan

    @SamiullahKhan

    25 күн бұрын

    i think the author went with the simplicity, thought a lot of things could be improved

  • @lukasmarvan5209
    @lukasmarvan5209 Жыл бұрын

    Díky!

  • @luigiistratescu2756
    @luigiistratescu2756 Жыл бұрын

    HI, I have a question I'm just curious. Let's say you make a game or an app and you have people play it online. Since anyone can see your JS code in the webbrowser as well as HTML and CSS, how do you know they won't copy/steal it and make a copy of your app/game?

  • @learningXode-NG
    @learningXode-NG Жыл бұрын

    Nice One !

  • @dilipsharma615
    @dilipsharma615 Жыл бұрын

    Amazing...

  • @fonzanedelungini
    @fonzanedelungini Жыл бұрын

    when you said you like using sublime text, I had to check when this video was uploaded.

  • @marcelo.victor
    @marcelo.victor Жыл бұрын

    If his videos are this level quality, i wonder his course...

  • @samuelardelean7037
    @samuelardelean70377 ай бұрын

    Hi Chris! You are amazing! I followed your Game Courses and they fill me with joy. Thank you for the game assets and incredible explanations. I wanted to add something to the project, I wanted to start first with the "Attack" feature so I tried to add a new event for the key "X" to switch animation, but in the game assets there are 3 animations for attack and they load too fast or too slow. anyway I know something I am doing is wrong. Can some help me fix this issues? [keydown event] switch(event.key) { .... case 'x': keys.x.pressed = true; break; ..... } animations: { ..... Attack: { imageSrc: './img/warrior/Attack1.png', frameRate: 4, frameBuffer: 3 }, ...... }; if (keys.x.pressed) { player.switchSprite('Attack'); } else { player.switchSprite('Idle'); }

  • @razorjhon2622
    @razorjhon2622 Жыл бұрын

    Hey Chris , can i ask u why u don't use three js instead ?

  • @amysutton6940
    @amysutton6940 Жыл бұрын

    [1:06:51] So for some reason, when I add the console.log command to my index.js file, it will not log out the array. It works fine if I put the console log in the collisions.js file. So I know the collisions file is linked properly to the html file, but for some reason the index.js file cannot access it. Any thoughts?

  • @amysutton6940

    @amysutton6940

    Жыл бұрын

    Nm. Figured it out. I had put the collisions.js script link in AFTER the index.js link in the HTML file.

  • @ChrisCourses

    @ChrisCourses

    Жыл бұрын

    Yeah a common problem when ordering files. This is solved using modules in JavaScript, but that’s a whole mother topic for learning. The Mario course shows it off quite well 👌

  • @expertsystem6379
    @expertsystem6379 Жыл бұрын

    Why don't you just flip you spring using CTX.transform, instead of using another sprite?

  • @quochoangang6014
    @quochoangang601411 ай бұрын

    Hi Chris! Can you make the PixiJS Game dev tutorial???

  • @anth0ni33
    @anth0ni333 ай бұрын

    I LOVE THIS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  • @puneet007
    @puneet007 Жыл бұрын

    doubt : Sir you didn't used the semicolon ( ; ) on any line . Please tell me if any one it would be helpful

  • @chetan9533

    @chetan9533

    Жыл бұрын

    semi colon is optional in javascript, even if you don't add it, it won't cause any issues most of the time

  • @WardofSquid
    @WardofSquid Жыл бұрын

    Useful timestamps: 15:00 - how to edit/update your gaming website

  • @yamen_727
    @yamen_7274 ай бұрын

    ياخي ليش مافي ابداع عربي مثل هذا الأخ 😢😢😢😢😢😢

  • @bogxd
    @bogxd Жыл бұрын

    Those transitions haha, teach me

  • @Zer-qs3du
    @Zer-qs3du10 ай бұрын

    @ChrisCourses Hey Chris, I followed all your code but I am having issue with the 'getContext' part. I tried searching the web and followed the instruction but it is still not working and giving me error message "Uncaught TypeError: Cannot read properties of null (reading 'getContext')." If you could tell me how to fix this issue then it would be awesome! Thanks in advance!

  • @SamiullahKhan

    @SamiullahKhan

    25 күн бұрын

    The canvas element is undefined in your case.

  • @Aarmaxian
    @Aarmaxian Жыл бұрын

    Can Hostinger host nodejs web sites? I write games that use nodejs and code running in nodejs for saving game data.

  • @Dj_Shalenec
    @Dj_ShalenecАй бұрын

    Is it possible to create a hitbox by simply deleting all transparent pixels on the frame?

  • @SamiullahKhan

    @SamiullahKhan

    25 күн бұрын

    Initially I also thought like that, why we are going all the effort of trial and error. May be it's a standard practice as every sprite will have those margins. but i am curios to know

  • @doctorjcw5857
    @doctorjcw5857 Жыл бұрын

    If you skip the domain part of this, can it still work, and if I make my own website, can I use these same steps to put it onto my own website?

  • @ChrisCourses

    @ChrisCourses

    Жыл бұрын

    Indeed, you can still use the same code on any hosting provider

  • @doctorjcw5857

    @doctorjcw5857

    Жыл бұрын

    @@ChrisCourses okay thanks

  • @abhilashLeader_07
    @abhilashLeader_07 Жыл бұрын

    1 doubt....plz help me solve that Hello Sir, I hope u r having a good day :) Actually i m having a doubt in javscript which i want to clarify... i m trying to make a javascript game in which i am having a player a projectile array and an enemy array i m having a 'gameFrame' variable with initial value 0 and a value of '1' is incremented to it at eveny frame of the game it basically calculates the number of frames of the game i m having an animate function which calls itself again and again (recursion) by requestAnimationFrame() inbuilt function of javascript.... now i want to generate a enemy every 10 frames for that i write this code : function enemy(){ if(gameFrame % 100 ==00) enemeies.push(new Enemy()); for(let i = 0;i

  • @nein9420

    @nein9420

    Жыл бұрын

    for(let i = 0;i

  • @abhilashLeader_07

    @abhilashLeader_07

    Жыл бұрын

    @@nein9420 no no thats typing mistake i ve done these but.....no improvement