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
Vansh S
29.11.2022Bro ..You are Literally Awesome …Loved this Video..and this is the best project I have ever made by watching from Youtube ….You are the Best ❤
Free Koding
29.11.2022incredible
Constantinos Lambrides
29.11.20221:08:12 when I create the function for the attackbox collision, when I replace player and enemy with rectangle1 and rectangle2 respectively it shows an error on the first dot (rectangle1.attackbox) and when I delete it it shows an error on the next dot and so on
Any fixes?
Thien
29.11.2022love this tutorial but something that i noticed when watching is that you always type your code at the bottom of the screen and it's kinda hard to see sometime due to the YT progress bar blocking it
MiniboyDev
29.11.2022I don't understand why JavaScript developer like to set variable = undefined more than set variable = null ? What is difference and What is better ?
Cavalord
29.11.2022Awesome vid man.
Quick question.. do you know if live server can fail to detect the collision between in the Attack section?
also VSCode is giving me an unreachable code error with the collision function
return
(
rectangle1.attackBox.position.x + rectangle1.attackBox.width >= rectangle2.position.x &&
rectangle1.attackBox.position.x <= rectangle2.position.x + rectangle2.width &&
rectangle1.attackBox.position.y + rectangle1.attackBox.height >= rectangle2.position.y &&
rectangle1.attackBox.position.y <= rectangle2.position.y + rectangle2.height
)
any ideas?
Vedant Kanoujia
29.11.2022why Im fking noob in everything
w86p
29.11.2022Maybe side question… but what todo app is this? 😛
Motion Pie
29.11.2022First time i see full video tutorials, the videos is so helpfull with beginner like me, actual i had some problem with push live because i use Window Operation but it have NOT had problem yet! Thanks you so much 😍😍😍
Brandon
29.11.2022Finally finished my version
Филипов Никита
27.11.2022Oh , this is game is absolutely amazing , looking for the time that was for the game , else you were explaining so , you have spend some time for this . I think this will cost 500$ for this beautiful and gorgeous game .
qiang gao
27.11.2022hello, I have some problems: 1、My sprites can jump more than once and jump out of the screen. 2、The sprites can run outside the left and right edges of the screen
Felix Fimbu
27.11.2022Hi everyone.
I've started this great tutorial but I'm stuck on the "Player Sprite Run". I have this error "player.Sprites is undefined". Any kind soul would like to help? 🥲 Thanks 🙏
Daniel Souza
27.11.2022BROTHER, YOU ARE THE BEST!!! You oooh really helped me!! THANK YOU VERY MUCH!
dlrpanda
27.11.2022Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state.
getting this error when loading my background sprite and my code is exactly like his any help?
Red Black
27.11.2022and my friends are planning to make a ga and i'm making the soft, so tNice tutorials really helped
PROGRAMMER LIFE
27.11.2022Which software are you using
Will it work if vs code is used
Do reply please
David Toman
27.11.2022finally finished the tutorial and it was worth it, thanks for the good tutorial
LuxanM
27.11.2022Thank you so much for this Chris, amazing tutorial. Better than any paid tutorial I ever tried.
Donnie Dollarz
27.11.2022That shop was used in idleon also
Sawdust Passion
24.11.2022Amazing tutorial thank you!
Nikhil Kumar Jamwal
24.11.2022Really helpful video!👍
Can you make a video on multiple key press game movements?
I followed your game key movements logic and did the same but my player moves only in one direction at a time i don't why.🤔
Patryk Romańczyk
24.11.2022I did added this to KeyUp event to work like it should (i think) :
window.addEventListener('keyup', (Event) => {
switch (Event.key) {
case 'a':
key.a.pressed = false
lastKey = 'd'
break;
}
switch (Event.key) {
case 'd':
key.d.pressed = false
lastKey= 'a'
break;
}
Curtis Menzies
24.11.2022best beginners JS implementation of a PvP game. You nailed it bro!
RAJU BHAI
24.11.2022.
machouch zaiden
24.11.2022im not usre if missed a part but when i press jump i can keep jumping for ever
Антон Шевченко
24.11.2022что-то на уровне сега
brokenwing bird
24.11.2022great work
GoodiFY
24.11.2022Your videos are cool and moderate, I'm in 25 minutes an I want to ask how to use the EventListener 'keydown' when coding with phone.
Daniel
24.11.2022Wow! This is what I need! I've planned my game which I've called 'Caver' which is inspired by Terraria, Forager and Minecraft. It uses a turn based strategy fighting mechanism, random cave generation, building and breaking blocks, random block generation, and is basically if Terraria and Forager had a baby and added mechanics of Minecraft. Yes, it might take me decades, but it's what I dream of, and I'm up for it! After all, Minecraft wasn't programmed in a day!
FrDemonten
23.11.2022GG M8
Mac-Cygwin
23.11.2022how do i add background music to the game, the audio does not play when i use the netlify website
Zumkay
23.11.2022112 minutea
Hollow Rivers
23.11.2022Is it just me or are the players allowed to jump infinitely upwards?
Daniel Meadows
23.11.2022whats the software??
James R
23.11.2022I have a question! First off I want to say, thanks for the tutorial! It's really easy to follow and is exactly what I was looking for. Now as for the question, I was following along the tutorial and got to the end of task #2, however, I was able to infinitely just jump with both UpArrow and the w key. Did I miss something and how do I fix that?
bao
23.11.2022Hey Chris, I was wondering if there is a way to make the second player move and attack randomly like an AI? PS. great tutorial! one of if not the best one on yt so far.
J_Net Reloaded
23.11.2022wheres the code please your github???
Alejandro Marin Garcia
23.11.2022you are an artist
Henry Liu
23.11.2022I have a bug and don't know where it is
Henry Liu
23.11.2022liar and cheater
HawkC22
23.11.2022this doesn't work with window
Michael Harris
23.11.2022😅
Anonymous
23.11.2022Hey guy❤ , can you tell me how to creat bot vs player
BabyFrontent - школа фронтенд разработчиков
23.11.2022I should note that from an architectural point of view, this code is incorrect. It is only suitable for giving beginners an idea of how the game loop works. In a real project, the sprites must be combined into one file, and the game object must have a state of what it is currently doing. This state should control the sprites, and not vice versa, as it turns out during the lesson.
It is also worth mentioning the lack of optimization and a bunch of redundant code. We don't have to do math in every frame like we did in function draw of the Sprite class, and all those draw values, like "this.image.width / this.framesMax * this.scale", should only be calculated once when changing the action the character performs. This will greatly improve performance.
Not to mention code optimization, where in function switchSprite the entire cumbersome switch statement can be replaced by 5 lines of code using square brackets.
AdrenalSnake REX
23.11.2022hey im having an issue with the attack detections, there seems to be a delay between when one of the players attack then like a second, and then the other player takes damage, its like it doesnt detect the damage until the attack animation is over and it goes into the idle animation
Rereloluwa Aiyemomi
23.11.2022Hello. Please how would I go about programming the ai for the other fighter to perform simple actions on it's own
Riptide Sans
23.11.2022Dude, when i pressed the space key, the enemy rect just flew off to the right-
can someone help me-
Lao Cong
23.11.20222:00:00
Lao Cong
23.11.20222:30:00