Full EXTENDEd version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
Got the extended version, wooo. Have you ever done any videos on 'ball games' or sports? like a player 1 passing a ball to a player 2? Thanks again for all your hard work! Great classes.
Man you are genius, You won't believe the impact your videos made in my programming skills, you just took my programming skills and logical thinking to the next level, than you so much for these creative videos.
Thank you for another great video! I use these videos as "project" for my computer science explorations class I teach at my high school. My students follow your coding projects, and in the process, learn a lot about how to code! Thanks!
@@Frankslaboratory Hi Frank! Thank you for asking! Both, actually. I have some students who like to dive into a long project, and others who prefer to do several of the smaller ones. What I teach is an "explorations" course, and so I am trying to expose my students to the things that can be done with coding. Many of the students are very interested in game creation, but I have others that are interested in music or ather coding applications. I also use some of the projects from the Coding With Radu channel, which I learned about through your videos. I'm very happy that your videos are available. They are an excellent resource for beginning coders! I am by no means a professional coder! Strictly amateur. However, I feel that with resources like yours, I can point my students in the right direction. I've had several during this past school year who said that they want to explore careers in computer science due to the experience they had in my classes.
his tutorial/course are good... the approach he teach is actually language agnostic... i was looking exactly for his kind of tutorial since a long time..unfortunately i think other than his video, we can only find the core teachings like this in old c++ books.... i didnt want to be stuck with using like contstruct or gamemaker... using his tutorial allow me to make games for some really niche platform like j2me using midletpascal
Thanks a bunch for making this video. I know for me it would take lot of time to grasp the concept here but I will do my best. Thanks a lot for providing resources as well. Have a great day!
Thanks for this one. It would be fun with different levels and if it gets announced on the screen when those starts. Then, the stronger wave of enemies could be released.
Yes. I like the idea. It has increasing wave size but proper levels with unique environments, enemy types or specific goals would be fun. I would probably use state design pattern for that
Bubble Bobble is crazy. Took me a while to realise what's going on there. Fighting game like international karate would be fun to make. Great tips thank you
Hi Paul. Have you seen the Steampunk seahorse game I made here last year. The gameplay is very similar to Defender and Scramble. I guess it would be fun to make the art look closer to these original games. I will add it on my list thank you.
Hi Matt, I usually make rough sketches or find references online and one of my artists make it look professional, based on my brief. They give me high resolution photoshop and illustrator files and I process them into animated sprite sheets, depending on the needs of the project. That way I can create custom art assets that suit the project I'm working on and I have a lot of freedom in designing it, to make it look however I want.
super awesome to see with useful code i need to learn how to use and i have a question you made a square foe code but if you look closely left or right hit with screen. you see move hit left or right. it is not right. can you edit "explain more"?
hello, well. you have to look closely at column from left start and end column rows. if you shoot at rows empty or right rows column shoot. see your column doesn't move right until end >width or
I make my own yes, since third party sites are unreliable and they have too many licensing conditions. I stopped using them and I always use my own art assets now.
Hi. Yes bullets can be custom images just put that drawImage call inside draw method on Projectile class. The bullets can also be animated same as we animate other sprite sheets. I do that with flame projectiles in my older steampunk seahorse game tutorial
After Collision detection , Player.shoot() did'nt word , I don't know its my browser or what , I used your source code but it's the same, I tried with Microsoft internet explore and Chrome , but same probleme... need help please !
Yes I will do a tutorial for a simple drawing app. Need to check Figma will be probably much simpler than that because I try to keep most of my classes beginner friendly
It's because when you use a lot of dependant resources, you don't have a guarantee they will be loaded when the script file is executed. Especially here where we use a lot of sprite sheets. If that sprite sheet is not loaded when we use it in our JavaScript file, it will break the entire codebase. Try to host it online on a slow internet connection without the event listener and you will see.
@@yadday5153 Usually just in relation to the code from my videos, it takes a while to get familiar with other peoples code, if I start debugging for everyone I will release even less videos :D
hello frank... you made awesome games and effect using simple interface to understand... i want a favor can you make rpg game that uses camera effect to follow player... can you make that game for me... Thanks
It baffles me that your videos do not have more views or likes as they well made, contain well explained code and with nice assets that you even give away. I can assure others that if you want to start developing games, this is the way to do it. Do not use Unity or frameworks. Learn the basics, and you will see that what those engines do is practically what you are doing with simple classes to encapsulate features and once made you can reuse them over for different games too. Most frameworks require you to often learn some obscure scripting language, while here you can learn plain Javascript which is so much simpler imo.
Hi, thank you for your kind feedback. I agree, I think it's important to understand how the code works and 2D code is easy to write from scratch. For 3D projects Game Engines are more efficient probably. Also using JavaScript for games is a fun way to practice logical thinking and programming skills.
@@Frankslaboratory , yes although today you can do pretty decent 3D games with WebGL as long as you are not aiming for an AAA look - but for simple platforming and stuff like this it works fine. Have you considered making a video about how you can package your Javascript games for distribution/installation? I have used NWJS for this which works great. Also a common problem with many 2D games like this is how you cater for different screen sizes and how to handle excess screen space. A lot of normal web pages even suffer greatly from not expecting superwide screens, and as a game designer you have to sort of design it to fit a minimum spec and figure out what to do with the excess space. It is no doubt best to decide on some resolution and just scale the canvas to max screen height but one should be careful then to avoid blurry pictures when everything is drawn using images. I often prefer deciding on some low end resolution then, like 854x480 (most have 16:9 screens today with 1920×1080 minimum) and use css image-rendering: pixelated; to retain the pixel look of the assets. A typical problem of many is that they mix resolutions of the assets too which looks quite ugly when they are all scaled differently, so better to draw/scale things in their correct size for the given resolution.
i tried this game to build by watching other youtube channel and in the middle part they didnt explain much and I left the video.Hopefully I can start this video and get more explanation(begineer friendly)...
I LOVE OOP UNFORTUNATELY THIS COURSE IS WHERE I REALIZED CLASS IN JAVASCRIPT IS BROKEN ! YOU CAN USE IT FOR BUILDING STATIC LIBRARIES BUT THINGS GET HAIRY WHEN YOU START TRYING TO USE IT FOR ENCAPSULATION METHODS GET PARALLELIZED POINTERS GET LOST STACKS OVERFLOW AND EVERYTHING COMES CRASHING DOWN PERHAPS IT WAS JUST MY EXPERIENCE MAYBE OTHERS DIDN’T RUN INTO THESE BUGS
Yea, I will cover tilemaps. If I find a good pixel art artist I might try to do something similar to Stardew Valley. Probably will make the theme more scifi or fantasy.
not beginner friendly ,.he doesnt tell what ide/code editor he use and how to setup it,activate the console,.,.as an example, netbeans user may not use eclipse cuz this 2 editor/ide have different mechanisms unless they are teached or reading book, and tinker with themself(but quite risky),.But Judging By Gui Design It should Be Vscode.....But Yeah Still When I Run/Debug Just Blank/White Page Not Look Like You Have The Object Tables(Sorry For My Bad English Im From Asia)
Hi. If you need my guidance on that, you are not ready for a project like this. Take some time with beginner JavaScript courses and after you learn the basics, then you can start with simple projects. Be patient. If it was so easy to learn coding, they wouldn't pay us good money for it 😅
@user-su2ri5qv5u I use VS code editor with Live server plugin for instant reloads. The thing on the right is just Google Chrome browser with its usual console. None of this is mandatory you can use any web browser and any code editor to follow along
@@Frankslaboratory Bruuuuuuhhhhh Alrigth Then it Seems Not My Destiny Become Game Dev isn't live server and open in browser the same? and yep.....,result same still only white page and no object visible...
@user-su2ri5qv5u its not the same. Some features of JavaScript work only when the code runs on a server such as export and import keywords. I didnt include any server specific code here. You can use console log to debug your problem easily. Things like this you learn in beginner JavaScript courses. I dont cover complete basics like that here.
In the end of the day this is a complex animation project. I can imagine it's a challenge for a beginner. Keep learning and it will eventually become easy. Projects like this are suitable only after you finishwd multiple beginner courses covering the basics of JS
@@Frankslaboratory In a lot of videos you initialize variables in the constructor and then later you copy half of the initializing code into a restart or reset method. Just call the restart/reset method in the constructor, avoiding duplicate code. Or make an init() method that you can call in ctor and in restart/reset.
I did this in update to check if the keys are in the keys array: if (this.keys.includes("ArrowLeft")) { this.speed = -4; } if (this.keys.includes("ArrowRight")) { this.speed = 4; } I guess it is the same but simpler.
thanks to you, i can now code simple games like this totally on my own. looking forward to seeing you cover more advanced topics like tweening / grid based movement / working with many tilesets and laying out multiple maps with them etc. but i'm still wondering why are you making a keys array and constantly modifying it upon every keydown event. why not just make it like this: //Game constructor this.keys = { "ArrowLeft": false, "ArrowRight": false, "1": false }; window.addEventListener("keydown", ({ key }) => { if (key in this.keys) this.keys[key] = true; }); window.addEventListener("keyup", ({ key }) => { if (key in this.keys) this.keys[key] = false; }); //Player.update() if(this.game.keys["ArrowLeft"]) this.x -= this.speed ... wish you the best
Thank you for the tip, I like your technique. Will test it and might use it in the next video! I will probably cover scrolling tilemaps next if I can come up with a game that heavily relies on that. Probably some kind of simplified classic Pokemon game clone.
@@Frankslaboratory after testing, i found out that you can use dot instead of bracket notation if you don't use quotes in the keys object: this.keys = { ArrowLeft: false, ArrowRight: false, 1: false }; /* event listeners */ //Player.update() if(this.game.keys.ArrowLeft) this.x -= this.speed
Instead of having the images loaded from index.html and hide in css and I just loaded from javascript like this. class Beetlemorph extends Enemy { constructor(game, positionX, positionY){ super(game, positionX, positionY); this.img = new Image(); this.img.src = this.img.src = "./img/beetlemorph.png"; } }
Hi Javi. I think you would have to use a Promise for this to work. I have a feeling this code will fail if the image is large and hasn't loaded by the time JavaScript runs. I might be wrong. Will test it.
Full EXTENDEd version includes: 4 unique enemy types, full source code from 8 stages throughout the project, 8 boss skins, super weapons and more. Check out the trailer and feature overview here: www.udemy.com/course/remake-retro-games-with-javascript/?referralCode=2ACCA21F16FE78E631F7
Got the extended version, wooo. Have you ever done any videos on 'ball games' or sports? like a player 1 passing a ball to a player 2? Thanks again for all your hard work! Great classes.
Pong (1972)
Space Invaders (1978)
Pac Man (1980)
Donkey Kong (1981)
Frogger (1981)
What did I forget and which one should we remake next :D
The Great Giana Sisters
mario :p
Can you make minecraft in 2d ( some intermediate or basic functions )
Hey there :) Are you still on Twitter? I have a colaboration idea that we could do :)
@@armatheos First time seeing The Great Giana Sisters, looks like a fun game to remake from back in 1987
Man you are genius, You won't believe the impact your videos made in my programming skills, you just took my programming skills and logical thinking to the next level, than you so much for these creative videos.
Thank you for letting me know you found some value. Congratulations on your progress!
Your passion is really inspiring, thank you for taking the time to make a video like this!
Hi, thank you for your channel. I used your features and made a portfolio. It allowed me to get a job as a frontend junior 2 years ago.
Hi Alexey, amazing, congratulation on your self taught success. It's good to share this so other people know it's possible for them as well. thank you
Thank you for another great video! I use these videos as "project" for my computer science explorations class I teach at my high school. My students follow your coding projects, and in the process, learn a lot about how to code! Thanks!
Hi Michael. Amazing. Thank you for letting me know. Do you prefer smaller or bigger projects for your science explorations
@@Frankslaboratory Hi Frank! Thank you for asking! Both, actually. I have some students who like to dive into a long project, and others who prefer to do several of the smaller ones. What I teach is an "explorations" course, and so I am trying to expose my students to the things that can be done with coding. Many of the students are very interested in game creation, but I have others that are interested in music or ather coding applications. I also use some of the projects from the Coding With Radu channel, which I learned about through your videos. I'm very happy that your videos are available. They are an excellent resource for beginning coders!
I am by no means a professional coder! Strictly amateur. However, I feel that with resources like yours, I can point my students in the right direction. I've had several during this past school year who said that they want to explore careers in computer science due to the experience they had in my classes.
his tutorial/course are good... the approach he teach is actually language agnostic... i was looking exactly for his kind of tutorial since a long time..unfortunately i think other than his video, we can only find the core teachings like this in old c++ books.... i didnt want to be stuck with using like contstruct or gamemaker... using his tutorial allow me to make games for some really niche platform like j2me using midletpascal
Thanks a bunch for making this video.
I know for me it would take lot of time to grasp the concept here but I will do my best.
Thanks a lot for providing resources as well.
Have a great day!
Hi Amar, it depends where you are in your JavaScript studies, it should be beginner friendly, if you know the basics of JS, good luck !
I made it through, and it works great. Thanks!
Thanks for this one. It would be fun with different levels and if it gets announced on the screen when those starts. Then, the stronger wave of enemies could be released.
Yes. I like the idea. It has increasing wave size but proper levels with unique environments, enemy types or specific goals would be fun. I would probably use state design pattern for that
We are glad to have your guidance to retro games so far, Frank. Really thank you. Would you try to enter the 3D games also?
Hi, I might do a 3D series eventually, I still want to cover a lot when it comes to 2D games. Going into 3D will require a lot more math.
I definitely found some value in this great video. Thanks Frank 😊
Happy to hear, thank you for letting me know
Thanks for another excellent tutorial!
Glad you liked it!
just found the channel today, omg im missing alot. Subscribed!
Nice to meet you!
Thanks for the insightful video! I've learned a lot from it and can't wait to apply these tips.
Hi, glad you found some value! :)
you are the best man!! 👍 because of you I've understood so much more about this language!
Thank you for letting me know. Glad you found some value!
Amazing work man !
Hi Kenny. Glad you found some value
thank you. its super course
Glad you found some value
Bubble Bobble (still love this game after all these years)
International Karate
Bubble Bobble is crazy. Took me a while to realise what's going on there. Fighting game like international karate would be fun to make. Great tips thank you
I made it till the end Frank. Thanks.
Nice work, well done on completing the project!
Couldn't believe I finally made a game! Thankyou. Please implement a feature where enemies can fire projectiles.
can i see your code ... im having an error in my code and i cannot find it ..... rechecking it with urs will be very helpful
thank you very much bro!!! although I don't understand English very well, I appreciate very much that you made this video, new sub.
Hi Cristian. Your English seems good. Hope you have fun with your coding projects
Waiting worth.... You are always awesome
Glad you think so, have fun!
another beautiful and impressive project :)
Glad you think so, thank you for letting me know!
@Franklaboratory looks great! Thanks for dropping such a gem on us, also love the tie. Reminds of me many of your previous video sprites used.
Glad you found some value. It's my game dev tie :D
great content thank you sir!!!
I'm here to help!
Thanks for this video - extremely useful and a great game. I would like to see a 'Defender' or 'Skramble' style game in pure HTML, JS and CSS.
Hi Paul. Have you seen the Steampunk seahorse game I made here last year. The gameplay is very similar to Defender and Scramble. I guess it would be fun to make the art look closer to these original games. I will add it on my list thank you.
Greetings. Do you create your own game art, Frank? Love the content. Thanks for sharing.
Hi Matt, I usually make rough sketches or find references online and one of my artists make it look professional, based on my brief. They give me high resolution photoshop and illustrator files and I process them into animated sprite sheets, depending on the needs of the project. That way I can create custom art assets that suit the project I'm working on and I have a lot of freedom in designing it, to make it look however I want.
nice tie
Its my gamedev tie. It helps me design my monsters 😅
super awesome to see with useful code i need to learn how to use and i have a question you made a square foe code but if you look closely left or right hit with screen. you see move hit left or right. it is not right. can you edit "explain more"?
Hi. I'm not sure I fully understand the question. Can you rephrase it please
@@Frankslaboratory
hello, well. you have to look closely at column from left start and end column rows. if you shoot at rows empty or right rows column shoot. see your column doesn't move right until end >width or
WHEN IT DOES WORK AS EXPECTED I THINK IT MAKES CODE MUCH MORE READABLE
Pause button would be nice for my OCD 😆
Good point, pause button would be pretty simple to implement here
Frank where do you get your sprites??Do you make it or??
I make my own yes, since third party sites are unreliable and they have too many licensing conditions. I stopped using them and I always use my own art assets now.
16:29 my bookmark for later
Awesome!! Thanks
I'm here to help! :)
Can you add those article talking object pool? Ta muchly!
related to collision detection my bottom left rectangular isnt disappeared . why this happens?
HI,
Thanks for the great educational videos you make!
i actually have an question. I wonder if it's possible to use custom bullets such png photo ?
Hi. Yes bullets can be custom images just put that drawImage call inside draw method on Projectile class. The bullets can also be animated same as we animate other sprite sheets. I do that with flame projectiles in my older steampunk seahorse game tutorial
My favorite retro game is pacman and galaga awesome tutos when you goin to do pacman thank
I might do both
Good bro
Thanks
can you make something on real data visualization using canvas html and JS including animation?
where can i get the images
Thanks bro 👍
No problem
can you make a series on 3d websites animation like good animations on youtube there is no content about 3d web animation for medium and pro level
I'm not an expert. Will look into it. Ask Chris courses on his UA-cam he is a Three.js expert
@@Frankslaboratory Thanks a lot for referring he is also a good guy with a lot of good details
Awesome!!
Hi Joseph. Glad you like it
53:07
👍
After Collision detection , Player.shoot() did'nt word , I don't know its my browser or what , I used your source code but it's the same, I tried with Microsoft internet explore and Chrome , but same probleme... need help please !
I'd love to see you do a video for mobile gaming using touch events instead of (or in addition to!) keyboard events.
Touch events as easy. Problem is calculating aspect ratio for different mobile screen sizes I guess. I will do some mobile tutorials soon
👍!
:)
Hey sir can you make a tutorial of drawing tool like figma from html canvas element? Thanks.
Yes I will do a tutorial for a simple drawing app. Need to check Figma will be probably much simpler than that because I try to keep most of my classes beginner friendly
Make a video on how you create images for the game. How to create game sprite in Adobe Photoshop, game character in Photoshop tutorial
Could u tell me about Math I should learn for build game? Thanks you
Pythagoras theorem formula and maybe basics of trigonometry will cover you for A LOT of 2D games. It takes less math than people think,
@@Frankslaboratory Thanks you so much
Why is window.addEventListener('load') needed if the script tag comes just before the closing body tag?
It's because when you use a lot of dependant resources, you don't have a guarantee they will be loaded when the script file is executed. Especially here where we use a lot of sprite sheets. If that sprite sheet is not loaded when we use it in our JavaScript file, it will break the entire codebase. Try to host it online on a slow internet connection without the event listener and you will see.
@@Frankslaboratory Thank you Frank. I'm grateful!
@@yadday5153 I'm here to help 😊
Even on my private projects?
@@yadday5153 Usually just in relation to the code from my videos, it takes a while to get familiar with other peoples code, if I start debugging for everyone I will release even less videos :D
you are awesome
Hi Irfan, thank you!
Frank,
I'm a bit surprised you used an array for the keys. An object or a Map would be more appropriate here. Why an array ?
👍
💪
👍
🤝💪
You are the best
Thanks Hatim
Hi i am Abdul from nigeria , I love your game project , can you make a play list of super Mario , it will be interesting ,
Hi Abdul, yes I will make something similar to Mario. Greetings to Nigeria
hello frank... you made awesome games and effect using simple interface to understand... i want a favor can you make rpg game that uses camera effect to follow player... can you make that game for me... Thanks
👍 player weapons please and boss enemies 👍
Ok, I will do both
It baffles me that your videos do not have more views or likes as they well made, contain well explained code and with nice assets that you even give away. I can assure others that if you want to start developing games, this is the way to do it. Do not use Unity or frameworks. Learn the basics, and you will see that what those engines do is practically what you are doing with simple classes to encapsulate features and once made you can reuse them over for different games too. Most frameworks require you to often learn some obscure scripting language, while here you can learn plain Javascript which is so much simpler imo.
Hi, thank you for your kind feedback. I agree, I think it's important to understand how the code works and 2D code is easy to write from scratch. For 3D projects Game Engines are more efficient probably. Also using JavaScript for games is a fun way to practice logical thinking and programming skills.
@@Frankslaboratory , yes although today you can do pretty decent 3D games with WebGL as long as you are not aiming for an AAA look - but for simple platforming and stuff like this it works fine. Have you considered making a video about how you can package your Javascript games for distribution/installation? I have used NWJS for this which works great. Also a common problem with many 2D games like this is how you cater for different screen sizes and how to handle excess screen space. A lot of normal web pages even suffer greatly from not expecting superwide screens, and as a game designer you have to sort of design it to fit a minimum spec and figure out what to do with the excess space. It is no doubt best to decide on some resolution and just scale the canvas to max screen height but one should be careful then to avoid blurry pictures when everything is drawn using images. I often prefer deciding on some low end resolution then, like 854x480 (most have 16:9 screens today with 1920×1080 minimum) and use css image-rendering: pixelated; to retain the pixel look of the assets. A typical problem of many is that they mix resolutions of the assets too which looks quite ugly when they are all scaled differently, so better to draw/scale things in their correct size for the given resolution.
i tried this game to build by watching other youtube channel and in the middle part they didnt explain much and I left the video.Hopefully I can start this video and get more explanation(begineer friendly)...
Let me know if you come across something that's not entirely clear. This is an east game to build if you know JavaScript
no sound?
why subtitle can show sir
Hi. What do you mean
make castle adventure 🙂
not understand ingglish sir i try indonesia subtitle but it not show in description
Sorry about that. I wish there was a way to translate to all languages. Maybe UA-cam AI will do that eventually.
I LOVE OOP UNFORTUNATELY
THIS COURSE IS WHERE I REALIZED
CLASS IN JAVASCRIPT IS BROKEN !
YOU CAN USE IT FOR BUILDING STATIC LIBRARIES BUT THINGS GET HAIRY WHEN YOU START TRYING TO USE IT FOR ENCAPSULATION
METHODS GET PARALLELIZED POINTERS GET LOST STACKS OVERFLOW AND EVERYTHING COMES CRASHING DOWN
PERHAPS IT WAS JUST MY EXPERIENCE MAYBE OTHERS DIDN’T RUN INTO THESE BUGS
please give me source code ?
I will provide source code with the extended version as usual
@@Frankslaboratory yeahh. I wait for you
Thanks Alot for such great c0nntents
Glad you found some value
this.frameX ++
this.frameX %= this.maxFrame
This is simpler than using the if condition.
Hi Javi. Yes it's a nice trick. I should use it more often. I wonder which one is more performance friendly.
I'd like to see Stardew Valley!
Yea, I will cover tilemaps. If I find a good pixel art artist I might try to do something similar to Stardew Valley. Probably will make the theme more scifi or fantasy.
@@Frankslaboratory Wow, than you
ALSO MICROSOFT SHOULD DISABLE THE BULB MINI MAP AND MDN REFERENCES BY DEFAULT
Moon Patrol (1982)
Moon Patrol is cool, I will do it
not beginner friendly ,.he doesnt tell what ide/code editor he use and how to setup it,activate the console,.,.as an example, netbeans user may not use eclipse cuz this 2 editor/ide have different mechanisms unless they are teached or reading book, and tinker with themself(but quite risky),.But Judging By Gui Design It should Be Vscode.....But Yeah Still When I Run/Debug Just Blank/White Page Not Look Like You Have The Object Tables(Sorry For My Bad English Im From Asia)
Hi. If you need my guidance on that, you are not ready for a project like this. Take some time with beginner JavaScript courses and after you learn the basics, then you can start with simple projects. Be patient. If it was so easy to learn coding, they wouldn't pay us good money for it 😅
@@Frankslaboratory bruuuuhhhhh,.then how you activate the thing of element,console,recorder?(Idk What is it called)and what extension you use?
@user-su2ri5qv5u I use VS code editor with Live server plugin for instant reloads. The thing on the right is just Google Chrome browser with its usual console. None of this is mandatory you can use any web browser and any code editor to follow along
@@Frankslaboratory Bruuuuuuhhhhh Alrigth Then it Seems Not My Destiny Become Game Dev isn't live server and open in browser the same? and yep.....,result same still only white page and no object visible...
@user-su2ri5qv5u its not the same. Some features of JavaScript work only when the code runs on a server such as export and import keywords. I didnt include any server specific code here. You can use console log to debug your problem easily. Things like this you learn in beginner JavaScript courses. I dont cover complete basics like that here.
Donkey kong
Yes, I was watching the old gameplay of Donkey Kong and now I really want to try to code that :D
I am a beginner and this is quite hard for me understand.
In the end of the day this is a complex animation project. I can imagine it's a challenge for a beginner. Keep learning and it will eventually become easy. Projects like this are suitable only after you finishwd multiple beginner courses covering the basics of JS
FFS, just call restart() in the Game constructor
What do you mean
@@Frankslaboratory In a lot of videos you initialize variables in the constructor and then later you copy half of the initializing code into a restart or reset method.
Just call the restart/reset method in the constructor, avoiding duplicate code. Or make an init() method that you can call in ctor and in restart/reset.
I did this in update to check if the keys are in the keys array:
if (this.keys.includes("ArrowLeft")) {
this.speed = -4;
}
if (this.keys.includes("ArrowRight")) {
this.speed = 4;
}
I guess it is the same but simpler.
Hi Javi, yes 'includes' method can be used to replace 'indexOf', that's a good point!
thanks to you, i can now code simple games like this totally on my own. looking forward to seeing you cover more advanced topics like tweening / grid based movement / working with many tilesets and laying out multiple maps with them etc.
but i'm still wondering why are you making a keys array and constantly modifying it upon every keydown event. why not just make it like this:
//Game constructor
this.keys = {
"ArrowLeft": false,
"ArrowRight": false,
"1": false
};
window.addEventListener("keydown", ({ key }) => {
if (key in this.keys) this.keys[key] = true;
});
window.addEventListener("keyup", ({ key }) => {
if (key in this.keys) this.keys[key] = false;
});
//Player.update()
if(this.game.keys["ArrowLeft"]) this.x -= this.speed
...
wish you the best
Thank you for the tip, I like your technique. Will test it and might use it in the next video! I will probably cover scrolling tilemaps next if I can come up with a game that heavily relies on that. Probably some kind of simplified classic Pokemon game clone.
@@Frankslaboratory after testing, i found out that you can use dot instead of bracket notation if you don't use quotes in the keys object:
this.keys = {
ArrowLeft: false,
ArrowRight: false,
1: false
};
/*
event listeners
*/
//Player.update()
if(this.game.keys.ArrowLeft) this.x -= this.speed
Instead of having the images loaded from index.html and hide in css and I just loaded from javascript like this.
class Beetlemorph extends Enemy {
constructor(game, positionX, positionY){
super(game, positionX, positionY);
this.img = new Image();
this.img.src = this.img.src = "./img/beetlemorph.png";
}
}
Hi Javi. I think you would have to use a Promise for this to work. I have a feeling this code will fail if the image is large and hasn't loaded by the time JavaScript runs. I might be wrong. Will test it.