
Then each line loads a game sprite and gives it a name so that we can refer to it in code later. The first line, loadRoot, specifies which folder to load all the sprites and game elements from, so we don't have to keep typing it in for each sprite. LoadSprite( "shrubbery", "shrubbery.png") LoadSprite( "pipeBottom", "pipeBottom.png") LoadSprite( "questionBox", "questionBox.png") LoadAseprite( "enemies", "enemies.png", "enemies.json")

LoadAseprite( "mario", "Mario.png", "Mario.json") This code loads each of the graphic elements we'll use, and gives them a name so we can refer to them when we build the game characters: loadRoot( "sprites/") Now, let's load up some of the sprites so we can add them to the blue sky scene.

Click the "Run" button, and you should see a lovely blue sky in the output window. We use scale to make the background twice the size on screen - you can increase this value if you have a monitor with very high resolution. We also set the size of the view to 320x240 pixels, which is a very low resolution for a modern game, but the right kind of pixelation for a Mario-type remake. This creates a new Kaboom canvas with a nice Mario sky-blue background. Replace the code in main.js with the code below: import kaboom from "kaboom" To start, we need to set up Kaboom with the screen size and colors we want for the game window. Once they have uploaded, you can click on the "Kaboom" icon in the sidebar, and return to the "main" code file. Now drag and drop all the sprite and asset files into the "sprites" folder. In the Kaboom editor, click the "Files" icon in the sidebar. It already has some code in it, but we'll replace that.ĭownload this archive of sprite and asset files that we'll need for the game, and unzip them on your computer. Give this repl a name, like "Mario".Īfter the repl has booted up, you should see a main.js file under the "Code" section. Head over to Replit and create a new repl.
