Sign up for a plan to instantly unlock all premium lessons.
Premium Features
Fireflower shoot sprite
Right now, when we shoot, a fireball comes out of Mario, but we're not entirely sure from where (kinda sus). It makes a lot of sense in this case to add a shoot sprite so that when Mario shoots, we know that he's in the middle of an action.
Here we'll import our sprites using our new images.js file, and we'll also learn how to do a frame hold so that we only activate our sprite for a limited period of time.
Comments
Want to participate?
Create a free Chris Courses account to begin
Just finished the game!
You can play here https://flourishing-piroshki-722610.netlify.app/
Hey Chris, just finished this, Thanks for the great tutorial!
Hi Crhis,
Im Im uplaoding the content of the src folder to my server to try it online but is not working, what content should be upload?
Hey Chris, getting some problems on the deployment part because when I uploaded t to netlify while transitioning to level 2 it is taking some time to load and the music is also mixing up.
Can you help me in this , thanks in advance.
For sure can help! Could you send me your Netlify link and a link to your source code if possible? I'm thinking a load screen and or image optimization might be able to help quite a bit with this.
I can't seem to download episode 9 and 16
Go ahead and give them another go - they were set to play on open rather than download originally it seems.
how is this design pattern called? is this mvc or smth?
Not sure if it has a name, but it does have similarities to MVC as some of the data is being stored in separate files (audio.js and images.js), then that data is used to produce visible sprites on that frontend which would represent the view.
My main process for game design is to create classes for my game objects, then create sections for initializing the game, animating it, then watching for events. I feel that as long as you follow those steps, you're going to be golden for any game dev in the future 👍
Thanks for your answer!
I also want to add a score to the game and to upload my own font but I can't do it via @font-face. And I don't really understand how CORS works, could you tell me what to do? Thank you in advance
So you'd want to move the font file into your project directory so you can reference it from there and don't have to make a CORS request (basically a JS request to another website).
For fonts, I'd recommend checking out Google Fonts since they have a ton of great, free fonts and make integration into your website super simple. Basically, you select the font you want by clicking a font's "Select this style" text. Then, the site will provide you with some code that you can just drop into your site's <head> tag, allowing you to use the font directly within your CSS.
Here's an example of what Google provides:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap" rel="stylesheet">And to use this in your CSS you'd do so with:
font-family: 'Open Sans', sans-serif;Got it! Thanks again!!
Hi Chris, how would the final index.html code look so that everything is linked correctly?