GameSpark/Tutorials Open editor ↗
GameSpark · Lesson 5

Move with the mouse

The keyboard is not the only input. mouse() hands you everything about the pointer in one call — where it is, which buttons are down, and the scroll wheel.

1. Follow the pointer

mouse() returns an object with x and y in game pixels (already clamped to the screen). Read it once per frame and draw there:

function draw() {
  const m = mouse();
  cls(1);
  circfill(m.x, m.y, 6, 12);  // a dot that tracks the cursor
}

Move your mouse over the canvas and the dot follows. const m = mouse() grabs the whole reading into m, so you can use m.x and m.y without calling mouse() again.

2. React to clicks

The same object carries the buttons as true/false values: m.left, m.right, m.middle. They are held-state — true for as long as the button is down — so you can paint while dragging:

function draw() {
  const m = mouse();
  cls(1);
  const color = m.left ? 8 : 12;   // red while the left button is held
  circfill(m.x, m.y, m.left ? 10 : 6, color);
}
💡

Held vs. clicked. m.left stays true the whole time the button is down, just like key(). If you want something to happen once per click, remember whether it was down last frame and act only when it goes from up to down.

3. The scroll wheel

m.wheel is how many scroll ticks happened this frame — negative for up, positive for down, and 0 when still. Add it to a value to let the wheel size a brush:

let r = 6;

function update() {
  const m = mouse();
  r = mid(1, r + m.wheel, 40);  // wheel grows/shrinks, clamped to [1, 40]
}

function draw() {
  const m = mouse();
  cls(1);
  circfill(m.x, m.y, r, 12);
}
🎯

Try it: leave a trail by clearing only when the right button is held. Make a simple paint program: on m.left, draw a permanent dot by tracking clicked points in an array (see Arrays).

What you learned