JavaScript Fighting Game Tutorial with HTML Canvas - lightslingergame.com

JavaScript Fighting Game Tutorial with HTML Canvas

Chris Courses
Views: 2118284
Like: 47948
Get 65 more hours of content from 200 additional lessons only at

Here you’ll learn how to create your very first fighting game with JavaScript and HTML canvas. We’ll start by coding some basic fighting game mechanics, then we’ll take things to the next level by adding in professional sprite sheets and graphics.

Google Drive Assets:

Finished Demo:
Source Code:

Oak Woods Assets:
Fighter Asset #1:
Fighter Asset #2:

0:00 Introduction
0:43 Project Setup
8:07 Create Player and Enemy
28:00 Move Characters with Event Listeners
50:12 Attacks
1:11:31 Health Bar Interface
1:34:27 Game Timers and Game Over
1:51:27 Background Sprite
2:05:10 Shop Sprite with Animation
2:23:08 Player Sprite – Idle
2:36:24 Player Sprite – Run
2:43:39 Player Sprite – Jump
2:58:03 Player Sprite – Attack
3:01:53 Enemy Sprite – Kenji
3:07:04 React to Sprite Attacks
3:20:32 Receive Hit Animation
3:29:11 Death Animation
3:35:32 Interface Design and Animation
3:49:55 Push Live
3:55:57 End

255 Comments

  1. Thanks for teaching me CTRL + D to select all the same words, min 2:54:35, I really needed that function for the almost 3 hours before 😀

  2. I have to say Thank you but the second person is not attacking he is just running backward and forward.

  3. Sometimes I forget why i love JS. You just made a noddle soup of a code there and works like a charm and no one should tell you is wrong ❤️

  4. Can anybody help me out I ran into a problem around 1:06 mins in with putting in an offset to change the player 2s attack I went over the code it all seems correct but nothing has changed:/

  5. Is it possible to make a game using high quality photos for the animations? Kinda like what they did with Mortal Kombat in the 90s but better

  6. the solution is superb. Congratulations!

  7. when I coded the sprite details after entering the rectangle width and height, when I opened it in the browser, the rectangle hasn't changed to black. I tried more than 10 times for it. Pls help.

    I also want to know if the black background in needed or not because we are already putting a backdrop later.

  8. I love this but please if not for assets link I would have not download kenji how do you download yours

  9. Bro this is the best tutorial ive ever seen omg

  10. for enemy attacking, actually you need this function at 'keyup'

    case 'ArrowDown':

    enemy.isAttacking = false

    break

  11. how do i make the health higher when i download this code? edit: how do i make the health bar be inline with the health when i change the health to 200?

  12. Did anyone run into problems with the attackbox argument in the fighter constructor? My attack boxes do not show on screen and have x and y null :/ no matter what I do in the sprites nothing changes, only if I declare it with a hardcoded value

  13. Please its a year later and I'm getting an error when using the if and else statements 😭😭😭

  14. The tutorial is amazing, I'm still watching it as I build my own project trying to decide how I want the characters to move, but I find that around 41:00 you add in case breaks for W, but suddenly the code is not there anymore? does the video cut off or am I missing something?

  15. can you guys help me? on minute 6:40, c.fillRect is not filling on my screen and the console says "uncaught typeerror cannot read properties of null (reading 'fillRect'). idk what to do.

  16. has anyone else gotten a bug where when the enemy attacks, their attackbox just stays there until it hits the player?

  17. muchas gracias aprendi mucho 😀😀😀😀

  18. Wonderful content, thank you so much for putting the time. Learned a lot 🙂

  19. I’m so grateful for the technology and how you can learn anything with the press of a button! Thank you for making this video 😊

  20. He really just woke up and chose mediocrity

  21. I need to know that if i added img as a control for mobile devices, does it work or not ? Can u help me plz

  22. nice tutorial I respect the idea but your code must be experiencing black hole levels of tidal forces

  23. this.position=position
    this.velocity=velocity
    this.width=50
    this.height=150
    this.lastkey
    this.attackbox={
    position:{
    x:this.position.x,
    y:this.position.y
    },
    width: 100,
    height: 50
    }
    in this code this.position.x is referring to x in this.position , so why this.position.x inside attackbox is not changing automatically with this.position ? can someone explain me in detail.

  24. what if you want to put in your own characters

  25. I've been learning to code for a month and when I saw the thumbnail I thought you're some kind of god. Well I wonder when I will reach such level

  26. how to change the background so that it is clearly sized with Canvas?

  27. why my attack works and disappears with the player well, but with enemy it remains when I release the attack button

  28. Hello! Thank you for this awesome tutorial. I have noticed that with more FPS everything runs faster. I have no idea why. Could you help me?

  29. How are you converting from inline to block style so quickly? For example at 2:26:08.

  30. Hi Chris… can you help me to code the jump problem, because everytime i click W even the character is on air he still jump, its better that when i click W double character will jump once is on ground, just to avoid double jump or multiple jump …. thank you i wait for response…. i love you Chris…😊😊😊

  31. 🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯

  32. someone know why my console is doing
    "go
    go
    go
    "
    instead of
    3 go

Leave a Reply

Your email address will not be published.