Verkkopelin päivitysprojektin suunnittelu ja toteutus

Insinöörityön tarkoituksena oli suunnitella ja toteuttaa Flash-ohjelmalla rakennetun Arkkitehtuurimme vuosikymmenet -verkkopelin päivittämisprojekti. Alkuperäisen pelin toteutustavan vuoksi pelin toimimattomuus mobiililaitteissa oli aiheuttanut sen, ettei se enää tavoittanut kohderyhmäänsä tarpeeksi laajasti. Lisäksi pelin yleinen ulkoasu ei sopinut yhteen tilaajaorganisaation uudistetun visuaalisen ilmeen kanssa. Ennen uudistamisprojektin aloittamista pelin kohderyhmälle tehtiin kysely, jonka perusteella arvioitiin pelin etenemislogiikan, pisteiden laskun ja muiden pelillisten elementtien muutostarve. Saadun palautteen pohjalta rakennettiin uusi alustariippumaton pelisovellus pääosin HTML- ja JavaScript-kielten avulla. Tuloslistaa varten luotiin yksinkertainen taulu MySQL-tietokantaan ja pisteet tallennettiin tietokantaan yhdistelemällä PHP- ja Ajax-koodaustekniikoita. Uuden pelisovelluksen rakentamisessa käytettiin responsiivisia verkkokehitystekniikoita, jotta pelin pelaaminen olisi mahdollisimman sujuvaa usealla eri päätelaitteella. CSS-merkintäkielen avulla sovelluksen ulkoasu suunniteltiin mukautumaan käytettävän päätelaitteen ruutukoon mukaisesti. Pelisovelluksen graafinen ilme ja visuaaliset elementit suunniteltiin ja toteutettiin yhteistyössä tilaajaorganisaation graafikon kanssa. Pelisovelluksesta on tarkoitus tehdä myös ruotsinkielinen versio siten, että valmis suomenkielinen sovellus kloonataan ja suomenkieliset tekstit korvataan niiden ruotsinkielisillä versioilla. Työn viimeistelyvaiheessa valmis kaksikielinen sovellus siirretään tilaajaorganisaation palvelimelle ja linkki valmiiseen sovellukseen lisätään tilaajaorganisaation verkkosivuille.The purpose of this thesis was to plan and implement an upgrade project for a Flash-based learning game called Arkkitehtuurimme vuosikymmenet. Due to the execution of the original game it did not work on mobile devices and thus did not reach the target audience widely enough. In addition, the overall layout of the game was not following the client organization’s renewed visual guidelines. Before starting the practical part of the project a survey was performed among the target group. The purpose of this survey was to evaluate the need for change for several gaming elements. Based on the feedback received, a new cross-platform game application was constructed by using mainly HTML- and JavaScript-coding languages. A simple table for the result list was created in MySQL-database and the function for saving the score into the database was created by combining PHP- and AJAX-coding techniques. Responsive web design techniques were used in order to build the renewed application so that the gaming experience would not depend on the device used to play the game. The layout of the application was designed to adapt to the screen size of the user’s device by using the CSS-markup language. The visual elements of the game were designed and carried out in co-operation with the client organization’s graphic designer. It is intended to create a Swedish-language version of the game later by cloning the Finnish-language application and replacing the Finnish texts with their Swedish versions. When the bilingual application is ready, it will be transferred to the client organization’s server and a link to the finished application will be added to the organization’s website