Create browser game without knowing any programming languages

If you want to create a browser game and put it on your own website for others to enjoy but you do not know any web programming languages such as javascript, php or html5 then you will really love GDevelop which is a game development software that will help yourself to create game without even requires you to write a single line of code.

Game development with GDevelop is very fast
Game development with GDevelop is very fast

I have downloaded GDevelop which itself is an open source software and then create my first game with it, all I have to say is that I really like it!

Normally a game developer needs to write code to detect whether a character has landed on a platform or not, but with GDevelop he does not need to do this anymore because he can simply create that detection logic in just a few steps!

Has the players landed on a platform?
Has a player already landed on a platform?

A game developer also does not need to write his own animation loop for a group of game images any more because with just a few simple settings that take only 1 minute or less the animation loop will be fully ready! I still remember it took me around an hour to write the first animation loop for my first game a few years ago.

This is how to set up the animation loop in GDevelop
This is how you set up the animation loop in GDevelop

You can add as many platforms as you need and as many game characters as you wish and as many character-platform relationships that you wish to have using GDevelop’s set up portal.

Character-Platform relationship
Character-Platform relationship

Once you have created your browser game, pack it up and you are ready to put it on your own website for people to enjoy.

Overall speaking GDevelop is a great piece of browser game development software which will help you to create game without needs you to write a single line of game code. If you have not yet downloaded this IDE then go ahead and download it, you will really love this game creation software once you have installed it on your pc 🙂

That is all, if there is time for more stories then I will write an article about creating a full browser game with GDevelop so don’t miss it if you would!

Concatenation of two arrays with javascript

If you want to concatenate two arrays with javascript then you can use the concat method of an array to do so. Below script will join up the two arrays and returns a new array consists of the combination elements from the two.

var apple = ["apple", "pie"];
var pen = ["pen", "pencil!"];
var applepen = apple.concat(pen);


If you put the above code in any html5 web page and load that page then you will see the below alert box pops up.


Make Human alternative –>Manuel Bastioni

Today I am going to introduce to you another blender tool which you can use to create human character within minutes. In my previous post I am talking about using Make Human to create human character for online game and in this article we are going to look at another cool tool which we can use to make humanoid –> Manuel Bastioni. Manuel Bastioni has almost all the features offered by Make Human accept one –> It does not have GUI of it’s own and thus we will need to import this plugin to Blender before we can use it.

If you are using Blender to create your gaming character then I will suggest you to directly using Manuel Bastioni instead of Make Human so you can save all the time you need to import your gaming character into Blender for editing. Since Manuel Bastioni is a plugin for Blender then we can create humanoid directly in Blender after we have installed this plugin.

Manuel Bastioni

Manuel Bastioni is a great plugin for Blender which I highly recommend to you after myself have used it to create the below feature.

If you want to create cloth for the character you might not be able to use it’s feature to do so at the moment but you can easily create the cloth in Blender because once the character has been created it will become just like a normal mesh object which you can then edit it as you wish!

Sound cool? Then go ahead and download the product from this link!

The cloud object has been introduced into Rock Sweeper

There is a new update coming soon with the introduction of the cloud object into the game, what this object does is to continuously moving downward and if it gets passed the screen boundary then it will reappear again from the other end.

from game_sprite import GameSprite
from pygame.locals import *
from vector2d import Vector2D

class CloudSprite(GameSprite):
    # Constructor. Pass in the image file
    # and it's width and height and it's position on the spritesheet
    def __init__(self, image, width, height, pos):
        # Call the parent class __init__ method
        GameSprite.__init__(self, image, width, height, pos)
        self.pos = Vector2D(0,0) #initialize the original position of the sprite on the screen
    def updatePosition(self): 
        self.pos += Vector2D(0.0, 0.1) #the new vector position of the cloud object on the screen
        #if the cloud gets passed the boundary then reset it to old position
        if(self.pos.y > (560+self.height/2)):
            self.pos.y = -300
            #else create the new rectangle object of the cloud
            self.rect = Rect(self.pos.x - self.width/2, self.pos.y - self.height/2, self.width, self.height) #self.rect will be called by the rock group

The new installer will also be used in this game for better user experience.

How to distribute the pygame program for windows os

If you have read my previous post regarding the PyInstaller then this one will further shows you how to create a installer for your pygame program for windows os so the windows users can download and install your program on their windows os’s pc.

Before we go further lets us revisit the part on how to create a distribution folder which includes a clickable application file that our application user can click on it to start the pygame application on windows os. In our previous tutorial regarding the PyInstaller we have only created a distribution folder for one file but in this one we will create the distribution folder for many files include the image files.

Make sure you have copied the freesansbold.ttf file to the main file folder if you are using it in your game before you create the spec file because PyInstaller is unable to locate it in the pygame package. We do not need to specify the pygame’s library because PyInstaller is smart enough to import all the pygame modules that the game requires for us.

As usual in the windows command prompt we will browse to the directory which contains all the files that we wish to turn into a single pygame application.

Create distribution folder :

1) Type in below command in the windows command prompt then press enter.

pyinstaller --noconsole 

where is the main file of the pygame application (the one which starts the application) and the ‘—noconsole’ option is used to hide the console window which will open in the background of python application program.

You will see errors such as the PyInstaller is unable to find the api-ms-win-crt-runtime-l1-1-0.dll file during the compilation stage but that is not a big issue as these files are in the windows os itself so we do not need to include it in our game package anymore. Also for the users to play the game they must have Python installed in their machine.

2) After PyInstaller has generated a spec file for your application open it up with any code editor which you prefer. Below is the spec file for my python game.

pyinstaller spec
pyinstaller spec

Besides the spec file you will also find a dist folder which contains of your application file in it but at the moment you cannot start the application because the application’s helper files are not there yet. There are also two other folders the pyinstaller has created for you : build and __pycache__ folder but we do not need to worry about those two as our main focus is on the dist folder.

3) Now I will edit or add in the following lines of code in that spec file.

# -*- mode: python -*-

block_cipher = None

a = Analysis([''],
game_files =  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]		
game_files +=  [('win.png', 'E:\\Pygame\\project0\\src\\win.png', 'DATA')]	
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('title.png', 'E:\\Pygame\\project0\\src\\title.png', 'DATA')]		
game_files +=  [('thick.png', 'E:\\Pygame\\project0\\src\\thick.png', 'DATA')] 
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('play_on.png', 'E:\\Pygame\\project0\\src\\play_on.png', 'DATA')]
game_files +=  [('next.png', 'E:\\Pygame\\project0\\src\\next.png', 'DATA')]
game_files +=  [('menu.png', 'E:\\Pygame\\project0\\src\\menu.png', 'DATA')]
game_files +=  [('maintile.png', 'E:\\Pygame\\project0\\src\\maintile.png', 'DATA')]
game_files +=  [('icon.png', 'E:\\Pygame\\project0\\src\\icon.png', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('', 'E:\\Pygame\\project0\\src\\', 'DATA')]
game_files +=  [('gameover.png', 'E:\\Pygame\\project0\\src\\gameover.png', 'DATA')]
game_files +=  [('freesansbold.ttf', 'E:\\Pygame\\project0\\src\\freesansbold.ttf', 'DATA')]
pyz = PYZ(a.pure, a.zipped_data,
exe = EXE(pyz,
          console=False , icon='iconfile.ico' )
coll = COLLECT(exe,
               a.datas + game_files,

Basically I have added in all those files that the game needs under the game_files list and then added that list to the a.datas list

a.datas + game_files

The game_files list takes in three element 1) The name of the file 2) The full path to the file (remember to use double backslash in your file path) 3) The string ‘DATA’ which is required by the spec file.

[('freesansbold.ttf', 'E:\\Pygame\\project0\\src\\freesansbold.ttf', 'DATA')]

Besides that if we do not want a console to appear on the background when we start the game (although we have already used the ‘—noconsole’ option when we create the spec but the console will still start for a short time) then we will simply set the console value to false


We can also include an icon for our application by specifying the path to the icon file.


After we have added and changed a few lines in the spec file we are now ready to recreate it with below command in the command prompt.

pyinstaller rocksweeper.spec

After we have ran the above command the contents of the dist folder will be rewritten and now you are ready to distribute the entire folder for the user to download. Although we can stop here if we want to because the dist folder has already contained everything we need to start the application (the main application file and it’s helper files such as image and the module files) but it will be very hard for the users to start the program if they are not familiar with the files inside the folder therefore we need to create an installer for our program which will lead us to the second part of this tutorial.

Create installer :

There are so many softwares for python developers to choose from when it comes to create an installer for their application but in this post I will only show you how to use Inno Setup to create the application’s installer for windows os.

Inno Setup is a free installer for Windows programs. First introduced in 1997, Inno Setup today rivals and even surpasses many commercial installers in feature set and stability.

As compared to other installers Inno Setup is easy to use thus you can create a workable windows’ installer with just a few clicks.

1) Download Inno Setup and install it.
2) Start Inno Setup, select ‘Create a new script file using the Script Wizard’ then press OK.

inno setup
start inno setup


click the next button
click the Next button


fill in the detail about your application
fill in the detail about your application


click next button
click Next button


Select the path to application file then select the folder where the helper files are located, make sure all the files inside the subfolders are selected as well
Select the path to the application file then select the folder where the helper files are located, make sure all the files inside the subfolders are selected as well


click next
click next


select license file
select license file




select the location to create the installer, named the setup file and provide the path to the icon file
select the location to create the installer, named the setup file then provide the path to the icon file





13) If you like you can save the new script for future use before compile it, that is it, once you have compiled the script Inno Setup will create the installer for you which you can then upload to your website for user to download and install your program.

Creating application with python and then pack it up is a long and painful process which takes lots of your time to do so, so make sure you stay cool and always look for help on forum or blog!

The Rock Sweeper Main Page

Hi, welcome to the main page of Rock Sweeper, a desktop game written in pygame and python and is ready for the windows users to download and playing it!

Installation guild:

1) Just download the game’s installer and then installed the game in your windows os pc (linux version will be included in the future).

How to play it:

1) Use the left and right arrow key to move the top and bottom ship to intercept the incoming rock, the rock must be intercepted twice before it get destroyed and the player will be awarded with one point for each rock he or she has destroyed.

2) If a rock has not been intercepted yet by the top ship, then do not intercept it with the bottom ship or else it will be game over which means the top ship must intercept the incoming rock once before the bottom ship can intercept the rock again and destroy it.

3) There are 10 levels in total and each level requires the player to win 10 points multiplies by the level number, for example if you are in level 3 then you will need to destroy 30 rocks to win the game.

Let me know:

If you found any bug in the game do let me know through comment at the bottom of this page, thank you.

Go ahead and download the game on Github!

Latest version update :
version 1.1
1) The size of the installer file has been reduced to around 6MB.
2) The cloud element has been included in this latest version.

There are more to come :

I am planning to create another game with pygame and I need your support to make it happen, kindly donate any amount of money to my gaming project through this project donation page.

The problem with the Pygame Mixer — pygame module for loading and playing sound

I am ready to release my first game in pygame with only three minor issues left : 1) How to pack up the game so the desktop windows users can play it on their computer. 2) Write comment on each module file 3) Playing background music.

It seems like Pygame has already included the music mixer module which we can use to load and play the background music but there is one shortage in the module which is that the music will not be able to loop seamlessly which means there is always a gap that creates a short silence between the play ends and the new playback starts. The gap issue not only happens in python but also Java and Javascript as well. Due to this reason, I have decided not to include the background music in this game but will include it in the future if I have found the solution to the gap problem.

Last night and today I will concentrate on writing comment in the module files as well as get ready to pack the game up so stay tuned and wait for the release!

The game state engine is ready!

After one and the half day of working on and off on the game state engine, this mega structure has finally ready for the real production! Basically this game engine will become the brain which will control the state object which will then control the screen and the world object. Now our main game module has became so simple because of the introduction of the game state engine above.

#!/usr/bin/env python

import pygame
from pygame.locals import *
from sys import exit
from vector2d import Vector2D
from game_state_engine import GameStateEngine

SCREEN_SIZE = (550, 550) #game screen size


screen = pygame.display.set_mode(SCREEN_SIZE, 0, 32)
screen.fill((0, 0, 0))

pygame.display.set_caption("Rock Sweeper")

state_engine = GameStateEngine(screen)

while True:
    for event in pygame.event.get():
        if event.type == QUIT:
        elif event.type == pygame.MOUSEBUTTONDOWN and event.button == 1:
            pos = pygame.mouse.get_pos()
            if(state_engine.get_state_name() == 'load'):
                state_engine.pos = pos
    pressed_keys = pygame.key.get_pressed() # get all the keys from key-press events 
    if pressed_keys[K_LEFT]: 
        if(state_engine.get_state_name() == 'play'):
            state_engine.v = Vector2D(-1., 0.) # move the top ship one unit to the left
            state_engine.v1 = Vector2D(1., 0.) # move the bottom ship one unit to the right
    elif pressed_keys[K_RIGHT]:
        if(state_engine.get_state_name() == 'play'):
            state_engine.v = Vector2D(1., 0.) # move the top ship one unit to the right
            state_engine.v1 = Vector2D(-1., 0.) # move the bottom ship one unit to the left
        #reset the speed to zero for both sjips
        state_engine.v = Vector2D(0.0, 0.0)
        state_engine.v1 = Vector2D(0.0, 0.0)
    state_engine.do_action() #do action
    state_engine.check_conditions() #what is the state now?

Now with the building of this game state engine thing will become easier and simple because all we need to do now is to change the state within the game state engine!

Game progress — creating game state engine

Game state engine will be the one which uses by this game to control the world object which will control the game entities such as rock and ship. Another usage of the game state engine is uses to control the game screen (loading screen, winning screen, game over screen and etc). These few days I will need to figure it out how to connect the game state engine with various states that ask the world object as well as the screen object to perform various jobs.

So far here is how the game state engine looks like.

from state_engine import StateEngine 
from state_loading import GameStateLoading
from state_playing import GameStatePlaying
from state_winning import GameStateWinning
from state_losing import GameStateLosing
from state_over import GameStateOver

class GameStateEngine(StateEngine):
    def __init__(self, surface):
        self.surface = surface #the game surface
        loading_state = GameStateLoading('load', self.surface) 
        playing_state = GameStatePlaying('play', self.surface)
        winning_state = GameStateWinning('win', self.surface)
        losing_state = GameStateLosing('lose', self.surface)
        game_over_state = GameStateOver('over', self.surface)
        self.active_state = loading_state #set the active state as loading state when the game first started

The GameStateEngine above is derived from the StateEngine main class.

Here is one of the state which will load the welcome screen.

from state import State
from screen_load import ScreenLoad 

class GameStateLoading(State):
    def __init__(self, name, surface):
        State.__init__(self, name)
        self.surface = surface #the surface of the screen
        self.screen = ScreenLoad(surface) #initialize the ScreenLoad module
    def do_actions(self):
        screen.render() #render the welcome screen
    def check_conditions(self, pos):
        if(screen.isButtonClick(pos)): #if the play button has been clicked then return 'play' as a new state
            return 'play'

GameStateLoading which derives from the State class will responsible for the loading of the welcome screen.

Here is how the ScreenLoad object looks like.

from screen import Screen

class ScreenLoad(Screen):
    def __init__(self, surface):
        self.surface = surface #surface of the main screen
        self.main = 'title.png' = 'play_on.png'
        self.screen = pygame.image.load(self.main).convert_alpha()
        self.play_button = pygame.image.load(
    def render(self):
        self.surface.blit(self.screen, (0,0))
        self.button = self.surface.blit(, (w/2, h/2))
    def isButtonClick(self, pos):
        return self.button.collidepoint(pos) #if the click area is within the button boundary then return true

Besides loading the title screen the ScreenLoad module will also responsible for the loading of the winning screen and etc therefore there will be further changes for this module.

As you can see the GameStateEngine class needs a lot of modules to function properly therefore it will take a few days for me to figure it out the entire game plan so stay tuned for the further progress of this game!