JavaScript Interactive Game

A browser-based arcade game built with p5.js. You control a character with a swinging sword, fight off enemies that chase you across the canvas, and try to survive three lives while your score climbs and the difficulty ramps up.

Playing it

The game needs to be served over HTTP rather than opened directly from the filesystem, because p5.js loads the sword animation frames as image assets.

git clone https://github.com/katesatori-mal/JavaScript-Interactive-Game.git
cd JavaScript-Interactive-Game
python3 -m http.server 8000

Then open http://localhost:8000 in a browser.

If you use VS Code, the Live Server extension works just as well.

Controls

Key	Action
Arrow keys	Move
Spacebar	Swing the sword
Enter	Advance between screens

The sword points in the direction you last moved, and its animation frame changes to match — left, right, up, or down.

Game rules

• You start with 3 lives and a score of 0
• Enemies spawn at random positions and move toward you at a constant speed
• Hitting an enemy with the sword adds a point
• Colliding with an enemy costs a life
• The game gets harder at score thresholds of 10, 20, and 30
• At zero lives, the game-over screen appears with your final score

Screens

The game uses a simple numeric state machine in the screen variable:

Value	Screen
1	Title screen
2	Instructions
3	Gameplay
4	Game over

Tech stack

• p5.js 1.x — canvas rendering, input handling, and image loading (bundled in libraries/)
• Vanilla JavaScript — no build step, no package manager
• 600 × 600 pixel canvas

Project structure

index.html          Page shell, loads p5 and sketch.js
sketch.js           All game logic — setup, draw loop, collision, screens
style.css           Page styling
libraries/
  p5.min.js         p5.js core
  p5.sound.min.js   p5.js sound add-on
images2/sword/      Sword animation frames, one per direction
  sword(1).gif      Right
  sword(2).gif      Left
  sword(3).gif      Up
  sword(4).gif      Down
spaceShip2.gif      Unused sprite from an earlier version

Notes on the code

Enemies and sword images are both initialized inside preload(), which means the enemy array is built before the canvas exists. This works because p5 sets width and height early, but moving enemy creation into setup() would be more predictable.

There are duplicate copies of the sword GIFs in the repository root alongside the ones in images2/sword/. Only the images2/ copies are loaded. The root copies and spaceShip2.gif can be removed.

Possible improvements

• Move enemy spawning out of preload() and into setup()
• Add sound effects — p5.sound.min.js is already loaded but unused
• Persist a high score across sessions
• Replace the numeric screen values with named constants for readability
• Delete the duplicate assets in the repository root