Web game development with Phaser: fast, fun and entertaining

Feb 07, 2019

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

    5-fintech-trends-in-2023

    This has been a turbulent year on many fronts. New solutions and tools appear in the FinTech market almost every day.

    Nov 30, 2022
    Read more
    what-is-amazon-web-services-and-what-expertise-does-the-maybeworks-team-have

    Over 15 years ago, Amazon came up with the idea of creating a centralized system of services that they could use for efficient development internally and provide to external teams.

    Nov 25, 2022
    Read more
    development-of-an-automated-human-resource-management-hrm-software

    A well-designed human resource management (HRM) system is a key component of the company's development strategy.

    Nov 16, 2022
    Read more
    why-is-the-nestjs-framework-a-great-option-for-web-development

    Web development is a dynamically changing field: its technologies get outdated, and new ones replace them. Our developers constantly look for up-to-date technologies to cover all our clients` needs.

    Nov 09, 2022
    Read more
    typescript-what-is-its-power

    JavaScript code should work predictably in every situation. MaybeWorks developers can add many checks to it, but it becomes cumbersome and difficult to maintain.

    Nov 04, 2022
    Read more
    is-it-profitable-to-augment-your-development-team

    MaybeWorks is a reliable IT Staff Augmentation provider that has been partnering with clients worldwide since 2012.

    Oct 27, 2022
    Read more
    real-estate-website-development-what-should-your-website-have

    Real estate website development is a vast topic with many pitfalls.

    Oct 12, 2022
    Read more
    top-3-popular-databases-and-critical-differences-mysql-mongodb-and-postgresql

    Today there are over 340 databases used worldwide by different projects.

    Oct 05, 2022
    Read more
    it-staff-augmentation-provider-vs-freelancers-what-option-is-better

    MaybeWorks is an IT staff augmentation provider partnering with clients worldwide since 2012.

    Sep 28, 2022
    Read more
    everything-you-need-to-know-about-developing-complex-websites

    At MaybeWorks, we know how to develop and maintain complex websites.

    Sep 21, 2022
    Read more
    nodejs-application-development-why-is-it-so-popular

    MaybeWorks is an IT staff augmentation provider, using Node.js as a primary development tool for over 5 years. Having started our way 10+ years ago, we have focused on NodeJS as a web app development tool. Our area of expertise is defined by web development, and we work with upscale techs to build powerful apps that allow enormous flexibility, stability, and long-term support. In this article, we are going to share our Node.js expertise with you and show why NodeJS development is worth your attention.

    Sep 14, 2022
    Read more
    what-is-iaas-and-how-does-it-differ-from-paas-saas-faas-and-caas

    MaybeWorks is an IT staff augmentation provider with over 10 years of experience in different technologies. IaaS, SaaS, PaaS, CaaS, and FaaS are the types of services that help IT services of companies get rid of the need to manage network resources, data storage, container technology, etc. The use of cloud services can reduce CAPEX and generally reduce the company's IT costs, increasing scalability and speed of product development and release. We want to share our IaaS, SaaS, PaaS, CaaS, and FaaS expertise with you in this article.

    Sep 07, 2022
    Read more
    what-can-be-created-with-react-scope-of-react

    MaybeWorks is an IT staff augmentation provider, using React as a primary JS library for over 5 years. For this time, our staff has discovered all its features and gained significant expertise after completing over 100 projects. For instance, this JavaScript library is actively used by companies such as Airbnb, Coursera, Dropbox, eBay, Expedia, Netflix, The New York Times, and Reddit. We prefer ReactJS for its ease of use and simplified code debugging. In this article, we wanna share our ReactJS expertise with you.

    Sep 01, 2022
    Read more
    web-game-development-with-phaser

    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.

    Feb 07, 2019
    Read more
    transition-from-angularjs-to-angular

    Upgrading your application from AngularJS to Angular 7 can be seamless and painless if you know how to deal with it. Angular 7 is way ahead of its predecessor in terms of productivity and efficiency, and if you are not taking its advantages yet, it is a high time to do so.

    Jan 10, 2019
    Read more
    importance-of-proper-request-handling

    A Number of network requests grows rapidly and it is important to pick a proper way to handle them. Let’s check the most popular approaches.

    Jan 07, 2019
    Read more
    spa-vs-mpa-pros-cons-and-gotchas

    There is no easy answer to the question what kind of application you should build: single-page or multi-page one. Let’s check benefits and drawbacks of both.

    Jan 04, 2019
    Read more
    can-a-modern-pwa-become-a-real-competitor-for-native-applications

    PWA approach has already changed the way how we treat websites and brought a great alternative to native applications.

    Jan 04, 2019
    Read more
    the-development-of-mobile-applications-on-html

    It is time for hybrid mobile applications. What do you know about them? Let's figure it out.

    Dec 04, 2018
    Read more
    effective-online-shopping-platforms

    There is no better place to sale your product or service than the Internet. You should know how to do it.

    Nov 06, 2018
    Read more
    development-of-the-erp-system

    Sales. Marketing. Support. Everything in one place - build your ERP System.

    Oct 05, 2018
    Read more
    mobile-application-development

    Having a mobile application today is not about "looking good, it is about "being good".

    Sep 06, 2018
    Read more
    website-promotion-lifehacks

    Trying to find your customer, be as attractive as you can. List higher - earn more.

    Aug 10, 2018
    Read more
    website-development-must-have

    It is not a luxury to have a website today, it is a must-have to keep-up with trends.

    Jul 27, 2018
    Read more

    Contact Us

    We have a good offer for you

    clock

    15 minutes of consultation

    shield

    Strict non-disclosure policy

    window

    Involvement of High-Level Developers to your Project

    hand-shake

    Fruitful Cooperation & Prominent Increment

    Server error. Please, try in a few minutes again
    Contact US