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
@karlkoch33457 ай бұрын
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.
@DevBoy-hd4kr Жыл бұрын
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.
@Frankslaboratory Жыл бұрын
Thank you for letting me know you found some value. Congratulations on your progress!
@Frankslaboratory Жыл бұрын
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
@armatheos Жыл бұрын
The Great Giana Sisters
@irfansaeedkhan7242 Жыл бұрын
mario :p
@philomath69 Жыл бұрын
Can you make minecraft in 2d ( some intermediate or basic functions )
@HunorMartonBorbely Жыл бұрын
Hey there :) Are you still on Twitter? I have a colaboration idea that we could do :)
@Frankslaboratory Жыл бұрын
@@armatheos First time seeing The Great Giana Sisters, looks like a fun game to remake from back in 1987
@michaelcheverie7579 Жыл бұрын
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 Michael. Amazing. Thank you for letting me know. Do you prefer smaller or bigger projects for your science explorations
@michaelcheverie7579 Жыл бұрын
@@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.
@alexeysokoloff7834 Жыл бұрын
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.
@Frankslaboratory Жыл бұрын
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
@Silas_standley13 күн бұрын
WHEN IT DOES WORK AS EXPECTED I THINK IT MAKES CODE MUCH MORE READABLE
@vartikadehalvi72985 ай бұрын
Couldn't believe I finally made a game! Thankyou. Please implement a feature where enemies can fire projectiles.
@vikramkanaujiya86625 ай бұрын
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
@dev1ce-wk3hg4 ай бұрын
Thanks for the insightful video! I've learned a lot from it and can't wait to apply these tips.
@Frankslaboratory3 ай бұрын
Hi, glad you found some value! :)
@Amar11115 Жыл бұрын
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!
@Frankslaboratory Жыл бұрын
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 !
@M4rt1nX Жыл бұрын
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.
@Frankslaboratory Жыл бұрын
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
@cristianrojas71556 ай бұрын
thank you very much bro!!! although I don't understand English very well, I appreciate very much that you made this video, new sub.
@Frankslaboratory6 ай бұрын
Hi Cristian. Your English seems good. Hope you have fun with your coding projects
@yadday51536 ай бұрын
I made it till the end Frank. Thanks.
@Frankslaboratory6 ай бұрын
Nice work, well done on completing the project!
@franzgriffle60632 ай бұрын
I made it through, and it works great. Thanks!
@granumuse7847 Жыл бұрын
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?
@Frankslaboratory Жыл бұрын
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.
@IonizedSun Жыл бұрын
Bubble Bobble (still love this game after all these years) International Karate
@Frankslaboratory Жыл бұрын
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
@jiggity8289 Жыл бұрын
you are the best man!! 👍 because of you I've understood so much more about this language!
@Frankslaboratory Жыл бұрын
Thank you for letting me know. Glad you found some value!
@user-yu5yj8gm5c Жыл бұрын
@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.
@Frankslaboratory Жыл бұрын
Glad you found some value. It's my game dev tie :D
@bennboi10 ай бұрын
I definitely found some value in this great video. Thanks Frank 😊
@Frankslaboratory10 ай бұрын
Happy to hear, thank you for letting me know
@ekvilibriumm4234 Жыл бұрын
just found the channel today, omg im missing alot. Subscribed!
@Frankslaboratory Жыл бұрын
Nice to meet you!
@IrynaAbrosimova7 ай бұрын
thank you. its super course
@Frankslaboratory7 ай бұрын
Glad you found some value
@paulthomas1052 Жыл бұрын
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.
@Frankslaboratory Жыл бұрын
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.
@javifontalva775211 ай бұрын
Can you add those article talking object pool? Ta muchly!
@joaocesarlima733910 ай бұрын
Thanks for another excellent tutorial!
@Frankslaboratory10 ай бұрын
Glad you liked it!
@Stshq Жыл бұрын
Pause button would be nice for my OCD 😆
@Frankslaboratory Жыл бұрын
Good point, pause button would be pretty simple to implement here
@melissaturk6052 Жыл бұрын
great content thank you sir!!!
@Frankslaboratory Жыл бұрын
I'm here to help!
@anpapala5961 Жыл бұрын
My favorite retro game is pacman and galaga awesome tutos when you goin to do pacman thank
@Frankslaboratory Жыл бұрын
I might do both
@ranjeetkahar15368 ай бұрын
Make a video on how you create images for the game. How to create game sprite in Adobe Photoshop, game character in Photoshop tutorial
@Mr123fairlane Жыл бұрын
nice tie
@Frankslaboratory Жыл бұрын
Its my gamedev tie. It helps me design my monsters 😅
@stamatispap26 күн бұрын
related to collision detection my bottom left rectangular isnt disappeared . why this happens?
@omergunay5635 Жыл бұрын
another beautiful and impressive project :)
@Frankslaboratory Жыл бұрын
Glad you think so, thank you for letting me know!
@kennydelver477211 ай бұрын
Amazing work man !
@Frankslaboratory11 ай бұрын
Hi Kenny. Glad you found some value
@AnimeThings_ Жыл бұрын
Waiting worth.... You are always awesome
@Frankslaboratory Жыл бұрын
Glad you think so, have fun!
@technoinfoworldwide2329 Жыл бұрын
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)...
@Frankslaboratory Жыл бұрын
Let me know if you come across something that's not entirely clear. This is an east game to build if you know JavaScript
@AZHARakaGoat Жыл бұрын
Good bro
@Frankslaboratory Жыл бұрын
Thanks
@64jcl9 ай бұрын
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.
@Frankslaboratory9 ай бұрын
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.
@64jcl9 ай бұрын
@@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.
@c__beck Жыл бұрын
I'd love to see you do a video for mobile gaming using touch events instead of (or in addition to!) keyboard events.
@Frankslaboratory Жыл бұрын
Touch events as easy. Problem is calculating aspect ratio for different mobile screen sizes I guess. I will do some mobile tutorials soon
@Silas_standley13 күн бұрын
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
@abdulrahmansmamman7538 Жыл бұрын
Hi i am Abdul from nigeria , I love your game project , can you make a play list of super Mario , it will be interesting ,
@Frankslaboratory Жыл бұрын
Hi Abdul, yes I will make something similar to Mario. Greetings to Nigeria
@GameMania-qv6nw5 ай бұрын
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
@tmbarral6645 ай бұрын
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 ?
@69zwaan Жыл бұрын
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"?
@Frankslaboratory Жыл бұрын
Hi. I'm not sure I fully understand the question. Can you rephrase it please
@69zwaan Жыл бұрын
@@Frankslaboratory
@69zwaan Жыл бұрын
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
@manuelnunez8239 Жыл бұрын
can you make something on real data visualization using canvas html and JS including animation?
@Silas_standley13 күн бұрын
ALSO MICROSOFT SHOULD DISABLE THE BULB MINI MAP AND MDN REFERENCES BY DEFAULT
@medios_informaticos Жыл бұрын
Awesome!! Thanks
@Frankslaboratory Жыл бұрын
I'm here to help! :)
@mattroddev Жыл бұрын
Greetings. Do you create your own game art, Frank? Love the content. Thanks for sharing.
@Frankslaboratory Жыл бұрын
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.
@user-cj6ps8jb5q11 ай бұрын
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 ?
@Frankslaboratory11 ай бұрын
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
@9ernation4-life40 Жыл бұрын
👍 player weapons please and boss enemies 👍
@Frankslaboratory Жыл бұрын
Ok, I will do both
@codingfetch5187 Жыл бұрын
Hey sir can you make a tutorial of drawing tool like figma from html canvas element? Thanks.
@Frankslaboratory Жыл бұрын
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
@josephcieplak8920 Жыл бұрын
Awesome!!
@Frankslaboratory Жыл бұрын
Hi Joseph. Glad you like it
@baxaweb Жыл бұрын
Thanks bro 👍
@Frankslaboratory Жыл бұрын
No problem
@piersStreet Жыл бұрын
Frank where do you get your sprites??Do you make it or??
@Frankslaboratory Жыл бұрын
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.
@webarrays Жыл бұрын
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
@Frankslaboratory Жыл бұрын
I'm not an expert. Will look into it. Ask Chris courses on his KZfaq he is a Three.js expert
@webarrays Жыл бұрын
@@Frankslaboratory Thanks a lot for referring he is also a good guy with a lot of good details
@hatimlokhandwala6312 Жыл бұрын
You are the best
@Frankslaboratory Жыл бұрын
Thanks Hatim
@r.adicaL Жыл бұрын
16:29 my bookmark for later
@piggymaster3209 Жыл бұрын
53:07
@Sangetsu046 ай бұрын
make castle adventure 🙂
@irfansaeedkhan7242 Жыл бұрын
you are awesome
@Frankslaboratory Жыл бұрын
Hi Irfan, thank you!
@yadday5153 Жыл бұрын
👍
@johnniegilkerson47243 ай бұрын
no sound?
@sokhaitrey9211 Жыл бұрын
Could u tell me about Math I should learn for build game? Thanks you
@Frankslaboratory Жыл бұрын
Pythagoras theorem formula and maybe basics of trigonometry will cover you for A LOT of 2D games. It takes less math than people think,
@sokhaitrey9211 Жыл бұрын
@@Frankslaboratory Thanks you so much
@javifontalva7752 Жыл бұрын
this.frameX ++ this.frameX %= this.maxFrame This is simpler than using the if condition.
@Frankslaboratory Жыл бұрын
Hi Javi. Yes it's a nice trick. I should use it more often. I wonder which one is more performance friendly.
@yadday51537 ай бұрын
Why is window.addEventListener('load') needed if the script tag comes just before the closing body tag?
@Frankslaboratory7 ай бұрын
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.
@yadday51537 ай бұрын
@@Frankslaboratory Thank you Frank. I'm grateful!
@Frankslaboratory7 ай бұрын
@@yadday5153 I'm here to help 😊
@yadday51537 ай бұрын
Even on my private projects?
@Frankslaboratory7 ай бұрын
@@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
@AguVDev9 ай бұрын
👍!
@Frankslaboratory9 ай бұрын
:)
@sodasoda-ml4iw Жыл бұрын
why subtitle can show sir
@Frankslaboratory Жыл бұрын
Hi. What do you mean
@sodasoda-ml4iw Жыл бұрын
not understand ingglish sir i try indonesia subtitle but it not show in description
@Frankslaboratory Жыл бұрын
Sorry about that. I wish there was a way to translate to all languages. Maybe KZfaq AI will do that eventually.
@javifontalva7752 Жыл бұрын
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.
@Frankslaboratory Жыл бұрын
Hi Javi, yes 'includes' method can be used to replace 'indexOf', that's a good point!
@andrzejgrabowski8750 Жыл бұрын
Moon Patrol (1982)
@Frankslaboratory Жыл бұрын
Moon Patrol is cool, I will do it
@yadday5153 Жыл бұрын
I'd like to see Stardew Valley!
@Frankslaboratory Жыл бұрын
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.
@yadday5153 Жыл бұрын
@@Frankslaboratory Wow, than you
@webarrays Жыл бұрын
Thanks Alot for such great c0nntents
@Frankslaboratory Жыл бұрын
Glad you found some value
@sakshikumari36208 ай бұрын
I am a beginner and this is quite hard for me understand.
@Frankslaboratory8 ай бұрын
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
@KuNhiRonaldo Жыл бұрын
please give me source code ?
@Frankslaboratory Жыл бұрын
I will provide source code with the extended version as usual
@KuNhiRonaldo Жыл бұрын
@@Frankslaboratory yeahh. I wait for you
@JackxT-Q Жыл бұрын
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)
@Frankslaboratory Жыл бұрын
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 😅
@JackxT-Q Жыл бұрын
@@Frankslaboratory bruuuuhhhhh,.then how you activate the thing of element,console,recorder?(Idk What is it called)and what extension you use?
@Frankslaboratory Жыл бұрын
@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
@JackxT-Q Жыл бұрын
@@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...
@Frankslaboratory Жыл бұрын
@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.
@AnimeThings_ Жыл бұрын
Donkey kong
@Frankslaboratory Жыл бұрын
Yes, I was watching the old gameplay of Donkey Kong and now I really want to try to code that :D
@botsjeh Жыл бұрын
FFS, just call restart() in the Game constructor
@Frankslaboratory Жыл бұрын
What do you mean
@botsjeh Жыл бұрын
@@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.
@javifontalva7752 Жыл бұрын
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"; } }
@Frankslaboratory Жыл бұрын
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.
@babicunlo3638 Жыл бұрын
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
@Frankslaboratory Жыл бұрын
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.
@babicunlo3638 Жыл бұрын
@@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