Keräilykorttipelin toteutus HTML5- ja Javascript-tekniikoilla

HTML5-tekniikka sekä Javascript tuen laajuus selaimissa vaihtelee. Tässä työssä kyseisiä tekniikoita tutkitaan ja selvitetään niiden toimivuus keräilykorttipelin tarvittavien ominaisuuksien osalta. Tuet kartoitetaan viiden yleisimmän selaimen osalta. HTML5 tukee WebSocket-ominaisuutta, mutta kaikki selaimet eivät tue ominaisuutta tai se on poistettu käytöstä. Työssä etsitään tiedonsiirtotekniikan korvaaja, jota testataan ja verrattaan yleisesti käytettäviin tekniikoihin. Socket.io oli nopea tekniikka ja viisi yleisintä selainta tuki kyseistä tekniikkaa. Tämän vuoksi Socket.io-tekniikka soveltuu keräilykorttipeliin hyvin. Työssä tutkitaan keräilykorttipeliin liittyviä ongelmia sekä ratkaistaan ilmenneet ongelmat. Keräilykorttipelissä kyseisiä ongelmia ilmeni hyvin vähän. HTML5 animaatio tutkitaan että se on optimoitu hyvin, jotta käyttäjälle tulee miellyttävä peli kokemus. Keräilykorttipeliin lisäksi tehdään käytännön toteutuksena pakkaeditorin prototyyppi, jossa käytetään drag&drop-tekniikkaa. Tämän vuoksi myös drag&drop-tekniikan tuki on selainten osalta kartoitettu myös työssä, sekä testattu käytännön toteutuksena prototyypissä. Prototyypin tarkoitus on kartoittaa mahdolliset tulevat ongelmat sekä auttaa varsinaisen pakkaeditorin tuotantoversiossa.

HTML5 and Javascript are seen as the fundamental techniques for building modern web applications. Unfortunately, their support in current state-of-the-art web browsers varies. In this thesis those technologies are researched and checked if the functionality of the collection card game can be done without any major changes. Support for HTML5 and Javascript are studied in five most popular web browsers. HTML5 defines WebSocket technology but all browsers do not support it or it disable it by default. In this work, we will find replacement for the data transfer technology, test it and compare it to the most common data transfer technologies. Socket.io was found to be the best choice for the collection card game because it is fast and is well supported by the five most popular web browser. Problems and solutions that occurred in collection card game is explained in this work. Only few problems occurred in the collection card game. HTML5 animation is checked in the work if it is optimized for the game, so the player will have good gaming experience. Deck editor prototype is made for practical work to test functionality of the upcoming production version. In the deck editor player can make own decks for the game with drag&drop-functionality. Drag&drop support is also researched with this thesis, and tested with practical work so the production version will have all the upcoming problems solved.