Pokémon Browser Game Demo With 2D Canvas & WebGL

Cool Stuff Open Source This post may contain affiliate links. If you buy something we get a small commission at no extra charge to you. (read more)

I recently found very cool Pokémon MMO demo hosted for free on GitHub. This small demo runs best in Chrome but should function in all modern web browsers that support 2D canvas elements and the WebGL API.

The full live demo is on GitHub if you want to try it out.

pokemon canvas webgl game screenshot

At first glance this may seem very simple but it’s actually built on a large stack of JS properties. All graphics have been animated with the jump capabilities(press “C” to jump). There’s also repeating background music and a small map overview in the lower-right corner.

But this isn’t just a free-flowing game with no purpose. Well, kinda, but it’s also fully editable in the browser by the user. If you press F2 you can click & drag anything around on the screen. You can even delete objects that you want to remove, or copy/paste items to duplicate.

The game engine can detect collisions with objects to stop them from passing through each other. It also has dynamic camera functions allowing users to scroll around the screen(right-click and drag) or to zoom in with a mouse scroll wheel.

There’s a lot to say about this little game and the best thing is that it’s completely open source! You can download a full copy from the GitHub repo if you want to host it locally or deconstruct the code.

Although the game really isn’t a “game” more than just a demonstration of frontend skills. But it’s a great way to study & practice canvas/WebGL development. And if you’re a Pokémon fan I think you’ll agree this little project is cooler than a cooltrainer.

Author: Jaime Morrison

Jaime is a jr. designer interested in mobile UI/UX research and frontend web development with JavaScript frameworks. He covers general news and useful resources in the web design space.