JavaScript Fighting Game Tutorial with HTML Canvas
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
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
the solution is superb. Congratulations!
Amazing 😊
Very great tutorial you have man!
Hammer🔝 😍Attractiveshot
Thank you for such excellent tutorials!!!!!
broo tysm
great tutorial !
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.
Thanks! Bro
I love this but please if not for assets link I would have not download kenji how do you download yours
Bro this is the best tutorial ive ever seen omg
I'm confused
the code is extremely messy
what app did you used my sensei?
you should get tested for dementia
for enemy attacking, actually you need this function at 'keyup'
case 'ArrowDown':
enemy.isAttacking = false
break
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?
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
Please its a year later and I'm getting an error when using the if and else statements 😭😭😭
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?
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.
you are amazing btw xd
has anyone else gotten a bug where when the enemy attacks, their attackbox just stays there until it hits the player?
muchas gracias aprendi mucho 😀😀😀😀
Wonderful content, thank you so much for putting the time. Learned a lot 🙂
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 😊
He really just woke up and chose mediocrity
Great tutorial!!
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
nice tutorial I respect the idea but your code must be experiencing black hole levels of tidal forces
Try to say I want to make my own game again.
it works, thanks for the tutorial
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.
what if you want to put in your own characters
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
Timestamps:
Using canvas API: 7:50
Creating animation: 15:00
Both players at a perfect position as required: 27:00
how to change the background so that it is clearly sized with Canvas?
why my attack works and disappears with the player well, but with enemy it remains when I release the attack button
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?
How are you converting from inline to block style so quickly? For example at 2:26:08.
Well done
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…😊😊😊
🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯🤯
someone know why my console is doing
"go
go
go
"
instead of
3 go