Remake RETRO Games with JavaScript
Рет қаралды 22,322
Күн бұрынSpaceships, lazers and aliens. Let's build a game from scratch with plain vanilla JavaScript and learn about game development and object-oriented programming. Our JavaScript game will be loosely inspired by the iconic space invaders arcade, but we will add some fun bonus features like super weapons, boss battles and different enemy types. While we do that we will learn about fundamental programming principles with JavaScript and object-oriented programming.
🚀 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-r...
Part 1: this video ( • Remake RETRO Games wit... )
Part 2: • JavaScript RETRO Games...
Part 3: • JavaScript RETRO Games...
Part 4: • JavaScript RETRO Games...
Playlist: • JavaScript Game Develo...
👽 Download Project Art assets 👽
Background: www.frankslaboratory.co.uk/do...
Beetlemorph enemy: www.frankslaboratory.co.uk/do...
Player space ship: www.frankslaboratory.co.uk/do...
Player jets: www.frankslaboratory.co.uk/do...
(if you can't download the files, try to use a different browser or VPN to change your country, also leave a comment so I can fix it)
🌌 Tutorial Contents 🌌
00:00:00 Intro
00:00:44 Project setup
00:05:23 Game and player objects
00:11:00 Keyboard controls
00:18:27 Object pool design pattern
00:31:28 Enemy waves
00:45:02 Collision detection
00:53:05 Score and game text
01:05:53 Game restart method
01:11:36 Beetlemorph enemy class
01:16:26 Sprite animation explained
01:27:02 Animation timing
01:37:17 Player animation
Space Invaders was released in arcades across Japan in the summer of 1978. Back in the day, the processors were not powerful enough to move the entire army of aliens at the speed the designer Tomohiro Nishikado intended, but as the player defeated enemies, it freed more processor memory and the game was getting faster and faster the fewer enemies were on screen. It also affected the speed of background music. It wasn't intended but this rising difficulty bug became a game feature. We will create a variation on this by making the enemies come in larger and larger waves. I will be using NO frameworks and no libraries and I will explain every line of code as usual, because only when you fully understand the code can you modify and add your own features later if that's what you want to do.
If you want to SUPPORT me you can use the links below and get some one my EXTENDED classes! 💪
www.udemy.com/course/learn-cr...
www.udemy.com/course/learn-ga...
www.udemy.com/course/creative...
www.udemy.com/course/build-an...
www.udemy.com/course/learn-ht...
www.udemy.com/course/remake-r...
www.udemy.com/course/learn-ht...
Get Skillshare FREE for 1 month: 🎓
www.skillshare.com/en/r/profi...
The description of this video may contain affiliate links, which means that if you buy one of the products that I recommend, I'll receive a small commission without any additional cost for you. This helps to support the channel and allows me to continue making videos like this. Thank you for the support!
#frankslaboratory
@Frankslaboratory 9 ай бұрын
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
@karlkoch3345 5 ай бұрын
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 11 ай бұрын
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 11 ай бұрын
Thank you for letting me know you found some value. Congratulations on your progress!
@franzgriffle6063 Ай бұрын
I made it through, and it works great. Thanks!
@Amar11115 11 ай бұрын
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 11 ай бұрын
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 !
@Frankslaboratory 11 ай бұрын
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 11 ай бұрын
The Great Giana Sisters
@irfansaeedkhan7242 11 ай бұрын
mario :p
@creative_philomath 11 ай бұрын
Can you make minecraft in 2d ( some intermediate or basic functions )
@HunorMartonBorbely 11 ай бұрын
Hey there :) Are you still on Twitter? I have a colaboration idea that we could do :)
@Frankslaboratory 11 ай бұрын
@@armatheos First time seeing The Great Giana Sisters, looks like a fun game to remake from back in 1987
@M4rt1nX 11 ай бұрын
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 11 ай бұрын
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
@ekvilibriumm4234 11 ай бұрын
just found the channel today, omg im missing alot. Subscribed!
@Frankslaboratory 11 ай бұрын
Nice to meet you!
@michaelcheverie7579 11 ай бұрын
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 11 ай бұрын
Hi Michael. Amazing. Thank you for letting me know. Do you prefer smaller or bigger projects for your science explorations
@michaelcheverie7579 11 ай бұрын
@@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.
@bennboi 8 ай бұрын
I definitely found some value in this great video. Thanks Frank 😊
@Frankslaboratory 8 ай бұрын
Happy to hear, thank you for letting me know
@alexeysokoloff7834 10 ай бұрын
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 10 ай бұрын
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
@melissaturk6052 11 ай бұрын
great content thank you sir!!!
@Frankslaboratory 11 ай бұрын
I'm here to help!
@joaocesarlima7339 8 ай бұрын
Thanks for another excellent tutorial!
@Frankslaboratory 8 ай бұрын
Glad you liked it!
@dev1ce-wk3hg 2 ай бұрын
Thanks for the insightful video! I've learned a lot from it and can't wait to apply these tips.
@Frankslaboratory 2 ай бұрын
Hi, glad you found some value! :)
@granumuse7847 11 ай бұрын
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 10 ай бұрын
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.
@user-yu5yj8gm5c 11 ай бұрын
@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 11 ай бұрын
Glad you found some value. It's my game dev tie :D
@AnimeThings_ 11 ай бұрын
Waiting worth.... You are always awesome
@Frankslaboratory 11 ай бұрын
Glad you think so, have fun!
@IrynaAbrosimova 5 ай бұрын
thank you. its super course
@Frankslaboratory 5 ай бұрын
Glad you found some value
@zach6862 10 ай бұрын
Big fan of you from Kenya. Your videos made me love gamedev
@Frankslaboratory 10 ай бұрын
Greetings to Kenya, I live in London. Nice to meet you Zach
@kennydelver4772 10 ай бұрын
Amazing work man !
@Frankslaboratory 10 ай бұрын
Hi Kenny. Glad you found some value
@vartikadehalvi7298 4 ай бұрын
Couldn't believe I finally made a game! Thankyou. Please implement a feature where enemies can fire projectiles.
@vikramkanaujiya8662 3 ай бұрын
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
@omergunay5635 11 ай бұрын
another beautiful and impressive project :)
@Frankslaboratory 11 ай бұрын
Glad you think so, thank you for letting me know!
@paulthomas1052 11 ай бұрын
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 11 ай бұрын
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.
@jiggity8289 11 ай бұрын
you are the best man!! 👍 because of you I've understood so much more about this language!
@Frankslaboratory 11 ай бұрын
Thank you for letting me know. Glad you found some value!
@medios_informaticos 11 ай бұрын
Awesome!! Thanks
@Frankslaboratory 11 ай бұрын
I'm here to help! :)
@Silas_standley Ай бұрын
JAVASCRIPT IN MODERN BROWSERS TAKES SOME PRACTICE TO WORK AROUND SOME OF THE QUIRKY BUGS THAT BREAK YOUR CODE THESE TUTORIALS ARE A GREAT HELP THANK YOU SO MUCH
@yadday5153 5 ай бұрын
I made it till the end Frank. Thanks.
@Frankslaboratory 5 ай бұрын
Nice work, well done on completing the project!
@cristianrojas7155 5 ай бұрын
thank you very much bro!!! although I don't understand English very well, I appreciate very much that you made this video, new sub.
@Frankslaboratory 5 ай бұрын
Hi Cristian. Your English seems good. Hope you have fun with your coding projects
@IonizedSun 11 ай бұрын
Bubble Bobble (still love this game after all these years) International Karate
@Frankslaboratory 11 ай бұрын
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
@josephcieplak8920 11 ай бұрын
Awesome!!
@Frankslaboratory 11 ай бұрын
Hi Joseph. Glad you like it
@manuelnunez8239 10 ай бұрын
can you make something on real data visualization using canvas html and JS including animation?
@user-cj6ps8jb5q 10 ай бұрын
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 ?
@Frankslaboratory 10 ай бұрын
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
@mattroddev 11 ай бұрын
Greetings. Do you create your own game art, Frank? Love the content. Thanks for sharing.
@Frankslaboratory 11 ай бұрын
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.
@baxaweb 11 ай бұрын
Thanks bro 👍
@Frankslaboratory 11 ай бұрын
No problem
@69zwaan 10 ай бұрын
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 10 ай бұрын
Hi. I'm not sure I fully understand the question. Can you rephrase it please
@69zwaan 10 ай бұрын
@@Frankslaboratory
@69zwaan 10 ай бұрын
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
@Mr123fairlane 11 ай бұрын
nice tie
@Frankslaboratory 11 ай бұрын
Its my gamedev tie. It helps me design my monsters 😅
@codingfetch5187 11 ай бұрын
Hey sir can you make a tutorial of drawing tool like figma from html canvas element? Thanks.
@Frankslaboratory 11 ай бұрын
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
@javifontalva7752 10 ай бұрын
Can you add those article talking object pool? Ta muchly!
@piersStreet 10 ай бұрын
Frank where do you get your sprites??Do you make it or??
@Frankslaboratory 10 ай бұрын
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.
@c__beck 11 ай бұрын
I'd love to see you do a video for mobile gaming using touch events instead of (or in addition to!) keyboard events.
@Frankslaboratory 11 ай бұрын
Touch events as easy. Problem is calculating aspect ratio for different mobile screen sizes I guess. I will do some mobile tutorials soon
@anpapala5961 11 ай бұрын
My favorite retro game is pacman and galaga awesome tutos when you goin to do pacman thank
@Frankslaboratory 11 ай бұрын
I might do both
@hatimlokhandwala6312 11 ай бұрын
You are the best
@Frankslaboratory 11 ай бұрын
Thanks Hatim
@yadday5153 10 ай бұрын
👍
@AZHARakaGoat 11 ай бұрын
Good bro
@Frankslaboratory 11 ай бұрын
Thanks
@webarrays 11 ай бұрын
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 11 ай бұрын
I'm not an expert. Will look into it. Ask Chris courses on his KZfaq he is a Three.js expert
@webarrays 11 ай бұрын
@@Frankslaboratory Thanks a lot for referring he is also a good guy with a lot of good details
@Stshq 11 ай бұрын
Pause button would be nice for my OCD 😆
@Frankslaboratory 11 ай бұрын
Good point, pause button would be pretty simple to implement here
@irfansaeedkhan7242 11 ай бұрын
you are awesome
@Frankslaboratory 11 ай бұрын
Hi Irfan, thank you!
@r.adicaL 11 ай бұрын
16:29 my bookmark for later
@AguVDev 8 ай бұрын
👍!
@Frankslaboratory 8 ай бұрын
:)
@ranjeetkahar1536 6 ай бұрын
Make a video on how you create images for the game. How to create game sprite in Adobe Photoshop, game character in Photoshop tutorial
@sokhaitrey9211 11 ай бұрын
Could u tell me about Math I should learn for build game? Thanks you
@Frankslaboratory 11 ай бұрын
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 11 ай бұрын
@@Frankslaboratory Thanks you so much
@GameMania-qv6nw 3 ай бұрын
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
@yadday5153 5 ай бұрын
Why is window.addEventListener('load') needed if the script tag comes just before the closing body tag?
@Frankslaboratory 5 ай бұрын
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 5 ай бұрын
@@Frankslaboratory Thank you Frank. I'm grateful!
@Frankslaboratory 5 ай бұрын
@@yadday5153 I'm here to help 😊
@yadday5153 5 ай бұрын
Even on my private projects?
@Frankslaboratory 5 ай бұрын
@@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
@abdulrahmansmamman7538 11 ай бұрын
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 11 ай бұрын
Hi Abdul, yes I will make something similar to Mario. Greetings to Nigeria
@tmbarral664 4 ай бұрын
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 ?
@piggymaster3209 10 ай бұрын
53:07
@technoinfoworldwide2329 11 ай бұрын
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 11 ай бұрын
Let me know if you come across something that's not entirely clear. This is an east game to build if you know JavaScript
@9ernation4-life40 11 ай бұрын
👍 player weapons please and boss enemies 👍
@Frankslaboratory 11 ай бұрын
Ok, I will do both
@64jcl 8 ай бұрын
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.
@Frankslaboratory 8 ай бұрын
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.
@64jcl 8 ай бұрын
@@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.
@Sangetsu04 4 ай бұрын
make castle adventure 🙂
@johnniegilkerson4724 Ай бұрын
no sound?
@sodasoda-ml4iw 11 ай бұрын
why subtitle can show sir
@Frankslaboratory 11 ай бұрын
Hi. What do you mean
@webarrays 11 ай бұрын
Thanks Alot for such great c0nntents
@Frankslaboratory 11 ай бұрын
Glad you found some value
@javifontalva7752 11 ай бұрын
this.frameX ++ this.frameX %= this.maxFrame This is simpler than using the if condition.
@Frankslaboratory 11 ай бұрын
Hi Javi. Yes it's a nice trick. I should use it more often. I wonder which one is more performance friendly.
@sodasoda-ml4iw 11 ай бұрын
not understand ingglish sir i try indonesia subtitle but it not show in description
@Frankslaboratory 11 ай бұрын
Sorry about that. I wish there was a way to translate to all languages. Maybe KZfaq AI will do that eventually.
@KuNhiRonaldo 11 ай бұрын
please give me source code ?
@Frankslaboratory 11 ай бұрын
I will provide source code with the extended version as usual
@KuNhiRonaldo 11 ай бұрын
@@Frankslaboratory yeahh. I wait for you
@yadday5153 11 ай бұрын
I'd like to see Stardew Valley!
@Frankslaboratory 11 ай бұрын
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 11 ай бұрын
@@Frankslaboratory Wow, than you
@andrzejgrabowski8750 11 ай бұрын
Moon Patrol (1982)
@Frankslaboratory 11 ай бұрын
Moon Patrol is cool, I will do it
@AnimeThings_ 11 ай бұрын
Donkey kong
@Frankslaboratory 11 ай бұрын
Yes, I was watching the old gameplay of Donkey Kong and now I really want to try to code that :D
@sakshikumari3620 6 ай бұрын
I am a beginner and this is quite hard for me understand.
@Frankslaboratory 6 ай бұрын
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
@JackxT-Q 11 ай бұрын
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 11 ай бұрын
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 11 ай бұрын
@@Frankslaboratory bruuuuhhhhh,.then how you activate the thing of element,console,recorder?(Idk What is it called)and what extension you use?
@Frankslaboratory 11 ай бұрын
@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 11 ай бұрын
@@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 11 ай бұрын
@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.
@botsjeh 11 ай бұрын
FFS, just call restart() in the Game constructor
@Frankslaboratory 11 ай бұрын
What do you mean
@botsjeh 11 ай бұрын
@@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 11 ай бұрын
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 11 ай бұрын
Hi Javi, yes 'includes' method can be used to replace 'indexOf', that's a good point!
@babicunlo3638 11 ай бұрын
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 11 ай бұрын
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 11 ай бұрын
@@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
@javifontalva7752 11 ай бұрын
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 11 ай бұрын
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.
@nixoncode 11 ай бұрын
👍
@Frankslaboratory 11 ай бұрын
💪
@king_lel_HD 11 ай бұрын
👍
@Frankslaboratory 11 ай бұрын
🤝💪
Web Animation [Javascript, SVG,CSS, Canvas, GSAP]
Рет қаралды 19
CNBC-TV18
Рет қаралды 1,6 М.