Premium Features
Download Video
Project Setup
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.
'%3e%3cpath%20d='M358.283,108.588H325.625a27.056,27.056,0,0,0-23.431,13.528L142.6,398.545a27.056,27.056,0,0,0,0,27.056l16.329,28.283a27.056,27.056,0,0,0,23.431,13.528H501.551a27.057,27.057,0,0,0,23.431-13.527L541.311,425.6a27.056,27.056,0,0,0,0-27.056l-159.6-276.429A27.056,27.056,0,0,0,358.283,108.588Z'%20fill='%232d0091'/%3e%3cpath%20d='M358.283,108.588a27.056,27.056,0,0,1,23.431,13.528l159.6,276.429a27.056,27.056,0,0,1,0,27.056l-16.329,28.283a27.056,27.056,0,0,1-23.431,13.528h-319.2a27.056,27.056,0,0,1-23.429-13.527L142.6,425.6a27.056,27.056,0,0,1,0-27.056L302.2,122.115a27.056,27.056,0,0,1,23.431-13.528h32.658m0-18.788H325.625a45.97,45.97,0,0,0-39.7,22.922L126.325,389.15a45.972,45.972,0,0,0,0,45.844l16.329,28.283a45.971,45.971,0,0,0,39.7,22.922h319.2a45.97,45.97,0,0,0,39.7-22.922L557.582,435a45.972,45.972,0,0,0,0-45.844l-159.6-276.429a45.971,45.971,0,0,0-39.7-22.922Z'%20fill='%23ffa800'/%3e%3cpath%20d='M341.953,139.6l-5.478,30.907-30.906,5.478,30.906,5.479,5.478,30.907,5.479-30.907,30.907-5.479-30.907-5.478Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M291.477,217.312l-2.829,15.96-15.96,2.829,15.96,2.829,2.829,15.96,2.829-15.96,15.96-2.829-15.96-2.829Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M392.43,217.312l-2.828,15.96-15.96,2.829L389.6,238.93l2.829,15.96,2.83-15.96,15.96-2.829-15.96-2.829Z'%20fill='%23f6ffff'/%3e%3cg%20clip-path='url(%23a)'%3e%3cpath%20d='M375.825,371.625l-11.05-52.146-22.821-1.649-22.821,1.649-11.051,52.146A94.7,94.7,0,0,1,223.973,446.3l-83.835,7.581v13.528H543.77V453.884L459.935,446.3A94.7,94.7,0,0,1,375.825,371.625Z'%20fill='%23ff8300'/%3e%3cpath%20d='M358.351,411.411l-.058-.366,6.3-67.507-22.635-6.732-22.634,6.732,6.3,67.507-.058.366a62.226,62.226,0,0,1-46.282,50.621l-21.386,5.38h168.12l-21.385-5.38a62.226,62.226,0,0,1-46.282-50.621Z'%20fill='%23ffa800'/%3e%3c/g%3e%3cpath%20d='M333.486,358.35a38.129,38.129,0,0,1,5.863,9.948h5.21a38.131,38.131,0,0,1,5.863-9.948,61.98,61.98,0,0,0,14.316-37.464l.037-1.406L356.1,273.318a107.3,107.3,0,0,0-10.381-29.927h-7.532a107.3,107.3,0,0,0-10.381,29.927l-8.674,46.162.037,1.406a61.98,61.98,0,0,0,14.317,37.464Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M321.6,306.142l.025.058.011-.058Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M352.568,312.053a66.825,66.825,0,0,0-1.722-15.07l-5.333-23.02a3.628,3.628,0,0,0-.749-1.575h0a3.632,3.632,0,0,0-6.369,1.575l-5.332,23.018a66.781,66.781,0,0,0-1.723,15.072h21.228Z'%20fill='%232d0091'/%3e%3cpath%20d='M334.109,330.421l3.456,7.476a4.656,4.656,0,0,0,8.778,0l3.456-7.475a29.99,29.99,0,0,0,2.769-12.59H331.34a29.981,29.981,0,0,0,2.772,12.594Z'%20fill='%232d0091'/%3e%3cpath%20d='M325.615,411.045h0a157.327,157.327,0,0,0-1.881-74.583l-4.6-16.983-9.7,45.792Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M358.293,411.045l16.186-45.774-9.7-45.792-4.6,16.984a157.348,157.348,0,0,0-1.881,74.582Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M281.335,340.43a26.973,26.973,0,0,0,29.034-20.944h0l-22.859-7.4v.016a13.37,13.37,0,0,0-9.851.15l-54.173,22.333Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M173.966,397.676l95.063-23.536a51.33,51.33,0,0,0,23.956-13.527l10.537-10.537,6.847-30.59Z'%20fill='%23f6ffff'/%3e%3cpath%20d='M373.538,319.486h0a26.975,26.975,0,0,0,29.035,20.944l57.849-5.847L406.249,312.25a13.477,13.477,0,0,0-5.138-1.017h0a13.461,13.461,0,0,0-4.714.867v-.016l-22.858,7.4Z'%20fill='%23ff4d1d'/%3e%3cpath%20d='M509.942,397.676,414.879,374.14a51.33,51.33,0,0,1-23.956-13.527l-10.537-10.537-6.847-30.59Z'%20fill='%23f6ffff'/%3e%3c/g%3e%3c/svg%3e)
Comments
Want to participate?
Create a free Chris Courses account to begin
A
AshLikeCoding posted 4 years ago
how would i go about implementing the ai?
pskvortzov posted 4 years ago
Quick tip: you can add "c.imageSmoothingEnabled = false" right after you set the width and height of the canvas - this way the sprites will stay pixelated even after you resize them.
w
wesleytoshio posted 5 years ago
thanks for content <3
chris posted 5 years ago
Thanks for watching, much love <3
I would be so happy if you extend this course with premium version. Is there any chance for that?