processing / processing/p5.js

Add new p5.js example: Survive the Horde

Open
#8,256 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Area:Core Area:DOM Area:Events Feature Request
Dominant language
JavaScript
Stars
24k
Forks
3.8k
Avg merge
3d 16h
Merged PRs (30d)
25

Description

Increasing access

This new example, Survive the Horde, helps make p5.js more accessible to learners who want to understand how to create small games and interactive projects.

It demonstrates several key p5.js concepts in a fun and engaging way:

  • Using keyboard input for player control
  • Spawning and animating multiple enemies
  • Implementing collision detection between objects
  • Adding a score and game-over system
  • Using p5.sound for shooting and effects

By including this example in the official p5.js examples, beginners can learn how to combine rendering, events, and logic to build interactive gameplay with real-time feedback.
It provides a hands-on reference for creative coding and game logic using p5.js.

Most appropriate sub-area of p5.js?
  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)
Feature request details
Summary

Add a new example game named "Survive the Horde" under the examples/javascript_game/ directory.

Description

This example demonstrates how to create a simple 2D survival game using p5.js, showing how to integrate animation, input handling, and interaction in one project.

Players can move their character, shoot at incoming enemies, and survive as long as possible while avoiding collisions. The example also includes scoring, restarting, and game-over mechanics.

Educational Purpose

This game helps beginners understand:

  • How to use the draw loop for continuous animation
  • How to manage user input with the keyboard
  • How to detect and respond to collisions
  • How to use arrays or objects to manage multiple entities (like enemies and bullets)
  • How to use basic game logic in p5.js
Implementation Details
  • Folder: examples/javascript_game/
  • Files:
    • index.html – game entry point
    • game.js – main logic and drawing code
    • game.css – styling and layout
    • README.md – instructions and gameplay notes
Related Pull Request

PR: #8248

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the existing work in PR #8248 and the examples/javascript_game/ entry point, including index.html, game.js, game.css, and README.md. Verify that the example demonstrates movement, shooting, enemy spawning, collisions, scoring, restarting, game-over behavior, and sound as described. Done means the complete example is integrated and its instructions match the playable result.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, game-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.