Tutorials › Sprites & Sounds JS Mode

Sprites & Sounds

Build a coin-catching game using sprites, pixel art, collision detection, and sound effects!

1

Your First Sprite

A sprite is a game object — a rectangle with a position, size, velocity, and color. Use createSprite() to make one and drawSprite() to show it on screen. Let's make a player sprite that moves with the arrow keys!
0 / 21 lines
Loading editor...
player.color = "dodgerblue"; function setup() { size(400, 300); } function draw() { background("midnightblue"); if (keyIsDown("ArrowLeft")) player.x -= 3; if (keyIsDown("ArrowRight")) player.x += 3; if (keyIsDown("ArrowUp")) player.y -= 3; if (keyIsDown("ArrowDown")) player.y += 3; drawSprite(player); fill(150); textSize(12); text("Arrow keys to move!", 145, 10); }
2

Adding an Enemy

Now let's add a falling object! Set a sprite's .vy (vertical velocity) to make it move automatically with moveSprite(). When it goes off the bottom, we reset it to the top at a random position.
0 / 28 lines
Loading editor...
player.color = "dodgerblue"; let coin = createSprite(random(370), -20, 20, 20); coin.color = "gold"; coin.vy = 3; function setup() { size(400, 300); } function draw() { background("midnightblue"); if (keyIsDown("ArrowLeft")) player.x -= 3; if (keyIsDown("ArrowRight")) player.x += 3; player.x = constrain(player.x, 0, width - player.w); moveSprite(coin); if (coin.y > height) { coin.y = -20; coin.x = random(370); } drawSprite(player); drawSprite(coin); }
3

Collision & Score

The heart of any game: checking if things are touching! Use collides() to test if two sprites overlap. When they do, add to the score and play a sound with playSound(). If the coin falls off screen, lose a life!
0 / 45 lines
Loading editor...
player.color = "dodgerblue"; let coin = createSprite(random(370), -20, 20, 20); coin.color = "gold"; coin.vy = 3; let score = 0; let lives = 3; function setup() { size(400, 300); } function draw() { background("midnightblue"); if (keyIsDown("ArrowLeft")) player.x -= 4; if (keyIsDown("ArrowRight")) player.x += 4; player.x = constrain(player.x, 0, width - player.w); moveSprite(coin); if (collides(player, coin)) { score++; playSound("coin"); coin.y = -20; coin.x = random(370); } if (coin.y > height) { lives--; playSound("hit"); coin.y = -20; coin.x = random(370); } drawSprite(player); drawSprite(coin); fill("white"); textSize(16); text("Score: " + score, 10, 15); text("Lives: " + lives, width - 80, 15); }
4

Pixel Art Characters

Let's make our game look cooler with pixel art! Use createImage() to design characters with text — each letter maps to a color, and dots are transparent. Then drawImage() renders them scaled up for that retro look.
0 / 36 lines
Loading editor...
"..BB..", ".BFFB.", "BFFFFB", "BFBBFB", "..BB..", ".B..B.", ], { "B": "black", "F": "dodgerblue" }); let gemArt = createImage([ ".GG.", "GGGG", "GGGG", ".GG.", ], { "G": "gold" }); let x = 180, y = 250; function setup() { size(400, 300); } function draw() { background("midnightblue"); if (keyIsDown("ArrowLeft")) x -= 3; if (keyIsDown("ArrowRight")) x += 3; x = constrain(x, 0, width - 30); drawImage(heroArt, x, y, 5); drawImage(gemArt, 180, 100, 6); fill("white"); textSize(14); text("Pixel art characters!", 130, 20); }
5

Physics & Bouncing

Want things to fall realistically? applyGravity() pulls sprites down each frame by increasing their vy. bounceEdges() makes them bounce off the canvas walls. Together they create satisfying physics!
0 / 27 lines
Loading editor...
function setup() { size(400, 300); for (let i = 0; i < 6; i++) { let b = createSprite(random(50, 350), random(20, 100), 20, 20); b.color = "hsl(" + (i * 60) + ", 80%, 60%)"; b.vx = random(-3, 3); b.vy = 0; balls.push(b); } } function draw() { background("midnightblue"); for (let i = 0; i < balls.length; i++) { applyGravity(balls[i], 0.3); moveSprite(balls[i]); bounceEdges(balls[i]); drawSprite(balls[i]); } fill("white"); textSize(14); text("Gravity + bouncing!", 140, 20); }
6

The Full Game

Let's put it all together! Pixel art hero, falling coins, collision detection, sound effects, scoring, lives, and game over with restart. This is a complete game built with everything you've learned!
0 / 90 lines
Loading editor...
player.color = "dodgerblue"; let coin = createSprite(random(370), -20, 20, 20); coin.color = "gold"; coin.vy = 3; let score = 0; let lives = 3; let gameOver = false; let heroArt = createImage([ "..BB..", ".BFFB.", "BFFFFB", "BFBBFB", "..BB..", ".B..B.", ], { "B": "black", "F": "dodgerblue" }); let coinArt = createImage([ ".GG.", "GGGG", "GGGG", ".GG.", ], { "G": "gold" }); function setup() { size(400, 300); } function resetCoin() { coin.y = -20; coin.x = random(370); coin.vy = 3 + score * 0.2; } function draw() { background("midnightblue"); if (gameOver) { fill("white"); textSize(32); text("GAME OVER", 100, 100); textSize(18); text("Score: " + score, 155, 150); text("Press SPACE to restart", 95, 200); return; } if (keyIsDown("ArrowLeft")) player.x -= 4; if (keyIsDown("ArrowRight")) player.x += 4; player.x = constrain(player.x, 0, width - player.w); moveSprite(coin); if (collides(player, coin)) { score++; playSound("coin"); resetCoin(); } if (coin.y > height) { lives--; playSound("hit"); if (lives <= 0) { gameOver = true; playSound("explosion"); } resetCoin(); } drawImage(heroArt, player.x, player.y, 5); drawImage(coinArt, coin.x, coin.y, 5); fill("white"); textSize(16); text("Score: " + score, 10, 15); text("Lives: " + lives, width - 80, 15); } function keyPressed() { if (key === " " && gameOver) { score = 0; lives = 3; gameOver = false; resetCoin(); playSound("powerup"); } }

What to try next

  • Add different coin types with different colors and point values
  • Design your own pixel art hero and coin using createImage()
  • Add a power-up sprite that makes the player wider for a few seconds
  • Create background music using playNote() — try playing notes on certain frameCount values
  • Add enemy sprites that the player must dodge, using applyGravity() and bounceEdges()
  • Add a high score display on the game over screen
← Build a Game