How to Make a Platformer in MakeCode Arcade (With Code)

Learning how to make a platformer in MakeCode Arcade comes down to six pieces: a player sprite, a tilemap with solid walls, gravity, a jump that only works on the ground, a camera that follows the player, and something to collect or reach. Get those right and you have a playable game in an afternoon. This guide walks through each piece in Blocks terms, gives you the full JavaScript, then covers jump feel, the bugs that trip up almost everyone, and what to do when your game outgrows Arcade.

What you need before you start

MakeCode Arcade is Microsoft’s browser-based editor for small retro games. You drag code blocks together, or switch to JavaScript or Python, and a simulator on the left runs your game instantly. The same MakeCode family is also one of the official code editors for the BBC micro:bit, which is why it shows up so often in classrooms.

A few terms you will see throughout:

• Sprite: any moving object in the game, such as the player, an enemy or a projectile. Each sprite has a kind (Player, Enemy, Food and so on) that you use to decide what happens when sprites touch.
• Tile: a small square image, 16×16 pixels by default, used to build the world.
• Tilemap: a grid of tiles that forms a level. In MakeCode Arcade you paint it in a built-in editor.
• Wall: a tilemap cell marked as solid. Sprites stop when they hit it. Painting a tile does not make it solid; marking it as a wall does.
• Velocity and acceleration: vx/vy are how fast a sprite moves each second, and ax/ay change that speed over time. Gravity is simply a constant downward ay.

You need nothing installed. Open the Arcade editor, start a new project, and keep the simulator visible so you can test after every step.

How to make a platformer in MakeCode Arcade: the core steps

Build in this order. Each step is testable on its own, which makes bugs easy to spot.

Step 1: Create the player

From the Sprites category, drag set mySprite to sprite of kind Player into on start. Click the grey image square to draw your hero. Keep it smaller than a tile (around 8 to 14 pixels tall) so it fits through one-tile gaps. Rename the variable to hero so your code stays readable.

Step 2: Draw a level with walls

From Scene, add set tilemap to and open the tilemap editor. Pick a grass or stone tile for ground and paint a floor, a few floating platforms and a gap or two. Then switch to the wall tool and paint walls over every ground and platform cell. This is the step people skip, and it is why their hero falls through the floor.

While you are in the asset editor, create three extra tiles and name them coin, spikes and flag. Place them around the level but do not mark them as walls, because the player needs to overlap them.

Step 3: Move left and right only

Add move hero with buttons from Controller, then expand it with the plus icon and set vx to about 90 and vy to 0. The zero matters: if the controller also drives vertical speed, it overwrites gravity every frame and your jump will never work.

Step 4: Add gravity

From Sprites, use set hero ay to 400. Your hero now falls and lands on wall tiles. Values between 300 and 500 feel like a classic platformer at Arcade’s resolution; lower feels floaty, higher feels heavy.

Step 5: Jump, but only from the ground

Add on A button pressed. Inside it, use an if block with is hero hitting wall bottom, and set hero vy to a negative number such as -170. Negative is up in screen coordinates. Without the ground check, players can tap A in midair and fly forever.

Step 6: Camera, coins, hazards and a goal

Add camera follow sprite hero so levels can be wider than one screen. Then use on sprite of kind Player overlaps tile three times: coins add a point and get replaced by an empty tile, spikes end the game with a loss, and the flag ends it with a win. That is a complete, winnable game.

The full platformer code in JavaScript

Here is the same game as MakeCode Arcade JavaScript. Paste it into the JavaScript tab after you have drawn a tilemap named level1 and tiles named coin, spikes and flag; the editor converts it back to blocks if you want to switch views.

const GRAVITY = 400
const JUMP_HEIGHT = 36 // pixels, a little over two 16 px tiles

scene.setBackgroundColor(9)
tiles.setCurrentTilemap(tilemap`level1`)

let hero = sprites.create(img`
    . . 4 4 4 4 . .
    . 4 4 4 4 4 4 .
    . 4 f 4 4 f 4 .
    . 4 4 4 4 4 4 .
    . . 4 4 4 4 . .
    . 2 2 2 2 2 2 .
    . 2 . 2 2 . 2 .
    . 8 . . . . 8 .
`, SpriteKind.Player)

controller.moveSprite(hero, 90, 0) // vy must be 0 so gravity works
hero.ay = GRAVITY
tiles.placeOnTile(hero, tiles.getTileLocation(1, 5))
scene.cameraFollowSprite(hero)
info.setScore(0)

controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (hero.isHittingTile(CollisionDirection.Bottom)) {
        // v = sqrt(2 * g * h) gives an exact jump height
        hero.vy = -Math.sqrt(2 * GRAVITY * JUMP_HEIGHT)
    }
})

scene.onOverlapTile(SpriteKind.Player, assets.tile`coin`, function (sprite, location) {
    tiles.setTileAt(location, assets.tile`transparency16`)
    info.changeScoreBy(1)
})

scene.onOverlapTile(SpriteKind.Player, assets.tile`spikes`, function (sprite, location) {
    game.gameOver(false)
})

scene.onOverlapTile(SpriteKind.Player, assets.tile`flag`, function (sprite, location) {
    game.gameOver(true)
})

Change the numbers in getTileLocation(1, 5) to a column and row that sit just above your floor. The jump line is worth understanding: instead of guessing a velocity, you state the height you want in pixels and the physics formula gives you the launch speed. With gravity at 400 and a 36-pixel target, the hero clears a two-tile wall with a few pixels to spare.

Making the jump feel good

A platformer lives or dies on its jump. Once the basic version works, these three upgrades make the biggest difference.

Variable jump height

Let players tap for a short hop and hold for a full jump. When A is released while the hero is still rising, cut the upward speed in half:

controller.A.onEvent(ControllerButtonEvent.Released, function () {
    if (hero.vy < 0) {
        hero.vy = hero.vy / 2
    }
})

Coyote time

Coyote time is a short grace window, roughly a tenth of a second, where the player can still jump after running off a ledge. Players never notice it, but they notice its absence as “the game ate my jump.” Track when the hero last touched ground and allow the jump inside that window:

let lastGrounded = 0

game.onUpdate(function () {
    if (hero.isHittingTile(CollisionDirection.Bottom)) {
        lastGrounded = game.runtime()
    }
})

controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
    if (game.runtime() - lastGrounded < 100) {
        hero.vy = -Math.sqrt(2 * GRAVITY * JUMP_HEIGHT)
        lastGrounded = 0 // stop a second jump using the same window
    }
})

Use this handler instead of the one in the full listing, not alongside it, or a single press will run both.

Animation and facing direction

Draw a few frames for walking and use animate hero frames from the Animation category, with an interval around 100 ms. For automatic switching between idle, walk and jump states, MakeCode has a character animations extension under Extensions. Flip or swap the image when the player changes direction so the hero faces the way it moves.

Common mistakes that break MakeCode platformers

Most broken platformers fail in one of these ways. Check this list before you post on a forum.

• Hero falls through the floor. The ground tiles are painted but not marked as walls. Open the tilemap editor and use the wall tool.
• Jump does nothing, or gravity stops working. moveSprite was called with its default vertical speed, which overrides vy. Pass 0 as the third argument.
• Infinite jumping. The jump has no ground check. Wrap it in isHittingTile(CollisionDirection.Bottom).
• Hero gets stuck on ceilings or edges. The sprite image is the same size as a tile, or has empty transparent rows that still count as its hitbox. Shrink it and crop the empty space.
• Impossible jumps. The level was drawn before the jump was measured. Decide your jump height and run distance in tiles first, then design gaps that fit.
• Falling forever off the bottom. There is nothing below the level. Put a row of spike or lava tiles along the bottom so falls end the run.
• The screen does not scroll. The camera is not following the hero. Add scene.cameraFollowSprite(hero).

One more design habit: test every new level by playing it start to finish yourself. If you die more than twice on the same jump, a new player will quit there.

MakeCode Arcade vs Scratch for a platformer

If you are weighing how to make a platformer in Scratch instead, the core logic is identical: horizontal input, a vertical speed variable that gravity reduces each frame, ground detection and a grounded-only jump. The difference is how much the tool does for you.

Task	MakeCode Arcade	Scratch
Gravity	Set the sprite’s ay once	Change a y-velocity variable every frame in a loop
Solid ground	Mark tilemap cells as walls	Detect touching a colour or a ground sprite, then push the player back out
Scrolling levels	Camera follow block	Move the level instead of the player, usually with scroll variables
Text code	Switch to JavaScript or Python	Blocks only
Art style	Small retro screen, fixed palette	Any size, any style of costume

For a first platformer, Arcade’s built-in tilemap collisions remove the hardest part. Scratch gives you more visual freedom but makes you write your own collision handling, which is a great learning exercise and a common source of jittery landings. Our guide to an AI Scratch game generator covers the Scratch side in more depth.

When you outgrow MakeCode: build the next platformer with WizardGenie

MakeCode Arcade is deliberately small: a low-resolution screen, a limited colour palette and simple sprites. That is a strength while you learn. Once you know how to make a platformer in MakeCode Arcade, though, you may want higher-resolution art, more mechanics or a game you can host anywhere on the web. That means moving to a general game engine, the kind of software that handles rendering, physics and input for you.

WizardGenie is the AI game engine inside Sorceress. You describe the game you want, and WizardGenie writes it, runs it and iterates on it in real time. It works with the leading AI coding models, and you can switch between them freely with your own API key. You can open WizardGenie in the browser with nothing to install, or use the Windows desktop app, which adds native file access and longer agent sessions.

The useful part for a MakeCode graduate is that you already speak the language. You can describe your platformer in exactly the terms from this guide:

“Make a side-scrolling platformer. Gravity about 400 pixels per second squared, jump height of two and a bit tiles, half the upward speed when the jump button is released, 100 ms of coyote time. Coins add score, spikes restart the level, a flag loads the next level. Camera follows the player.”

Then play it, and ask for changes the same way you would tweak a block: “the jump feels floaty, raise gravity,” or “add a second level with moving platforms.” This prompt-and-playtest loop is what people mean by vibe coding, and your MakeCode experience makes you better at it, because you know which numbers control the feel and can tell when generated code gets them wrong.

For art beyond Arcade’s palette, Auto-Sprite v2 (Pro) creates game-ready 2D characters and animations in any style, and Tileset Forge (Pro) turns AI art into game-ready tilesets. Music and sound effects come from Sound Studio. When the game is ready, export the build and host it wherever you like. The full tools guide shows how every Sorceress tool fits together, and if you are still choosing where to start, see our comparison of the best game engine for beginners.

The workflow at a glance

Game development mixes programming, design, art and sound, and a platformer is the friendliest place to practise all four. Here is the whole process for how to make a platformer in MakeCode Arcade, start to finish:

1. Create a Player sprite smaller than one tile.
2. Paint a tilemap, then mark ground and platforms as walls.
3. Move the player with buttons at vy 0.
4. Set ay to around 400 for gravity.
5. Jump on A only while hitting a wall below, using a measured jump height.
6. Follow the player with the camera.
7. Add coin, spike and flag tiles with overlap events.
8. Polish: variable jump height, coyote time, animation.
9. Design levels around the jump you measured, then playtest with someone new.

Build those nine steps once and you understand the skeleton of almost every 2D platformer ever made. From there, more levels, enemies and power-ups are variations on the same pattern, whether you keep going in MakeCode Arcade or describe the next version to WizardGenie.