Web game development with Phaser: fast, fun and entertaining

Creating web-based games is much easier than you can imagine. We added Phaser based game as an “easter egg” to our website in order to show you how powerful it is.

Web application development and realization of the client's desires takes all our time. Our developers are always prepared to show creativity and bring fresh ideas to each project. Sometimes we even have to restrain our creative impulse to meet the requirements.

By the way, if you’re interested in exploring different web application types, we invite you to read our guide.

So, what do we do in between?

We choose leisure activity, not only physical but also the one within the world of development.

Why We Added a Phaser-Based Game to Our Website

Despite the weight of responsibilities which becomes our companion as we grow older and more experienced in our field, we always look for the opportunity for simply doing whatever we want to do.

Here goes a background: some of our developers have grown watching the evolution of video games industry from its origin. For some of them this magic that appeared on the computer screen has become a kind of catalyst - how exactly does it all work? What does it consist of? Can I create something similar, but ten times cooler?

That’s why we created such an “easter egg” on our website, spending around 40 hours (1 sprint) on it without any designer involved. We took phaser.js gaming framework as a basis, which allows developing browser-based 2D games of any genre for any platform with HTML5 support.

This framework has an impressive array of features. Although most other frameworks include the same amount and variety of tools, we chose this one due to its flexibility and straightforwardness.

The Magic of Phaser.js: Key Benefits and Features

  • does not require the disclosure of source code;
  • low weight and high performance (due to the Pixi.js rendering);
  • MightyEditor visual editor (animations, tiles and sprites usage support);
  • built-in sound support;
  • built-in physics (supports collision of objects);
  • flexibility (any detail is replaceable);
  • plugin support;
  • low entry barrier (e.g. we can move the player around the map using simple functions as moveToXY (), moveUp (), etc.);
  • vast community support and a large number of examples supplied with the framework (over 500);

Almost each Phaser feature is visible on the official website and provided with examples with the source code and detailed comments attached.

How to Start Developing Games with Phaser

First, you need to install Phaser on your local server. You can do this by downloading the framework from the official repository on GitHub or using Bower or NPM. But the easiest way is to take advantage of the cdnjs.com service.

The next step would be creating your ‘game.js’ file (this will contain the code of the game) and connecting it to the index.html. You should initialize Phaser.js, create the frame write the beginning of your future game. Specify the window size (e.g. 800x600), the type of render (e.g. selection between WebGL and Canvas), name and the main functions.

Then you should declare a variable for the future `sprite.preload ()` contains code for loading resources. Try loading some image: the first parameter would be the name of the image, and the second is the path to it.

Create the sprite from the image that you have just uploaded and place it in the center of the screen, then you should launch the arcade physics in the game and make it available for the `sprite.update ()` is called 60 times per second. It is designed for updating positions and deleting game objects (in general, it serves to create the whole dynamic part of the game).

If you want to make the picture move to the bottom of the screen just set the `velocity` parameter.

We hope that this is enough for understanding the basics of working with Phaser. Don’t forget that Phaser.js has a very active and responsive community (sometimes even the creator himself answers questions on the forum).

Getting back to our game, we took this example as the basis, replacing almost all the “guts” and using our own elements.

screenshot old

We increased the speed of the game and added several variations of landscape obstacles and tanks in order to make the gameplay more accurate and tactical.

screenshot new

We also implemented a power-up system, as well as ammunition and health bars; there’s a progressive system of levels - your tank will change its appearance, characteristics of speed and durability depending on the number of enemies killed.

The indicator of enemy position at the edge of the screen tracks enemy tanks situated off the visible map so you can always be on the lookout.

As a result, the only thing that remained from the original example was the enemy tank explosion animation.

Maybe.War is still at the development stage and we will be adding as much new content as we can. In the nearest future, we want to implement destructible objects, new tank, and ammunition upgrades, new opponents (perhaps even bosses). Phaser gives a huge number of opportunities and helps developing other projects of greater volume (up to real-time strategies simply within the browser tab).

We never dwell on one thing and have already had experience in developing browser games. We want you to keep in mind that some game projects have better compatibility with other solutions. Most of the rookie developers assume that the framework they have chosen will start to impose their skills and it makes them think that they are capable of great things by simply using a good tool. The world of development would be far easier to comprehend if this were true.

Our competence allows us to improve not only within the scope of your project but also in our own development, gaining experience and even more joy. Our own elaborations help our team to constantly evolve and we are always aimed at directing all our strength to support your web application - be it a huge business platform or an educational game for children.

Explore Our Interactive Side: Try the Easter Egg Now

TL;DR: Press CTRL+G on our website to enjoy the game.

We’re always improving Maybe.War. Check it out and see how our creativity translates into dynamic solutions for every project.

Blog

react-websocket image

ReactJS WebSocket: How to Buid a Real-time Connection

Real-time communication is everywhere—think live chats, notifications, or dashboards that update without you refreshing the page. That’s where WebSockets come in, making instant two-way communication between your app and the server a breeze. If you’re working with React, WebSocket can open up a whole world of possibilities for building dynamic, interactive apps.
In this React WebSocket tutorial, we’ll walk you through the basics, share some examples, and show you just how easy it is to get started. Let’s dive in!

Dec 02, 2024
react-architecture image

React.JS Architecture: Best Real-world Practices

What is React architecture? At its core, it’s the foundation that defines how your React application is structured, how data flows, and how different components interact. A thoughtfully designed architecture is not just about clean code—it’s about creating efficient, maintainable, and scalable applications that stand the test of time.

Nov 28, 2024
dashboard-development image

How to Develop a Dashboard: All About Requirements, Tasks, Mistakes, and UI

Dashboards are a time-saving tool, so the user should be able to interact with them easily. It is not the best place for unnecessary clutter, so you should look for the simplest and most obvious solutions. After reading this article, you’ll learn how to develop a dashboard that is both high-quality and effective.

Oct 30, 2024
cost-to-hire-a-react-developer image

How Much Does it Cost to Hire an Experience React.js Developer in 2024

When you’re planning to build a dynamic web app or enhance an existing one, hiring a skilled React developer is essential. But how much does it cost to hire a React developer? According to Talent, hiring a React.js developer in the U.S. will set you back about $120,000 annually. The actual price tag depends on several factors, including whether you need a junior or senior programmer, as well as whether you’re hiring through a company or directly. In this article, we’ll break down the key elements that affect the React.js developer cost, helping you make the best decision for your project.

Oct 28, 2024
react-seo image

React SEO: Best Practices, Components, Optimization Tips

Building a React web app that's fast, user-friendly, and visible to search engines can be a bit tricky. While React offers a powerful framework for creating dynamic, interactive interfaces, it's not inherently SEO-friendly due to its reliance on client-side rendering. This can lead to issues like search engines missing important content, slower load times, and reduced search rankings. However, by focusing on React search engine optimization, techniques like implementation of server-side rendering (SSR), optimizing images, and improving load times, you can ensure your application performs well and ranks higher in search results. In this article, we'll dive into practical, technical strategies to make your React app more SEO-friendly.

Oct 18, 2024
nearshore-staff-augmentation-guide image

Nearshore IT Staff Augmentation: Maximizing Efficiency and Talent Acquisition

Learn how nearshore staff augmentation can enhance your software development team's capabilities. Explore its benefits, key strategies, and how to find the right IT talent to meet your project needs.

Oct 04, 2024
react-micro-frontend image

Micro Frontend in React: Mastering Modular Architecture for Optimal Scalability

As web applications grow more complex, micro frontend architecture in React is changing the game. By splitting up large, monolithic apps into smaller, independent pieces, React microfrontends make it easier to scale, develop faster, and improve the overall user experience. Let’s explore how this approach can help you build more flexible and efficient apps.

Oct 01, 2024
migrate-from-react-to-next-js image

How to Convert React JS to Next JS: A Step-by-Step Guide

React apps are great for building dynamic user interfaces, but when it’s time to scale up performance, it’s Next.js to the rescue. If you’re looking to move React app to NextJS, this guide will walk you through the process step-by-step. From handling React components to configuring server-side rendering, let’s dive into the transition and unlock faster page loads, better SEO, and a smoother development flow.

Sep 26, 2024

Contact Us

We have a good offer for you

clock icon

15 minutes of consultation

shield icon

Strict non-disclosure policy

window icon

Involvement of High-Level Developers to your Project

hand-shake icon

Fruitful Cooperation & Prominent Increment

Server error. Please, try in a few minutes again
Book a call