Development of 2D Puzzle Game for the School of Computer Studies Bayla

Development of 2D Puzzle Game for the School of Computer Studies

Bayla, Jann Gil O., Cruz, Ronnel E., Maceda, Emily Claire B.,
Marjes, Shairine Mae R., Nasis, Gabriel T.

A Capstone Project Outline presented to the Faculty of the School of Computer Studies in partial fulfilment of their requirements for graduation with the degree of Bachelor of Science in Information Technology. Prepared under the supervision of
Mr. Carlo Maraan.

Chapter I
INTRODUCTION

Learning is a process of gaining knowledge or skill through studying, practicing, being taught or experiencing something. It is something we need and do to be able to adapt to the changes in our surroundings. Nowadays, where technology has become an integral part of people’s lives, computer education became a great demand for students. Learning can be made fun and quite easier by making a game-based learning system.
Game based learning is learning through games. They give competitive exercises that keep the students engaged, motivated and allow them to have fun while gaining knowledge. Marc Prensky, an innovator of incorporating game based technology into the education and business training systems, stated, “Digital Game-Based Learning meets the needs and learning styles of today’s and the future’s generations of learners”. In terms of game development, The Basics of Game Design in 2005 stated that building games is one of the most challenging and rewarding experiences everyone can think of. Taking pure imagination and making it come alive is absolutely addictive, a creative process so immersive and consuming that you’ll start craving it when you haven’t done it for too long. Some people think the fun is in playing the game, but, for a few special people, creating and building the environments in which other people play causes mere game playing to pale in comparison.
The proponents are motivated to develop a study entitled “Development of 2D Puzzle Game for the School of Computer Studies” which aims to design and provide a game-based learning system that could assist the students, who are unfamiliar with the computer hardware parts and terms. The proponents’ idea is to offer this system as a support tool that will contribute learning a fun yet challenging way.

Statement of the Problem
The main problem of the study is how to assist the students of the School of Computer Studies in City College of Tagaytay, specifically enrolled in the subject “Introduction to Computing”, regarding on the unfamiliarity of the student with the computer hardware parts and terms.
1. How to design and develop the “Development of 2D Puzzle Game for the School of Computer Studies” that will be capable of:
a. Providing a support tool in a form of a game for learning computer hardware
b. Providing an easy yet challenging game experience where the student learns and plays at the same time.
c. Allowing students to interact freely with the in-game environment.
d. Providing a way to track the students’ game details
2. How to assess the systems’ performance, acceptance, integration unit, and the system testing?
3. What is the level of conformity of the study based on ISO9126 standards?

Objectives of the Study
The main objective of the study is to develop a 2D game-based module for learning computer hardware for the students of School of Computer Studies that are enrolled in the subject “Introduction to Computing”.
Specifically aims to:
1. Design and develop the “Development of 2D Puzzle Game for the School of Computer Studies” that will be capable of:
a. Providing a support tool in a form of a game for learning computer hardware
b. Providing an easy game experience where the student learns and plays at the same time.
c. Allowing students to interact freely with the in-game environment.
d. Providing a way to track the students’ game details.
2. Test the systems performance, acceptance, integration unit, and the system testing; and
3. Evaluate the “2D Puzzle Game for the School of Computer Studies” in order to determine if it complies with the ISO9126 standards.

Scope and Limitations of the Study
The study entitled “Development of 2D Puzzle Game for the School of Computer Studies” is designed for the students of School of Computer Studies in City College of Tagaytay, specifically those who are taking the subject “Introduction to Computing”. This study is intended for three (3) different levels of access namely:
System Administrator is responsible for managing and administrating the system as a whole, handling software issues, updates, and manage admin user profile (add and update an admin account and user account (game tester).
Administrator is responsible for the maintenance of the system with the help of the system administrator. They are also the one who will facilitate the software installation and distribution. An administrator could be a faculty in the City College of Tagaytay who handles computer hardware subjects.
Users are the students of City College of Tagaytay, specifically the students of the School of Computer Studies enrolled in the subject “Introduction to Computing”.
The system consists of three different categories namely as:
Trivia, the user is asked questions about interesting, important, or obscure facts about computers, its parts and history.
Slide Puzzle, sliding block puzzle, or sliding tile puzzle is a combination puzzle that challenges a player to slide (frequently flat) pieces along certain routes (usually on a board) to establish a certain end-configuration.
Memory, also known as Match-Match or Match up, is a card game in which all of the cards are laid face down on a surface and two cards are flipped face up over each turn.
However, this study is limited of providing the system available online. This system will be implemented using local web hosting technology that will be browsed on Computer laboratories. As part of the curriculum of a given computer hardware subject, the results or scores from using the game is subject for evaluation. This system as a support tool must be used only with the supervision of an in-charge faculty. Printing of scores or any data generated from the system is also a limitation.

Significance of the Study
The study entitled “Development of 2D Puzzle Game for the School of Computer Studies” focuses on developing a game-based learning system. The proponents think that this study will assist the students in learning in a fun and easy way. The beneficiaries of this system are the following:
The main beneficiaries of this system are the users, the students of the School of Computer Studies that are enrolled in the subject “Introduction to Computing”, since they will be the one who will mainly use the system. This will improve the motivation and help the students focus on learning.
The Developers. They would gain and enhance their knowledge in terms of programming skills, application development, as well as writing documentation. It will also help them in developing their presentation skills as well as in communication skills, and their skills and growth as future professionals.
The future proponents. This will also benefit the future researchers who will conduct a similar study and wish to have a reference in developing the same research study.

?
Theoretical Framework
Theoretical framework is a collection of interrelated concepts that will guide the researcher in developing the proposed study.

Figure 1. Theoretical Framework of “Development of 2D Puzzle Game for the School of Computer Studies”.
The proposed system shows the Account Management Module, Record Management Module and Play Module of the study. The identified modules are intended to solve the issues on keeping, storing, and retrieving of player information as well as generating reports.
Account Management Module. The system administrator, administrator, and users are able to access the game where they have to provide the username and password for authentication. The function they can do in the system would depend on the scope and limitation that the system would allow to them. Account Management Module is responsible for the settings of the proposed system.
Record Management Module. The system administrator, administrator, and users are able to manage and keep track of the profiles and their progress within the game. These functions would be allowed to them depending on the scope and limitation of the system.
Play Module. The users are able to choose the category they’re going to play. They can either start a new one or resume a game they played before.

?
Conceptual Model of the Study
On the base of the foregoing concepts, theories, and findings of related literature presented, and insights taken, a conceptual model is developed as shown below:
INPUT PROCESS OUTPUT

Figure 2. Conceptual Model of the Study
Figure 2 shows the different stages of the processes involved in developing and achieving the objectives of the study.
Input Stage. Input stage consists of the knowledge requirements, software requirements, and hardware requirements in relation to the development of the study. The knowledge requirement describes the steps to be able to make the game. The software requirement of the system supports the platforms Dreamweaver CS6, Adobe Photoshop CS6, PHP, Notepad++, JavaScript, CSS, HTML5 and XAMPP. A 64-bit Operating System x64-based processor, video and graphics card and Intel Core i3-6006U CPU @2.00GHz are the hardware requirements.
Process Stage. The process stage is composed of planning, analysis, design, testing, implementation, and maintenance. System planning is where the outcome of the developed system is being visualized. To understand the details of the proposed system or an existing one, system analysis is being done and then deciding whether the proposed system is desirable or not and if the existing system needs improvements. The system design comprises the framework design which is graphically illustrated in the context and data flow diagram. System testing is conducted to detect errors in the behaviors and structures of modules, a program or a system plan as a whole. A feedback is made necessary to the designing and programming phase for correction if any errors are found. The part of creating the system that includes the application that have been used in coding is the system implementation. And the system maintenance determines the capability of the system and its outcome.
Output Stage. The output of the study that will be developed is entitled “Development of 2D Puzzle Game for the School of Computer Studies”.
Evaluation Stage. Evaluation stage will be the fourth and last stage and it will be conducted to ensure the systems software quality characteristics in terms of functionality, usability, content, and design.

Operational Definition of Terms
System administrator – is responsible for managing, overseeing and maintaining a multiuser computing environment, such as a local area network (LAN). SA responsibilities vary, depending on an organization’s requirements. SAs should possess strong technical knowledge and skills, as well as expertise in personnel management.
Game tester – is someone who works for video game production companies to thoroughly test video games before the final version is released to the public. Also known as beta game testers, games testers receive a version of a game that is close to its final stages.
End user – is the person that a software program or hardware device is designed for. The term is based on the idea that the “end goal” of a software or hardware product is to be useful to the consumer. The end user can be contrasted with the developers or programmers of the product. End users are also in a separate group from the installers or administrators of the product.
Prototype – is an original model, form or an instance that serves as a basis for other processes. In software technology, the term prototype is a working example through which a new model or a new version of an existing product can be derived.
Educational games – are the games which are used in teaching through the educational or games that are designed to help people to learn about certain subjects, expand concepts, reinforce development, understand an historical event or culture, or assist them in learning a skill as they play. ?

Chapter II
REVIEW OF RELATED LITERATURE AND STUDIES

This chapter presents the review of related literature and studies underlying the framework of the study. It includes the conceptual model of the study and the operational definition of terms.

Related Literatures
2D Game. As stated in an article posted at the website Giant Bomb, two-dimensional games were most frequently developed in the early years of video games with the main reason for this being that the technical limitations of game hardware prevented the ease of creating three-dimensional graphics. When technology developed sufficiently to allow easier and more effective use of 3D graphics there was a temporary decline in 2D gaming. Many researchers have discussed the possible benefits for using games in education and we believe they may be particularly helpful in improving computer science education. Games provide a way to create and share educational content while also making students feel their computing education is more relevant.

Animation. In an article stated at Wikipedia, animation is a dynamic medium in which images or objects are manipulated to appear as moving images. In traditional animation the images were drawn (or painted) by hand on cells to be photographed and exhibited on film. Nowadays most animations are made with computer-generated imagery (CGI). Computer animation can be very detailed 3D animation, while 2D computer animation can be used for stylistic reasons, low bandwidth or faster real-time renderings. Other common animation methods apply a stop motion technique to two and three-dimensional objects like paper cutouts, puppets, or clay figures. The stop motion technique where live actors are used as a frame-by-frame subject is known as pixilation.

Cascading Style Sheets (CSS). CSS or Cascading style sheets, as stated in an article at Wikipedia, are used to format the layout of Web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page’s HTML. CSS helps Web developers create a uniform look across several pages of a Web site. Instead of defining the style of each table and each block of text within a page’s HTML, commonly used styles need to be defined only once in a CSS document. Once the style is defined in cascading style sheet, it can be used by any page that references the CSS file. Plus, CSS makes it easy to change styles across several pages at once.

Context Diagram. An article at the Modern Analyst stated that the Context Diagram shows the system under consideration as a single high-level process and then shows the relationship that the system has with other external entities (systems, organizational groups, external data stores, etc.)

Data Flow Diagram. As stated in an article posted at Lucidhart, a data flow diagram (DFD) maps out the flow of information for any process or system. It uses defined symbols like rectangles, circles and arrows, plus short text labels, to show data inputs, outputs, storage points and the routes between each destination. Data flowcharts can range from simple, even hand-drawn process overviews, to in-depth, multi-level DFDs that dig progressively deeper into how the data is handled. They can be used to analyze an existing system or model a new one. Like all the best diagrams and charts, a DFD can often visually “say” things that would be hard to explain in words, and they work for both technical and nontechnical audiences, from developer to CEO. That’s why DFDs remain so popular after all these years. While they work well for data flow software and systems, they are less applicable nowadays to visualizing interactive, real-time or database-oriented software or systems.

Dreamweaver. In an article posted at Wikipedia, Adobe Dreamweaver is a proprietary web development tool from Adobe Systems. It was created by Macromedia in 1997 and developed by them until Macromedia was acquired by Adobe Systems in 2005.

Game Development
Video game development, as said in an article from Wikipedia, is the process of creating a video game. The effort is undertaken by a game developer, which may range from a single person to an international team dispersed across the globe. Traditional commercial PC and console games are normally funded by a publisher, and can take several years to reach completion. Indie games can take less time and can be produced at a lower cost by individuals and smaller developers. The independent game industry has seen a substantial rise in recent years with the growth of new online distribution systems, such as Steam and Uplay, as well as the mobile game market, such as for Android and iOS devices.

Game-based Learning.An article from Wikipedia stated that game-based learning (GBL) is a type of game play that has defined learning outcomes. Generally, game-based learning is designed to balance subject matter with game play and the ability of the player to retain, and apply said subject matter to the real world.

Graphics. According to an article posted at Techterms, graphic is an image or visual representation of an object. Therefore, computer graphics are simply images displayed on a computer screen. Graphics are often contrasted with text, which is comprised of characters, such as numbers and letters, rather than images. Computer graphics can be either two or three-dimensional. Early computers only supported 2D monochrome graphics, meaning they were black and white (or black and green, depending on the monitor). Eventually, computers began to support color images. While the first machines only supported 16 or 256 colors, most computers can now display graphics in millions of colors. 2D graphics come in two flavors — raster and vector. Raster graphics are the most common and are used for digital photos, Web graphics, icons, and other types of images. They are composed of a simple grid of pixels, which can each be a different color. Vector graphics, on the other hand are made up of paths, which may be lines, shapes, letters, or other scalable objects. They are often used for creating logos, signs, and other types of drawings. Unlike raster graphics, vector graphics can be scaled to a larger size without losing quality. 3D graphics started to become popular in the 1990s, along with 3D rendering software such as CAD and 3D animation programs. By the year 2000, many video games had begun incorporating 3D graphics, since computers had enough processing power to support them. Now most computers now come with a 3D video card that handles all the 3D processing. This allows even basic home systems to support advanced 3D games and applications.

ISO9126. ISO 9126 software engineering — Product quality was an international standard for the evaluation of software quality. It has been replaced by ISO/IEC 25010:2011. The fundamental objective of the ISO/IEC 9126 standard is to address some of the well-known human biases that can adversely affect the delivery and perception of a software development project. These biases include changing priorities after the start of a project or not having any clear definitions of “success”. By clarifying, then agreeing on the project priorities and subsequently converting abstract priorities (compliance) to measurable values (output data can be validated against schema X with zero intervention), ISO/IEC 9126 tries to develop a common understanding of the project’s objectives and goals.

JavaScript. In an article from Wikipedia said that JavaScript, often abbreviated as JS, is a high-level, interpreted programming language. It is a language which is also characterized as dynamic, weakly typed, prototype-based and multi-paradigm. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content engineering. It is used to make web pages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.

MySQL. MySQL, pronounced either “My S-Q-L” or “My Sequel,” is an open source relational database management system as said from an article posted at Techterms. It is based on the structure query language (SQL), which is used for adding, removing, and modifying information in the database. Standard SQL commands, such as ADD, DROP, INSERT, and UPDATE can be used with MySQL. MySQL can be used for a variety of applications, but is most commonly found on Web servers. A website that uses MySQL may include Web pages that access information from a database. These pages are often referred to as “dynamic,” meaning the content of each page is generated from a database as the page loads. Websites that use dynamic Web pages are often referred to as database-driven websites. Many database-driven websites that use MySQL also use a Web scripting language like PHP to access information from the database. MySQL commands can be incorporated into the PHP code, allowing part or all of a Web page to be generated from database information. Because both MySQL and PHP are both open source (meaning they are free to download and use), the PHP/MySQL combination has become a popular choice for database-driven websites.

Notepad++. According to an article from Wikipedia, Notepad++ is a text editor and source code editor for use with Microsoft Windows. It supports tabbed editing, which allows working with multiple open files in a single window. The project’s name comes from the C increment operator.

PHP. In an article from Wikipedia said that PHP stands for “Hypertext Preprocessor.” (It is a recursive acronym). PHP is an HTML-embedded Web scripting language. This means PHP code can be inserted into the HTML of a Web page. When a PHP page is accessed, the PHP code is read or “parsed” by the server the page resides on. The output from the PHP functions on the page are typically returned as HTML code, which can be read by the browser. Because the PHP code is transformed into HTML before the page is loaded, users cannot view the PHP code on a page. This make PHP pages secure enough to access databases and other secure information. A lot of the syntax of PHP is borrowed from other languages such as C, Java and Perl. However, PHP has a number of unique features and specific functions as well. The goal of the language is to allow Web developers to write dynamically generated pages quickly and easily. PHP is also great for creating database-driven Web sites.

XAMPP. As defined by Wikipedia, XAMPP is a free and open source cross-platform web server solution stack package developed by Apache Friends, consisting mainly of the Apache HTTP Server, MariaDB database, and interpreters for scripts written in the PHP and Perl programming languages.

Related Studies
2D Game Engine
According to Chlumsk´y (2017), the core of every computer game lies the game engine. Whether it has been created specifically for the game or independently, its purpose is to take care of the technical side of the problem, and offer comprehensive tools to translate a game idea into a working computer program. Although two-dimensional games are being eclipsed by the ever increasing realism of modern three-dimensional graphics, I believe there is still place for them. If the capabilities of modern graphical hardware are utilized in 2D games, they can be just as visually stunning as 3D games, although in a different way. A game is in essence a graphical application. It can be based on either passive or active rendering. With active rendering, the entire game window is periodically redrawn several times per second, for the whole duration of the program.

3D Game-Based Learning System for Learning Achievement in Software Engineering Curriculum
According to Chung-Ho Su and Ching-Hsue Cheng (2013), their study aimed at investigating how game-based learning strategy affects student’s motivation and learning achievement in software engineering curriculum. To enhance software engineering learning, a 3D game-based learning system has been developed and evaluated to explore the students’ motivation, satisfaction and learning achievement, it is effectively helps students to enhance in learning activities based on ARCS learning model. The results show that learning motivations of students have significant impact on learning achievement, and learning achievements of students with game-based learning are better than those who use traditional face-to-face teaching. Therefore, we re-check each questionnaire item; this paper finds that the game-based learning challenging and attractiveness can lead to learners’ curiosity and immersion in learning activity. Meanwhile, nearly 80% students are satisfaction and 83% students are confidence for the curriculum learning after use the game-based learning system.

A Game-Based Learning Approach to Increase Female Participation in Science, Technology, Engineering, and Mathematics Field
In the study of Bonner (2015), the purpose of this work was to determine if a game-based learning application that was designed with female middle school students in mind could increase interest in computer science. The hope was that in doing so, female students would be more interested in possibly pursuing a career in a STEM field such as computer science (CS) which in turn would increase representation of women in STEM. Additionally, it was the hope of the study to that all students, not just the female, who played the game would become more interested in CS. The evaluation presented here is a first step towards this goal. Specific design requirements were developed to address some of the barriers females experience in early education. Findings show that students’ performance on the programming concept assessment question improved from the Pre-Experimental Survey to the Post-Game Survey. Regarding the design requirements, a majority of students found the game to be challenging but not too difficult which is in line with the requirement of uncertainty. Most indicated that the game was fun to play and would like to play the game with their friends in some capacity. A couple of students indicated that the game was too difficult to understand; however, most did not indicate that. After playing the game, students indicated that the gender of the character did not matter compared to a higher importance held before in the Pre-Experimental Survey. While students initially indicated a strong desire to learn more about programming, they also exited the experiment report that they had an increased desire to pursue a career in a CS related field. What these findings suggest is that the game was somewhat successful in increasing interest in STEM.

A Pilot Study On the Effectiveness and Acceptance of an Educational Game for Teaching Programming Concepts to Primary School Students
As stated by Giannakoulas and Xinogalos (2017) in their study, educational games are increasingly used in informal and formal educational settings for promoting active learning and gaining students’ interest in cognitively demanding subjects, such as programming. However, empirical studies that investigate the true impact of educational games on teaching and learning programming, especially to small aged students, are limited. This article presents the results of a pilot study that utilized the educational game Run Marco for teaching basic programming concepts to primary school students. Students’ performance was studied through specially designed worksheets, while their acceptance of the intervention was evaluated through a questionnaire that was based on the principles of the Technology Acceptance Model (TAM). The results of the pilot study showed that the educational game supported students in comprehending basic programming concepts, while the results regarding the acceptance of its usage in the learning process were quite positive. However, the game did not succeed in raising students’ interest as expected and further research is necessary in order to study the reasons for this fact and make informed choices on designing and utilizing such games.

A Rule-Based Framework for Educational Board Games
Stated in the study of Bontchev (2015), in last decade, educational games such as quizzes, puzzles and quests have provoked an increasing interest in new methods of learning and appeared to be an appeal motivating students to study in a way rather different than the traditional one. Board games use rule-driven approaches for both presentation and control. Traditional quizzes, puzzles and quests can be presented as multimedia board games, often with artificial agents simulating the opponent or a collaborator. The paper presents in brief a formal model of positional board games serving for educational purposes and discusses description of rules for game execution in temporal context. The model is planned to be used as a basic framework for the development of a multimedia game platform for an e- learning system providing adaptive courseware.

Design and Development of a Digital Game-Based Learning Module on Transportation
The study of Cress (2009), the results from the survey in his study concluded that DGBL was a viable tool for educating technology standard benchmarks; these results coincided with the research of Prensky (2001), Gee (2004), and Van Eck (2006). The game prototype was able to effectively meet 5 out of 14 energy standard benchmarks and 3 out of 13 transportation benchmarks. The game prototype was not intended to meet all technology standards presented but one SME stated, “With further development and research this module could satisfy many or all of these standards.” These results declared that the game prototype had the learning capability necessary for possible integration into a course curriculum. These results also concluded that the game was age appropriate for the suggested audience of children in kindergarten through fifth grade based on meeting a majority of benchmarks pertaining to those specific grade levels. As a secondary objective the researcher wanted to instill a sense of awareness towards energy efficiency in transportation. According to results from SME the game prototype was also successful in meeting this objective.

Design and Development of a Mobile Game – Based Learning Application in Synonyms, Antonyms, and Homonyms
In the study conducted by Elenita Red, Kenneth Edward Domingo, Kristian Martin Santos, and Joy Banaag of Malayan Colleges Laguna, the traditional way of teaching the students of these topics is providing books and classroom activities and these ways have somehow made the students uninterested. For this reason, a mobile game-based learning application was conceptualized following the design principles presented in the literature – a game that can help the students learn while having fun.

Development and Design of Problem Based Learning Game-Based Courseware
According to Chiung-Sui Chang, Jui-Fa Chen, Fei-Ling Chen (2013), In this research, they proposed a pbl game-based courseware called Programmers’ Adventure, which were tested by 65 college freshman majored in computer science in an university in Taiwan. The Programmers’ Adventure courseware is designed for users to familiarize with knowledge of programming language. Based on the results of pilot study, students’ subject knowledge about program language in application – cognitive process dimension has improved. In addition, game designers received positive feedback from students regarding the Programmers’ Adventure game.

Digital Game-Based Learning in Secondary Education
In the study of Huizenga (2017), it has shown that DGBL has the potential for improving (perceived) learning outcomes, engagement and (to a lesser extent) motivation for learning. For learning and engagement, the results were more positive than for motivation for learning. Many elements play a role in DGBL: competition, collaboration, an authentic context, usability, feedback, the role of the teacher and ability of the student. Mobile location based-games enable on-site learning and can make it possible to place the learning in and authentic environment. While it was difficult to locate teachers who currently use games in the classroom, there is much to be gained by preparing teachers to incorporate games into their teaching. However, considerable research is still needed to investigate the conditions in which games work best for whom and how student activities relate to the benefits of game.

Educational Games in Higher Education
The study of Ebru Yilmaz ?nce (2018) stated that computer games are classified as educational that contains educational items that are created for educational aim. It can be used as an educational material in a course. It is said that if a game is designed for learning, it should support the learning context perceived by the students as the best way to learn that game being the right type of game for the right games provide active and experiential learning, and are highly engaging.

Educational Math Software: A Supporting Tool for First Grade Students’ Achievement
The study of Al-Mashaqbeh and Al Dweri (2014) showed a progress on the part of the experimental group which used traditional teaching instruction supported with Educational Math Game Software (CMG). It was reflected positively in the first grade students’ achievement in math. The significant difference in the performance of the experimental group of students could be attributed to the use of computer game which supported students learning process by motivated them and gave them a chance to practice in the course. It emphasizes that computer math game make students enjoy math on the computer and receive regular feedback. The use of computer-math game as a supporting tool has been a positive addition to regular classroom math.

Educational Mobile Game “Math Jump”
As stated by Laine Tatu (2013) in her study, building and publishing a game might sound like an easy task but after the initial enthusiasm, it becomes a daunting journey of iterations and self-doubt. Games are entertainment and they should thrive to create fun and engagement. The game made in this thesis twists that fact, by bringing in an educational aspect that will benefit the player in real life situations while maintaining the entertainment factor as high as possible. The game ‘Math Jump’ is an educational multiplication game for young children. It is free to play and it is developed to utilize the new novel features found in modern smart phones and tablet-devices.
Game Inspired Tool Support for e-Learning Processes
In the study of Charles, Bustard, and Black. (2009), their paper has described some initial exploratory research into the use of games techniques to improve student engagement in e-learning. The overall objective is to help students reach their potential, which, as a side effect, includes reducing the student dropout rate. The work is being approached as a series of investigative experiments moving from a labor intensive face-to-face form of teaching to full e-learning, involving minimum tutor contact. The paper describes the first two stages in this sequence. The first stage introduced a group game to a traditional first year programming module and the second extended that approach to individual students. The results have been well beyond expectations in several respects though there are also reservations in each case.

Gaming in Education: Using Games as a Support Tool to Teach History
The study of Zirawaga, Olusanya and Maduku (2017) stated that a game can be used as a support tool to complement traditional teaching methods to improve the learning experiences of the learners while also teaching other skills such as following rules, adaptation, problem solving, interaction, critical thinking skills, creativity, team work, and good sportsmanship. Learning should not feel dull and it should not only mean rote memorization where students learn and grasp concepts through repetition or cramming. Teachers can take advantage of the energy and innovative thinking that is provided by using technology in learning to improve student performance.
HiStorya: A Game Based Mobile Learning Application
In the study of Miguel, Salvador, Guillen, and Nisperos (2015), with the growing consumer interest in smartphones, these devices are now being used for learning because of their portability. To motivate students to learn Araling Panlipunan and facilitate learning for them even if they are on-the-go or outside the school, HiStorya, a game-based mobile learning application was designed, developed, and tested in this study. The units and topics in the subject curriculum served as the basis for the game levels and content. The game categories and evaluation criteria were derived from the levels of assessment and proficiency level matrix indicated in the K-12 curriculum of the Philippines. The game preferences served as basis for the game, HiStorya will help the teachers engage their students un a fun way of learning through the utilization of technology.

Implementing a Game for Supporting Learning in Mathematics
According to the study of Katmada, Mavridis, and Tsiatsos (2014), the design and development of the prototype of a configurable online 2D game, aimed at assisting the educator in the teaching of primary and secondary school Mathematics. Furthermore, prototype was evaluated through a pilot study and a long-term intervention in real school settings, in order to assess its usability aspects and to find any possible flaws. According to the results of the two evaluation studies, the students’ opinions about the game were mostly positive, and they considered it to be a useful and engaging learning tool, regardless of age and gender. Furthermore, concerning the game’s usability, most of its features elicited average to positive responses from the students and the educators alike. Moreover, the educators encountered no difficulties in configuring the game, and the planned educational activities were concluded successfully. Thus, it was deduced that the particular game could actually be successfully incorporated and used by educators as a supplementary tool for the teaching of formal curricular material.

Pervasive Learning – Using Games to Tear Down the Classroom Walls
The study of Pløhn (2014) presented the concept and the prototype of the pervasive experimental game Nuclear Mayhem and showed how the game is designed to support learning in university studies. Participants in the game reported that they believe they gained a learning benefit from participating in the game. Since all of the students that completed the game also passed the exam, the learning outcome of the game is also indicated by the fact that the students were able to recall and use the learned material to solve a given problem (the exam project and the academic challenges on each level). However, there is still a need for a stronger connection between the game and the course in addition to better adapted academic challenges in the game relative to the individual players’ academic level.

Play in the Museum: Design and Development of a Game-Based Learning Exhibit for Informal Science Education
Rowe, Lobene, Mott, and Lester (2017) said that game-based learning environments show considerable promise for informal settings such as museums and science centers. Creating game-based learning environments for science museums raises challenges that are distinct from those raised by games for classrooms. The pilot study found that visitors achieve significant gains in sustainability knowledge, as well as high levels of engagement, while learning with the game. Boys were observed to actively engage with FUTURE WORLDS for significantly longer durations than girls, and young children engaged with the exhibit for longer periods than did older children. These individual differences underscore the importance of future work investigating adaptive pedagogical functionalities, as can be provided by intelligent tutoring system techniques, as well as automated detectors for diagnosing learners’ individual and group characteristics.

Teaching Effectively with Use of Game-Based Interactive Mathematics
The study of Libradilla, Teves, and Teves (2015) concludes that pupils show interest to learn math because of the features of the game such as color and graphics, sounds and time element that makes it more engaging and fun. The performance of the pupils in mathematics was higher when game-based math lessons were introduced. Game-based math lessons which is perceived by pupils as engaging, exciting and full of fun erases their perception of mathematics as a difficult subject. It is recommended that game-based math lesson be formally part of the Department of Education curriculum and trainings and seminars be conducted to orient the teachers in this classroom intervention for prompt implementation.

The Influence of Game-Based Programming Education on the Algorithmic Thinking
Gabor Kiss ; Zuzanna Arki (2016) said that three participants claimed that the difficulty in understanding the concept of programming and coding is because of the ineffective teaching strategies used during problem solving and coding. All students have different levels of computer usage abilities by same Information Technology Education in other countries too. Using playing games in teaching programming is productive and the kids can take the advantage of the different teaching methods. The situation does not change by students. The subject Programming requires the logical and algorithmic thinking from the students and the teachers have to develop these skills in the students, but the teachers have to consider the motivation and the precognition of the students before starting to teach any topic.

?

Chapter III
METHODOLOGY

This chapter provides the design of the system to be developed and will be illustrated in the Context Diagram, Project Design, Project Development using the Iterative Model.

Project Design
The study entitled “Development of 2D Puzzle Game for the School of Computer Studies”. It will be developed using HTML, CSS, Java Script, PHP, Adobe Photoshop CS5, and XAMPP, with the back end of MySQL database engine. The system is intended for three (3) users namely: System Administrator, Administrator, and the User. The System Administrator (game developer) is responsible for creating and designing the 2D Game-based Module, creating updates and maintaining the system. The Administrator is responsible for the maintenance of the system together with the System Administrator and monitoring the progress of the User. The Users are the School of Computer Studies students.

Figure 3. Context Diagram of Development of 2D Puzzle Game for the School of Computer Studies.
Figure 3 illustrates the three (3) external entities; the system administrator, the administrator and the user. The system administrator is responsible in managing profiles such as adding and updating accounts. The administrator can view the users’ progress in the game and is also responsible for monitoring and maintenance. The users are the students of the School of Computer Studies in City College of Tagaytay.

Figure 4. Use Case Diagram in the proposed system

Figure 5. Data Flow Diagram of Development of 2D Puzzle Game for the School of Computer Studies Level 1.
As shown in Figure 5, the system administrator will login by providing username and password. These credentials are then verified against the database records and if successful – will grant access to the system. From the system, the system administrator can add other administrators, by creating a new account with username and password, with which the new administrator will be able to login.

Figure 6. Data Flow Diagram of Development of 2D Puzzle Game for the School of Computer Studies Level 2.
As shown in Figure 6, the administrator can monitor the users’ data and can display their scores and progress. The user will create a personal account to access the system, this account will be saved to the database. The user will now be able to play games, the progress and data produced during the gameplay will be saved to the database. Next time the user logs in, the data will be synchronized to the previous state.

Project Development
To meet the objective of the Development of 2D Puzzle Game for the School of Computer Studies, the researchers used the iterative model that will serve as a guide for the development of the proposed system.

Figure 7. Iterative Model
The iterative methodology consists of six (6) phases which are:
Planning phase
The planning phase will be the initial step in the system development where in the researchers will make a project plan. The plan will be included with the details of the tasks that should be done and the time schedule for it to be completed. The proponents will also conduct a research related to the system to get information that can be used for the development of 2D Puzzle Game for the School of Computer Studies.

Analysis phase
Analysis phase is where the researchers will identify the problems. The gathered information will be discussed and analyzed to know what type of project design will be used that will be the guide in developing 2D Puzzle Game for the School of Computer Studies.

Design phase
In this phase, the researchers will make a project design that will show how the system will work. This will serve as a guide in developing the 2D Puzzle Game for the School of Computer Studies.

Testing phase
Testing phase is conducted to detect errors in the behaviours and structures of the modules, a program, or the system plan as a whole. A feedback is made necessary to the designing and programming phase if any error is found for correction. All the features and functions of the system will be tested to see if they are working properly.

Implementation phase
In implementation phase, the designing of the logical structures of models was defined in the program design phase, and the coding of the modules will be conducted. This is where the researchers will utilize their programming skills. It is where the actual creation of the system took place. Each module will be coded using PHP, HTML, as well as CC for designing. Unit test will be conducted in each module.

Maintenance phase
Maintenance phase only occurs once the system is operational. Implementation of changes that the system may undergo or implementations of new requirements after the system is deployed are included in this phase. Certain types of maintenance will be applied on the errors or problems on the system, whether it’s the same error or a foreseen one or when giving the system some updates or enhancements.

Evaluation Procedure
In the evaluation phase, the researchers will review all the necessary things/factors that are needed in the completion of the system based on the system.
Results will be analyzed to determine if the desired output is met through the given input. For the final evaluation sheet will be given to respondents. The comments, suggestions, and recommendation will be used to improve and enhance the system. The study will be used the Evaluation Criteria for software
Table 1 shows the numerical rating and its and its equivalent interpretation to scale the result of project evaluation.
Table 1. System Evaluation Sheet Numerical and Descriptive
Numerical Rating Interpretation Definition
4.21-5.00 Excellent The system fully meets and far exceeds the most expectations.
3.41-4.20 Very Good The system fully meets and exceeds the several expectations.
2.61-3.40 Good The system fully meets all expectation.
1.81-2.60 Fair The system does not fully meet all expectations.
1.00-1.80 Poor The system fails to meet expectation to a significant degree in several areas.

Gathered data will be computed by using Mean Range Formula to conclude if the proposed system met the Software Factors Standard for Acceptance.
REFERENCES
Published Articles
Al-Mashaqbeh I., Al Dweri A. 2014. “Educational Math Game Software: A Supporting Tool for First Grade Students’ Achievement”. Journal of Education and Practice, Vol.5, No.5, pp 134-141.
Arki Z., Kiss G. 2016. “The Influence of Game-Based Programming Education on the Algorithmic Thinking”. Procedia – Social and Behavioral Sciences 237 (2017): pp 613–617
Bonner, D. C. 2015. “A Game-Based Learning Approach to Increase Female Participation in Science, Technology, Engineering, and Mathematics Field”.
Bontchev, B. 2015. “A Rule-Based Framework for Educational Board Games”
Charles, M, Bustard, D, and Black, M. 2009. “Game Inspired Tool Support for e-Learning Processes”. Electronic Journal of e-Learning Volume 7 Issue 2: pp 101-110. Available online at www.ejel.org
Chiung-Sui Chang, Jui-Fa Chen, Fei-Ling Chen. 2015. “Development and Design of Problem Based Learning Game-Based Courseware”. International Conference e-Learning
Chlumsk´y, V. 2013. “2D Game Engine”. Czech Technical University in Prague – Faculty of Information Technology – Department of Software Engineering
Chung-Ho Su, Ching-Hsue Cheng. 2013. “3D Game-Based Learning System for Learning Achievement in Software Engineering Curriculum”. TOJET: The Turkish Online Journal of Educational Technology – April 2013, volume 12 Issue 2
Cress B. 2009. “Design and Development of a Digital Game-Based Learning Module on Transportation”. Graduate College of Bowling Green State University
Giannakoulas, Xinogalos. 2017. “A Pilot Study On the Effectiveness and Acceptance of an Educational Game for Teaching Programming Concepts to Primary School Students”
Huizenga J.C. 2017. “Digital Game-Based Learning in Secondary Education”. University of Amsterdam
Ince, E. Y. 2018. “Educational Games in Higher Education”. Simulation and Gaming Chapter 2 pp. 27 – 39.
Katmada A., Mavridis A., Tsiatsos T. 2014. “Implementing a Game for Supporting Learning in Mathematics”. The Electronic Journal of e-Learning Volume 12 Issue 3: pp 230-242. Available online at www.ejel.org
Pløhn T. 2014. “Pervasive Learning – Using Games to Tear Down the Classroom Walls”. The Electronic Journal of e-Learning Vol. 12, Issue 3: pp 299-311. Available online at www.ejel.org
Rowe J., Lobene E., Mott B., Lester J. 2017. “Play in the Museum: Design and Development of a Game-Based Learning Exhibit for Informal Science Education”
Tatu L. 2013. “Educational Mobile Game “Math Jump””. Turku University of Applied Sciences
Zirawaga V., Olusanya A., Maduku T. 2017. “Gaming in Education: Using Games as a Support Tool to Teach History”. Journal of Education and Practice Vol 8, 15: pp 55-64.

Unpublished Articles
Libradilla H., Teves K., Teves A. 2015. “Teaching Effectively with Use of Game-Based Interactive Mathematics”. International Conference on Trends in Economics, Humanities and Management, pp 169-173.
Miguel Z., Salvador R., Guillen C., Nisperos S. 2015. “HiStorya: A Game Based Mobile Learning Application”. IJODeL, Vol. 1, Nos.1 & 2: pp 27-39.
Red E., Domingo K., Santos K., Banaag J. 2013. “Design and Development of a Mobile Game – Based Learning Application in Synonyms, Antonyms, and Homonyms”. International Journal of the Computer, the Internet and Management Vol.21 No.3: pp 32-38

Websites
2D Game retrieved February 2018 from https://www.giantbomb.com/2d/3015-1427/
Definition of Animation retrieved February 2018 from https://en.wikipedia.org/wiki/Animation
Definition of Cascading Style Sheet retrieved February 2018 from https://techterms.com/definition/css
Definition of Context Diagram retrieved February 2018 from http://www.modernanalyst.com/Careers/InterviewQuestions/tabid/128/ID/1433/What-is-a-Context-Diagram-and-what-are-the-benefits-of-creating-one.aspx
Definition of Data Flow Diagram retrieved February 2018 from https://www.lucidhart.com/pages/data-flow-diagram
Definition of Dreamweaver retrieved February 2018 from https://en.wikipedia.org/wiki/dreamweaver
Definition of Game Development retrieved February 2018 from https://en.wikipedia.org/wiki/Video_game_development
Definition of Game-Based Learning retrieved February 2018 from https://en.wikipedia.org/wiki/game-based-learning
Definition of Graphics retrieved February 2018 from https://techterms.com/definition/graphics
Definition of February 2018 JavaScript retrieved from https://en.m.wikipedia.org/wiki/Javascript
Definition February 2018 of MySQL retrieved from https://techterms.com/definition/mysql
Definition of Notepad++ retrieved February 2018 from https://en.wikipedia.org/wiki/notepad++
Definition of PHP retrieved February 2018 from https://techterms.com/definition/php
Definition of XAMPP retrieved February 2018 from https://en.wikipedia.org/wiki/XAMPP