Add new p5.js example: Survive the Horde

[Karthikeya1500]

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
• [x] Core/Environment/Rendering
• [ ] Data
• [x] DOM
• [x] 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

[Ankit-raj-11]

Hi everyone,

I’ve just checked out the PR (#8248) for the "Survive the Horde" example and wanted to say how fitting and accessible it is for new learners! Great job @Karthikeya1500.

I’m interested in supporting this contribution—either by testing, reviewing, refining documentation, or working on related educational features for p5.js.
If there are additional improvements needed on this or if you’d like help with similar example projects, please let me know! Happy to get involved however is most helpful.

Thanks for all the work making p5.js more beginner-friendly and engaging.

[Karthikeya1500]

Thank you so much, @Ankit-raj-11!
I really appreciate your kind words and support 🙏
Would love your feedback or suggestions on improving the example further.

[sidwellr]

Nice game, but how does it use p5.js?

[Karthikeya1500]

@sidwellr

Thanks! The game uses p5.js for all the rendering and game-loop behavior. I’m using:

• setup() to create the canvas
• draw() as the main animation loop
• p5 drawing functions like background(), rect(), ellipse(), text()
• p5 input handling (keyPressed / keyIsDown) for movement

So the entire update + render cycle is powered by p5.js.

[sidwellr]

@Karthikeya1500 I don't see any of these at https://github.com/processing/p5.js/pull/8248/files. Am I looking in the wrong place?

[Ankit-raj-11]

Thank you so much, @Ankit-raj-11! I really appreciate your kind words and support 🙏 Would love your feedback or suggestions on improving the example further.

I’d be happy to take ownership and work closely on any improvements or additional changes needed.

Looking forward to collaborating!

[Karthikeya1500]

Hi @sidwellr, thanks for checking!

You're right — the current PR (#8248) doesn’t contain the p5.js code yet. I initially explained how the game works internally, but I haven’t pushed those files into the PR.

I’ll update the PR shortly with the actual implementation so you can review the setup(), draw(), and other p5.js functions I mentioned.

Thanks for pointing it out!

[Karthikeya1500]

@sidwellr I've updated the PR with the actual p5.js implementation. The game now uses setup(), draw(), and p5.js classes for all rendering and logic as requested. Ready for your review!