Web game development with Phaser: fast, fun and entertaining

In this article

    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.

    So, what do we do in between?

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

    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.

    Here are some key benefits of using Phaser:

    • 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.

    Here is a brief instruction of what you’ll need to get started.

    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.

    TL;DR: Press CTRL+G right now and enjoy.

    Blog

    staff-augmentation-vs-managed-services image

    Managed Services Model vs Staff Augmentation: Key Differences

    Companies often face the challenge of choosing the right strategy to meet their evolving needs. Two popular approaches for leveraging external expertise are staff augmentation and managed services. Each model offers distinct advantages and addresses different operational requirements. This article features the core distinctions between IT managed services vs staff augmentation.

    May 23, 2024
    pros-and-cons-of-ionic-framework image

    Pros and Cons of Ionic Framework for App Development

    In the fast-paced app development world, choosing the proper framework is crucial for success. Among the plethora of options available, Ionic Framework stands out as a popular choice for building cross-platform mobile applications. The advantages of Ionic attract many developers. Its ease of use, versatility, and extensive feature set make it a compelling option for developers seeking to streamline their development process and reach a wider audience. In this article, we will discuss the pros and cons of Ionic mobile framework.

    Apr 30, 2024
    managing-remote-development-teams image

    How to Manage Remote Developers: Challenges, Tools and Tips

    Managing a remote development team is becoming increasingly urgent today, where boundaries are blurring thanks to digital technologies. You need an effective approach to organizing the work‍ of a team, regardless of whether its members are located in one office or distributed around the world. In this article‍, we'll look at how to manage a remote development team, ensuring high productivity ‍ and synchronization of efforts among all project participants.

    Apr 22, 2024
    offshore-staff-augmentation image

    Offshore IT Staff Augmentation: Benefits, Challenges, Ways to Implementation

    In a world where technology develops at an incredible speed and competition in the software market reaches cosmic heights, every IT company strives to stay afloat. However, what to do when projects increase and more and more hands are needed? That's where IT staff augmentation comes in - an effective way to expand your development team in 2024.

    Apr 17, 2024
    ionic-vs-electron image

    Ionic vs Electron: Mobile or Desktop Development

    This article delves into the comparative analysis of the Electron vs Ionic frameworks, exploring their unique characteristics, strengths, and ideal use cases.

    Apr 09, 2024
    it-staff-augmentation-vs-outsourcing image

    Staff Augmentation vs Project Outsourcing: What is the Difference and How to Choose?

    In today`s business environment, companies actively use various models of working with personnel to optimize costs and increase efficiency. Staff augmentation and outsourcing are two of the most popular formats of cooperation. Both approaches offer companies various advantages: access to professional IT specialists, reduced staffing costs, and increased operational flexibility. Choosing an outsourcing or staff augmentation model depends on many factors, including project specifics, budget, timing, and skill requirements.

    Mar 26, 2024
    outsourcing-vs-outstaffing image

    Outsourcing vs. Outstaffing: Which Model Will Suit For Your Business?

    One of the important tasks of any business or project is to optimize processes that will allow you to perform valuable actions without unnecessary effort. This applies to software development: applications, websites, or mobile apps, etc. In most cases, such work is project-based and does not require a permanent employee on staff. That is why outsourcing and outstaffing services are optimal.

    Mar 15, 2024
    chatbot-development-everything-you-need-to-know image

    Chatbot Development: Everything You Need To Know

    The journey of bots commenced in 1966 with the emergence of text bots like Eliza, progressing into voice-based bots during the 80s. Simply put, a bot is software capable of engaging in intelligent conversations with humans.

    Feb 12, 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
    Call Back