zerodayarcade / html5_platformer

Building a 2D side-scrolling platform game in HTML5 from scratch.

Building an HTML5 Platformer from Scratch

This is a simple example of building a 2D side-scrolling platform game in HTML5 from scratch. No engine, frameworks or third-party libraries are used, just vanilla javascript.

It could use a bit of performance optimization and variable consolidation, but provides an example of the features you see in many 2D platformers:

• Sprite Animation
• Parallax Scrolling
• Audio / Music
• Collectable Items
• Title / Menu Screens
• Collision Detection
• Controls / Input
• Tilemap / Easy Level Creation

This demo contains one small level but illustrates the concepts above. The way it is written makes it easy to add and edit levels using 2D level arrays.

Live Demo

Controls

• A: Run/Move Left
• D: Run/Move Right
• W: Jump / Hold to Hover if Wing Amulet has been collected
• S: Crouch
• K: Attack

There are two collectable items in the demo: (1) The Wing Amulet and (2) The Golden Cross. The Wing Amulet will let you hover/fly by holding W once you collect it, and the Golden Cross gives you 10,000 points. I may build out this game at some point in the future into a full game, but for now it serves as an example for anyone interested in building an HTML5 platformer without a pre-made engine.

Running Locally

In most cases you can just download the repo and double-click the index.html file. Note that if you add in features that load assets in the javascript code (rather than the HTML), you may need to instead serve the game locally:

You can serve the game locally by cloning the project and running a local server:

Clone repo:

git clone https://github.com/ZeroDayArcade/HTML5_Platformer.git

cd into project directory:

cd HTML5_Platformer

Run server with python:

python -m http.server 8080

Then navigate to localhost:8080 in your browser.

Game art

The game art used in this demo was created by Luis Zuno (@ansimuz) and other wonderful contributors to opengameart.org

Hero Sprite: opengameart.org/content/gothicvania-cemetery-pack
Backgrounds: opengameart.org/content/mountain-at-dusk-background
Tiles: opengameart.org/content/dungeon-crawl-32x32-tiles

Music by Joth (@Joth_Music)
opengameart.org/content/cyberpunk-moonlight-sonata