Sprites & Sounds
Build a coin-catching game using sprites, pixel art, collision detection, and sound effects!
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!
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.
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!
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.
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!
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!
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