Vertical Platformer Game Tutorial with JavaScript and HTML Canvas

Поділитися
Вставка
  • Опубліковано 26 січ 2025

КОМЕНТАРІ • 350

  • @ChrisCourses
    @ChrisCourses  2 роки тому +136

    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 2 роки тому +7

      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 2 роки тому +1

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

    • @brunoferreyra3486
      @brunoferreyra3486 9 місяців тому +1

      O

    • @tara-nay
      @tara-nay 9 місяців тому

      Wq

    • @darthpromenaderpaprika5252
      @darthpromenaderpaprika5252 9 місяців тому

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

  • @-Hari-03
    @-Hari-03 8 місяців тому +139

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

    • @meqativ
      @meqativ 3 місяці тому +1

      i woke up to this comment on screen and the video is at 1:36:05(i did not open it)

  • @d0senB13R
    @d0senB13R 9 місяців тому +296

    I woke up here again!

  • @m1kegame_dev456
    @m1kegame_dev456 9 місяців тому +108

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

  • @3low232
    @3low232 7 місяців тому +35

    Ok. Why in the actual fuck have I gone to sleep and my phone decide to watch this?

    • @razgriz3711
      @razgriz3711 6 місяців тому +7

      Half of the people here have the same problem. This is my 3rd time having this come on after falling asleep...

  • @captainMony
    @captainMony 7 місяців тому +48

    This is uncanny how many people wake up to this, including me

  • @NothinglfNot
    @NothinglfNot 8 місяців тому +84

    Fell asleep watching Kurtis Conner, woke up here. Feelin’ good.

    • @fyoozhn
      @fyoozhn 7 місяців тому +1

      WTF SAME

    • @desbanngmd
      @desbanngmd 7 місяців тому +6

      holy shit i was watching drew gooden

    • @razgriz3711
      @razgriz3711 6 місяців тому +5

      I was watching Danny Gonzalez lol

    • @WALKMAN-12
      @WALKMAN-12 6 місяців тому +2

      I was watching ethan is online

    • @juniornoodles6587
      @juniornoodles6587 6 місяців тому

      I was watching vsauce

  • @uhhDotpy
    @uhhDotpy 8 місяців тому +53

    Why the fuck do i keep waking up to this specific video. This is the 4th time

  • @BlanfardMSM
    @BlanfardMSM 7 місяців тому +18

    Why do I keep waking up to this 😭

  • @rozelia_the_octo06
    @rozelia_the_octo06 4 місяці тому +5

    I love how literally no one knows how they got here. I keep waking up to 3+hr videos and this is the second time I've landed on this one

  • @aqua-bery
    @aqua-bery 5 місяців тому +6

    I feel like, the closer the time is to midnight, the higher the chance for this video is to show up

  • @trixelized912
    @trixelized912 Рік тому +16

    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  Рік тому +3

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

  • @FoxSock
    @FoxSock 8 місяців тому +16

    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

  • @cedric_mllr
    @cedric_mllr 9 місяців тому +881

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

    • @Oxyopiia
      @Oxyopiia 9 місяців тому +21

      actually me

    • @account-pi3nj
      @account-pi3nj 9 місяців тому +18

      On god!

    • @ricelordalt9183
      @ricelordalt9183 9 місяців тому +18

      This is my second time

    • @greatswiss4252
      @greatswiss4252 9 місяців тому +21

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

    • @Gumisprettygood
      @Gumisprettygood 9 місяців тому +17

      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

  • @MB-jh7fy
    @MB-jh7fy 25 днів тому +1

    I keep waking up to these videos

  • @micemincer
    @micemincer 2 роки тому +147

    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 2 роки тому +6

      “Without product placement”? LOL

    • @micemincer
      @micemincer 2 роки тому +3

      @@ThomasGiles LOL - don't watch it then

    • @oliveryt7168
      @oliveryt7168 2 роки тому +10

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

    • @micemincer
      @micemincer 2 роки тому +2

      @@oliveryt7168 corrected

    • @Ayoubased
      @Ayoubased 2 роки тому

      @@micemincer oof the salt

  • @Weebiekage
    @Weebiekage 2 місяці тому +1

    I woke up in a room tied to a chair. I looked around, yet all I found was this video. It was already finished so Idk what it was about, but I do feel smarter

  • @EDF1919
    @EDF1919 3 місяці тому +1

    This is like the 3rd time I've fallen asleep with youtube on and woken up to this exact video

  • @ej3fm494
    @ej3fm494 Рік тому +3

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

  • @qxirtsa
    @qxirtsa 5 місяців тому +2

    I KEEP WAKING UP TO THESE VIDEOS

  • @tonussi
    @tonussi 10 місяців тому

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

  • @mohamed745600
    @mohamed745600 2 роки тому +4

    I appreciate the production quality of these videos.

  • @spanfabrik
    @spanfabrik 2 роки тому +12

    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 UA-cam 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

  • @lukasmarvan5209
    @lukasmarvan5209 Рік тому +1

    Díky!

  • @nikolaikilt
    @nikolaikilt 8 місяців тому

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

  • @thefuntech2810
    @thefuntech2810 2 роки тому +2

    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 .

  • @commandprompt7171
    @commandprompt7171 2 роки тому +4

    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!

  • @pabloqp7929
    @pabloqp7929 2 роки тому +1

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

  • @collinsk8754
    @collinsk8754 Рік тому +2

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

  • @sonomacoastfilms
    @sonomacoastfilms 10 місяців тому +1

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

  • @siya.abc123
    @siya.abc123 5 місяців тому

    I need to finally watch this video but it always plays deep in the night

  • @AaronAsherRandall
    @AaronAsherRandall 5 місяців тому

    I woke up again to this as well. Honestly this guy is so good and these projects look so cool. I really want to actually do one of these guy’s projects instead of just waking up to it! I would like to request a game done in React!

  • @2dapoint424
    @2dapoint424 2 роки тому +13

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

    • @worldbest3097
      @worldbest3097 2 роки тому

      it gonna be awesome

    • @shazam314
      @shazam314 2 роки тому

      Have you heard of 'Sougen'?

    • @HuynhLuong227
      @HuynhLuong227 2 роки тому

      @@shazam314 it's beatifull

    • @HuynhLuong227
      @HuynhLuong227 2 роки тому +1

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

    • @newuser689
      @newuser689 2 роки тому

      @@shazam314 sougen on deez balls?

  • @mikeo.4203
    @mikeo.4203 4 місяці тому +1

    So it’s highly probable if you leave UA-cam on it will end with this video. I was watching an IPhone video before falling asleep.

  • @prashlovessamosa
    @prashlovessamosa 2 роки тому +1

    Your channel is heaven to me.

  • @lucy-rr9ch
    @lucy-rr9ch 7 місяців тому +1

    i woke up here again, your voice is very nice to listen to tho!!

  • @Frankslaboratory
    @Frankslaboratory 2 роки тому +1

    Nice one Chris!

  • @JorgedelCampoAndrade
    @JorgedelCampoAndrade Рік тому +4

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

  • @aylictal
    @aylictal Рік тому +3

    @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.

  • @djcaly84
    @djcaly84 2 роки тому +3

    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 2 роки тому +1

      Pro tip: Use VSC instead of sublime ;D

  • @myra.b1
    @myra.b1 4 місяці тому +3

    Why is everyone including me waking up to this😭??

    • @Jo3harker
      @Jo3harker 3 місяці тому

      Idk but same😭

  • @zianjohnillustrisimo9375
    @zianjohnillustrisimo9375 2 роки тому

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

  • @procrastinationismyspecial9162
    @procrastinationismyspecial9162 7 місяців тому +2

    How did I get here? I dont even remember what video I was watching when I fell asleep 😅

  • @p1geon45
    @p1geon45 Місяць тому

    UA-cam app has this "feature" where it tells me its time to sleep. Skip that. But when I get this recommended, I know it's actually time. And i watch this daily to sleep in now. I don't even do frontend

  • @Arock9313
    @Arock9313 4 місяці тому +1

    Why did I wake up to this

  • @Coder112
    @Coder112 2 роки тому +1

    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

  • @AnnabelleMalpaya
    @AnnabelleMalpaya 5 місяців тому +2

    ok wait why is everyone waking up to this same vid tf

  • @Mind--Blow
    @Mind--Blow Рік тому

    hey Chris , i made it thanks for course!

  • @SandeepKumar-my7pk
    @SandeepKumar-my7pk Рік тому +1

    great work man!

  • @its.arjun.s
    @its.arjun.s 2 роки тому +12

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

  • @noonecz5201
    @noonecz5201 2 місяці тому

    UA-cam is trying to cram information into our head while we sleep :D

  • @Denis-di6hc
    @Denis-di6hc 2 роки тому

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

  • @SlimyS0ldier
    @SlimyS0ldier 2 місяці тому

    Guys, I fell asleep and this was fully watched

  • @RichardBrent90111
    @RichardBrent90111 2 роки тому

    Fantastic and professional video, thank you.

  • @MaximoJoshua
    @MaximoJoshua 2 роки тому +1

    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

  • @BraaDi
    @BraaDi 8 місяців тому +1

    I completed the course while sleeping.
    There’s no time to waste life is short.

  • @RetroGamerOG_
    @RetroGamerOG_ 8 місяців тому +1

    I keep waking up to this💀

  • @icewolvesplayz
    @icewolvesplayz Рік тому

    chris is one of the best coder🤩🤩

  • @tobbe8287
    @tobbe8287 2 роки тому +7

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

  • @coreyrobertmalone4590
    @coreyrobertmalone4590 Рік тому

    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 ?

  • @azureharris8647
    @azureharris8647 Рік тому +2

    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 9 місяців тому

      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

  • @zohaibqurban7386
    @zohaibqurban7386 2 роки тому +1

    i love your ideas

  • @noobish
    @noobish 7 місяців тому +4

    is there a sleep algorithm

    • @razgriz3711
      @razgriz3711 6 місяців тому +3

      There must be cause I've had this come up at least 3 times while I was sleeping

  • @vitoralecrim
    @vitoralecrim Рік тому +3

    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.

  • @Croc-eb6cf
    @Croc-eb6cf 4 місяці тому +1

    Learning how to code in my sleep 😴

  • @suggestname1
    @suggestname1 2 роки тому +2

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

  • @Maia-cx9qi
    @Maia-cx9qi 8 місяців тому +1

    Hello Chris,this is not related to the video well somewhat,everytime i fall asleep with youtube i wake up to one of your tutorials,this happened a couple a times and i dont know what to make of it

  • @NETANELPL
    @NETANELPL 2 роки тому

    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 Рік тому +1

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

  • @amysutton6940
    @amysutton6940 2 роки тому

    [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 2 роки тому +1

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

    • @ChrisCourses
      @ChrisCourses  2 роки тому +1

      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 👌

  • @Pyhia
    @Pyhia 8 місяців тому +1

    Again I wake up to this

  • @Jo3harker
    @Jo3harker 3 місяці тому

    Why the hell do i keep waking up to this video

  • @kytosai
    @kytosai 2 роки тому

    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!

  • @Coding_Asmr_PraDev
    @Coding_Asmr_PraDev 2 роки тому +1

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

  • @toxicunknown9219
    @toxicunknown9219 Місяць тому

    I woke up sore and an hour and a half into this video

  • @ukaszmrowka3213
    @ukaszmrowka3213 2 роки тому +1

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

  • @gflaap
    @gflaap 2 роки тому +2

    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  2 роки тому +2

      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 2 роки тому +1

      @@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  2 роки тому +1

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

    • @gflaap
      @gflaap 2 роки тому

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

  • @myfavost
    @myfavost 2 роки тому +4

    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!

  • @ghamaw
    @ghamaw 2 роки тому +1

    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?

  • @marcusdefgomes
    @marcusdefgomes 8 місяців тому

    It’s so good to listen to this while sleeping

  • @onurgul3689
    @onurgul3689 Рік тому

    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 2 роки тому

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

  • @hippiehans
    @hippiehans 2 роки тому

    Very nice tutorial! 🙏

  • @Croc-eb6cf
    @Croc-eb6cf 4 місяці тому +1

    Where's the patent for sleep detection on the phone

  • @WardofSquid
    @WardofSquid 2 роки тому

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

  • @otisrancko
    @otisrancko 2 роки тому +3

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

  • @Hbkhhjvtgk-v6z
    @Hbkhhjvtgk-v6z 8 місяців тому

    good idea to show hosting setup normally never shown

  • @assaultvb5759
    @assaultvb5759 7 місяців тому +1

    How did I end up watching 2 hour of making a game with Java script while sleeping

  • @EduardKaresli
    @EduardKaresli Рік тому

    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?

  • @Dj_Shalenec
    @Dj_Shalenec 10 місяців тому

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

  • @joshblosser35
    @joshblosser35 8 місяців тому +1

    Second night in a row I woke up here

  • @zev108
    @zev108 2 роки тому +1

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

  • @trooperware486
    @trooperware486 2 роки тому +2

    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?

  • @matteociprandi3968
    @matteociprandi3968 2 роки тому

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

  • @ArtcodEAscetik
    @ArtcodEAscetik 10 місяців тому

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

  • @yamen_727
    @yamen_727 Рік тому

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

  • @jeremymorris5355
    @jeremymorris5355 2 роки тому

    This is great! Thanks!

  • @Ketchup911
    @Ketchup911 Рік тому +1

    How does he draw the diagrams on screen ?

  • @enmanuelcolina4203
    @enmanuelcolina4203 Рік тому

    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?

  • @bogxd
    @bogxd 2 роки тому

    Those transitions haha, teach me