🚪 Scene Transitions
To create multiple scenes in your game, simply call createGame()
multiple times. Each call completely replaces the previous scene.
Basic Principle
function openMenu() {
createGame({
// Menu configuration
templates: [
{
sprite: '1',
onCollide() {
openGame() // Go to game
}
}
]
})
}
function openGame() {
createGame({
// Game configuration
templates: [
{
sprite: '2',
onCollide() {
openMenu() // Back to menu
}
}
]
})
}
openMenu() // Start
💾 Preserving Data
Variables declared outside createGame()
are preserved between scenes:
let score = 0
let level = 1
function nextLevel() {
level++
createGame({
onStart() {
showMessage(`Level ${level} - Score: ${score}`)
}
//...
})
}
Note
Each createGame()
completely recreates the game. Only global variables persist.
🚫 Clearing the Screen
The game.clear()
method stops the game and replaces the display with a solid color:
const game = createGame({
templates: [
{
sprite: '1',
async onCollide() {
await game.openMessage('...')
game.clear('0') // Clear with specific color
// Then create new scene
createGame({
//...
})
}
}
]
})
Parameter:
color
(string|number, optional): Color to clear with. If not specified, uses the game’s background color.
Note
Usually not necessary, but useful to avoid flashing between a scene with a message and a new scene.