My JavaScript Role Playing Game (JSRPG)

Posted on in: All Posts, My Projects.
Tags:

JSRPG – A Brief History:

The first commit of Version 1 of my JavaScript Role Playing Game dates back to August 21st, 2013. That was many years ago. Little did I realize that this project had sparked an idea that would come to consume hundreds of hours of my life over the past few years. All I wanted was a JS driven browser based role playing game. The idea sounds simple, but putting words into action is never as easy as it sounds. Even my latest version (V4) is still very simplistic and isn’t a fully fledged game. Here’s what works so far:

What Works:

Here’s a demo of my current progress on the latest version (JSRPG V4).

  • You can save the current game.
  • You can start a new game.
  • The map loads via JSON.
  • You can move your character around the map.
  • You can move between different maps using portal tiles.
  • You can’t walk through walls or trees.
  • You can open chests and doors.
  • You can pick up items & money.

Goals:

  • Use keys to unlock locked doors.
  • Start & Complete Quests
  • Manage Items
  • Eqip Items
  • Character sprite changes based on items equiped.
  • Use Consumables
  • Spawn Monsters you can fight. Use PathFinding.js to make monsters chase the player.
  • Utilize Stats in battle.
  • NPC’s & Shops
  • Customizable Character

Lofty Goals

  • Mining / Foraging
  • Blacksmithing / Crafting
  • Procedural Dungeons
  • Multiplayer

JSRPG Version Breakdown:

  • JSRPG V1 was built with impress.js
    • Available on GitHub and Bitbucket.
    • V1 is not mobile friendly. It has no on-screen controls, and impress.js beta does not load in mobile browsers.
    • Each map is a carefully hand crafted HTML page, which is painful to create and maintain.
    • V1 uses jquery.cookie.js for game saves, which requires a web server so pages can pass cookies between each other.
    • V1 has slow glitchy map movement on slower devices because it builds all map elements despite screen size and uses CSS3 transforms for animations.
  • JSRPG V2 was built with jQuery
    • Available on GitHub and Bitbucket.
    • It’s more mobile friendly than V1 and includes on screen controls.
    • Maps are generated using static JSON files.
    • It uses local storage for game saves instead of cookies.
    • It still has slow glitchy map movement on slower devices like V1 despite using JS for animations because it still builds all map elements despite screen size.
  • JS RPG V3 was built with React
    • Available on GitHub and Bitbucket.
    • It’s is mobile friendly and includes on-screen controls.
    • Maps are still generated using static JSON files as in V2.
    • You can’t save the game in this version. Passing data between parent and child components is a PITA so I moved on to V4.
    • It has much faster map movement than V1 and V2 because it only builds/shows elements that fit in your browser window.
  • JSRPG V4 was built with React + Redux. View the Demo.
    • The ource code available on GitHub and Bitbucket.
    • V4 is mobile friendly and includes on-screen controls.
    • Maps are still generated using static JSON files as in V2 & V3.
    • You can save the game in this version, unlike V3. It currently uses local storage for game saves, similarly to V2.
    • It uses the same map movement/transitions/animations as V3.

A Sample Video of JSRPG V4

More coming soon.

Logo smleimberg.com