GameSpark/Tutorials Open editor ↗
GameSpark · Lesson 1

Your first program

Every GameSpark game is just two functions you write, and the engine calls them for you, sixty times a second:

The screen is 128 × 128 pixels, and colors are picked from a palette of 16, referred to by number (0–15). You will see those numbers in the code below.

1. Clear the screen

Open the editor (the Open editor ↗ button, top right) and replace the code with this:

function draw() {
  cls(1);  // clear the whole screen to color 1 (dark blue)
}

Now save with ⌘S (the Save and restart button). The canvas turns dark blue. That is cls — "clear screen" — running every frame. Try changing the 1 to other numbers from 0 to 15, saving after each change, to see the palette.

💾

Saving is how you run your code. Every time you change the code, press ⌘S (Save and restart) to see it. The Play / pause button only pauses and resumes the game that is already running — it does not pick up your edits.

2. Draw a shape

Now add a filled circle. circfill takes an x and y position, a radius, and a color:

function draw() {
  cls(1);
  circfill(64, 64, 8, 9);  // x, y, radius, color (9 = orange)
}

An orange circle appears dead center — (64, 64) is the middle of the 128×128 screen. Coordinates start at (0, 0) in the top-left, so y grows downward.

📐

These lessons use the default 128 × 128 screen (Square · Extra small), so the center is (64, 64) and the edges are 0 and 127. If you pick a different size in Settings, those numbers change — the Choosing a screen size lesson shows how to write code that fits any screen.

💡

Order matters. Drawing paints on top of whatever is already there, so cls goes first — otherwise last frame’s circle would still be showing. Try moving the cls line below the circle to see what "not clearing" looks like.

3. Make it move

A still circle is a picture, not a game. To move it, we keep its position in variables and change them in update(). Here is the whole program:

// update() changes things; draw() paints them.
let x = 64;      // the circle's position (left <-> right)
let y = 64;      // the circle's position (up <-> down)
let speed = 1;   // how fast it moves

function update() {
  if (key('ArrowLeft')) {
    x -= speed;
  }
  if (key('ArrowRight')) {
    x += speed;
  }
  if (key('ArrowUp')) {
    y -= speed;
  }
  if (key('ArrowDown')) {
    y += speed;
  }
}

function draw() {
  cls(1);
  circfill(x, y, 8, 9);
}

Click the canvas so it can hear the keyboard (the border turns colored), then use the arrow keys. key('ArrowLeft') is true while that key is held, so each frame the position nudges by speed, and draw() paints the circle at its new spot.

🎯

Try it: change speed to 3. Make the circle bigger by changing its radius. Add a second circle in a different color. Draw text with print('hi', 8, 8, 7).

What you learned