Add tile-match game tutorial for middle school students

[Copilot]

Creates a step-by-step tutorial for building a tile-matching game (similar to Candy Crush) targeting middle school students (ages 11-14).

Implementation

• New file: docs/tutorials/tile-match.md
• Structure: 22 sections (intro + 20 steps + finale) with 19 code hints
• Format: Follows existing MakeCode Arcade tutorial conventions (@explicitHints, @showdialog, tutorial hint blocks, blockconfig.global, ghost code)

Game Mechanics Covered

• Cursor sprite creation and arrow key movement
• Tilemap setup with colored tiles
• Tile array management and random placement
• Tile swapping mechanic (A button swaps with left neighbor)
• Match detection for 3+ horizontal or vertical matches using tileScanner extension
• Clearing matched tiles and refilling empty spaces
• Scoring system (1 point per cleared tile)
• Game over logic when swap creates no match

Tutorial Flow

1. Create cursor sprite for tile selection
2. Set up tilemap and create colored tiles
3. Create array of tile types
4. Build fillEmptyTiles function to populate grid
5. Add cursor movement controls (arrow keys)
6. Build clearMatches2 function with match detection
7. Implement tile swapping with A button
8. Test and play the completed game

All markdown syntax validated (code blocks balanced, hints closed, no broken references).

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Create a tutorial</issue_title>
<issue_description>Create a MakeCode Arcade tutorial for middle school students to guide them step-by-step through the process of building this game: https://makecode.com/_VmJ9mkEDLFpR (ignore the collapsed function).

You can reference the markdown files in @microsoft/pxt-arcade/files/docs/tutorials as a reference for formatting.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Create a tutorial #7335

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[Jaqster]

No, this is incorrect. I am asking for you to create a tutorial with instructions that will produce this exact game: https://makecode.com/_VmJ9mkEDLFpR which is similar to candy crush, rather than a space game.

[Copilot]

No, this is incorrect. I am asking for you to create a tutorial with instructions that will produce this exact game: https://makecode.com/_VmJ9mkEDLFpR which is similar to candy crush, rather than a s...

I apologize for the misunderstanding. I cannot access the game at https://makecode.com/_VmJ9mkEDLFpR directly due to network restrictions.

Could you please share the game code (TypeScript/JavaScript) or provide more details about the Candy Crush-style game mechanics you'd like in the tutorial? This will help me create the correct tutorial that matches your game.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• arcade.makecode.com
  • Triggering command: /usr/bin/curl curl -s REDACTED (dns block)
• makecode.com
  • Triggering command: /usr/bin/curl curl -s REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

[Jaqster]

No, this is incorrect. I am asking for you to create a tutorial with instructions that will produce this exact game: https://makecode.com/_VmJ9mkEDLFpR which is similar to candy crush, rather than a s...

I apologize for the misunderstanding. I cannot access the game at https://makecode.com/_VmJ9mkEDLFpR directly due to network restrictions.

Could you please share the game code (TypeScript/JavaScript) or provide more details about the Candy Crush-style game mechanics you'd like in the tutorial? This will help me create the correct tutorial that matches your game.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

Here is the game code:
controller.up.onEvent(ControllerButtonEvent.Pressed, function () {
mySprite.y += -8
})
function clearMatches () {
for (let indexY = 0; indexY <= 14; indexY++) {
matchStart = -1
currentTile = -1
for (let indexX = 0; indexX <= 19; indexX++) {
toCheck = tiles2.indexOf(tiles.tileImageAtLocation(tiles.getTileLocation(indexX, indexY)))
if (currentTile != toCheck) {
if (indexX - matchStart >= 3) {
for (let index = 0; index <= indexX - matchStart - 1; index++) {
tiles.setTileAt(tiles.getTileLocation(matchStart + index, indexY), assets.tiletransparency8)
}
}
matchStart = indexX
currentTile = toCheck
}
}
}
}
function fillEmptyTiles () {
for (let value of tiles.getTilesByType(assets.tiletransparency8)) {
tiles.setTileAt(value, tiles2._pickRandom())
}
}
controller.A.onEvent(ControllerButtonEvent.Pressed, function () {
locationLEeft = mySprite.tilemapLocation()
locationRight = mySprite.tilemapLocation().getNeighboringLocation(CollisionDirection.Left)
temp = tiles.tileImageAtLocation(locationLEeft)
tiles.setTileAt(locationLEeft, tiles.tileImageAtLocation(locationRight))
tiles.setTileAt(locationRight, temp)
clearMatches2()
})
controller.left.onEvent(ControllerButtonEvent.Pressed, function () {
mySprite.x += -8
})
controller.right.onEvent(ControllerButtonEvent.Pressed, function () {
mySprite.x += 8
})
controller.down.onEvent(ControllerButtonEvent.Pressed, function () {
mySprite.y += 8
})
function clearMatches2 () {
didClear = false
for (let tile of tiles2) {
let myTilemap = 0
for (let value of tileScanner.scanForLines(tileScanner.LineType.HorizontalOrVertical, tileScanner.tileIs(tile), 3)) {
tileScanner.setTileAtLocations(value, assets.tiletransparency8)
didClear = true
info.changeScoreBy(1)
}
}
fillEmptyTiles()
if (!(didClear)) {
game.gameOver(false)
}
}
let didClear = false
let temp: Image = null
let locationRight: tiles.Location = null
let locationLEeft: tiles.Location = null
let toCheck = 0
let currentTile = 0
let matchStart = 0
let tiles2: Image[] = []
let mySprite: Sprite = null
mySprite = sprites.create(imgf f f f f f f f f f f f f f f f f . . . . . . . . . . . . . . f f . . . . . . . . . . . . . . f f . . . . . . . . . . . . . . f f . . . . . . . . . . . . . . f f . . . . . . . . . . . . . . f f . . . . . . . . . . . . . . f f f f f f f f f f f f f f f f f , SpriteKind.Player)
tiles.setCurrentTilemap(tileUtil.createSmallMap(tilemaplevel2))
tiles2 = [
assets.tilemyTile0,
assets.tilemyTile1,
assets.tilemyTile2,
assets.tilemyTile3,
assets.tilemyTile4,
assets.tilemyTile5
]
fillEmptyTiles()

[abchatra]

@copilot can you read the previous comment and improve your tutorial?

[Copilot]

No, this is incorrect. I am asking for you to create a tutorial with instructions that will produce this exact game: https://makecode.com/_VmJ9mkEDLFpR which is similar to candy crush, rather than...

I've created the correct tutorial based on your game code! The new tutorial teaches students how to build the tile-matching game step-by-step.

Changes made in commit 3eba0d1:

• Removed the incorrect space-adventure.md tutorial
• Created tile-match.md tutorial that matches your Candy Crush-style game
• Covers all mechanics from your code: cursor movement, tile swapping, match detection with tileScanner, scoring, and game over logic

The tutorial includes 21 steps that guide students through creating the exact game mechanics you provided.

@copilot can you read the previous comment and improve your tutorial?

I've updated the tutorial based on the game code provided in the previous comment. The new tile-match.md tutorial now teaches the correct Candy Crush-style match-3 game instead of the space adventure game.

Commit 3eba0d1 contains the corrected tutorial.