Mario and Maths was designed and implemented by Christos Sotidis as part of his graduate work in the IT department of Ionian University. Mario and Maths is an educational video game that draws its educational content from the mathematics lesson of the 6th grade of Greek elementary schools and the 1st grade gymnasium. More specifically, it focuses on teaching the chapter of the divisibility criteria.
Mario and Maths was created with the help of JavaScript and HTML programming languages. In order to be able to develop a program the first thing that is necessary is a text editor. So for this video game, the Brackets tool has been used. However, any text editor is just as functional. A game engine is also needed to create video games. The Game Engine is a software that specializes in developing such applications. Phaser was selected as the game engine of this particular project. In order for Phaser to work the file Phaser.Js is required. This file (Phaser.js) must be linked to the other files that will be created in order to access the features offered by Phaser. This link is through an HTML file that we need to create through the text editor. This HTML file is connecting the JavaScript files, and is also necessary for the game to work over the net. Finally, another key tool needed to develop the video game is Tiled, which is responsible for designing the game level to be added to the game. Tiled divides an image of the level into empty squares and by adding an object to each square we are able to design the game stage that we want.
Before creating the JavaScript files it is important to create two folders containing the sounds and images that will be used. The first file that needs to be created is the one that provides information about the folder location of each image or sound, in order to import them correctly. This file is Preloader.js. Also via this file we are importing the game level that we made with Tiled. After Preloader.js a file should be created by which the load bar will be displayed to the user when the user chooses to start the video game. This action is performed through the Boot.js.
The next file in the creation order is MainMenu.js, which is responsible for displaying and operating the main menu. At this point, the Play and Controls buttons and the background that appears in the menu are created. The Play button must lead the user to the narrative of the game and the Controls button must lead to the screen with controls. The Controls.js file is responsible for displaying this screen, which also displays the Play button to direct this user to the narrative as long as it has been updated for the keys. The afigisi.js is responsible for the narrative. In that file, the information that is needed for the competition of the game is stored, in the form of images. When the game runs, each picture stays on the screen for four seconds and then is followed by the next one. The player is also presented with a skip button, so that they can move ahead if they do not want to follow the entire narrative. When the user clicks the “skip” button the narration ends. The buttons containing the numbers 2,3,5 and 10 are also created through this file, at the end of the narration. After the end of the narration, the user chooses the desired divisibility criterion and then is prompted to choose between the two main characters (Mario and Luigi). Once the user selects the corresponding button, it is moved to the main track of the game. The main part of the game corresponds to the file Level1.js.
The Level1.js file implements the largest part of the game and concerns the game stage on which the user moves. So the first actions of this file are to display the map created through Tiled, display the background, and display the character previously selected by the user along with the corresponding animations that are formed when he moves. Also the corresponding sprites of the various characters and enemies added to the game are displayed through images uploaded before the Preloader.js file. Some characters are associated with only one image, while others are added to some form of motion. The random circular frames containing the numbers that the user has to select as the right choices to win the game are also randomly displayed. Also, in the upper left part of the screen, the variables that manage the score and lives are displayed to keep the user constantly informed. In addition, the shooting function starts, allowing the user to kill any number that considers the wrong option. Some characters are associated with only one image, while others have some form of motion added to them. The random circular frames containing the numbers that the user has to select as the right choices to win the game are also randomly displayed. Also, in the upper left part of the screen, the variables that manage the score and lives are displayed to keep the user constantly informed. In addition, the shooting function starts, allowing the user to kill any number that considers the wrong option.
After all of the above appears on the level, a continuous check of various functions in each frame of the game begins. One of these checks is the collision of the character controlled by the user with a circular number box. So, when the user collides with a number, a series of actions takes place. If this number is a correct answer then the score is increased by one hundred points, the corresponding sound of the correct selection is activated, the number is transferred to the top of the screen, the correct answer is increased and checked if it is equal to five, so that the user can gain a life. If the number is an incorrect option then the corresponding error selection sounds, the box is deleted, the amount of incorrect choices is increased, the number is stored, and the user is transferred to the error level. In the error level a message is displayed informing the user that this number is not divided by the number they have chosen to play with and, that they have to find the correct answer to continue. In this new track there is a change of background and some more pictures to fit the occasion. There also appear the remaining numbers of 2,3,5 and 10 in circular frames so that the user can choose the correct one and then be returned to the basic level of the game. At this point, collision checks are performed on each number until the correct one is selected by the user. One more check made on each frame of the game involves the collision of the base character with other characters such as enemies or some auxiliary characters such as the moving bridge and propeller that help the user to pass certain obstacles. The actions that take place when it comes to enemies is to remove a life and the corresponding sound, as well as to transfer the character to a specific point back to the level. Another important check regards the shooting function and more specifically the collision of the projectile with the circular frame of each number. In this case the number is deleted and the user wins a life if the number is the wrong choice.
The latest collision control that is done is about ending the game. If the user has correctly selected ten numbers, the winning screen is displayed, otherwise the defeat screen is displayed. Managing these two screens is done by creating the gameover.js and loss.js files respectively. These files are responsible for displaying the user's educational results as well.