Aplicarea tehnicilor inteligenței artificiale și comunicarea în timp real în jocurile de tip browser

Transcription

1 UNIVERSITATEA ALEXANDRU IOAN CUZA IAŞI FACULTATEA DE INFORMATICĂ LUCRARE DE LICENŢĂ Aplicarea tehnicilor inteligenței artificiale și comunicarea în timp real în jocurile de tip browser Propusă de Hogaș E. Vlad Marius Sesiunea: Februarie, 2017 Coordonator știinţific Asistent, dr. Vasile Alaiba 1

2 UNIVERSITATEA ALEXANDRU IOAN CUZA IAŞI FACULTATEA DE INFORMATICĂ LUCRARE DE LICENŢĂ Aplicarea tehnicilor inteligenței artificiale și comunicarea în timp real în jocurile de tip browser Hogaș E. Vlad Marius Sesiunea: Februarie, 2017 Coordonator știinţific Asistent, dr. Vasile Alaiba 2

3 DECLARAŢIE PRIVIND ORIGINALITATEA ŞI RESPECTAREA DREPTURILOR DE AUTOR Prin prezenta declar că Lucrarea de licență cu titlul Aplicarea tehnicilor inteligenței artificiale și comunicarea în timp real în jocurile de tip browser este scrisă de mine şi nu a mai fost prezentată niciodată la o altă facultate sau instituţie de învățământ superior din ţară sau străinătate. De asemenea, declar că toate sursele utilizate, inclusiv cele preluate de pe Internet, sunt indicate în lucrare, cu respectarea regulilor de evitare a plagiatului: toate fragmentele de text reproduse exact, chiar şi în traducere proprie din altă limbă, sunt scrise între ghilimele şi deţin referinţa precisă a sursei; reformularea în cuvinte proprii a textelor scrise de către alţi autori deţine referinţa precisă; codul sursă, imagini etc. preluate din proiecte open source sau alte surse sunt utilizate cu respectarea drepturilor de autor şi deţin referinţe precise; rezumarea ideilor altor autori precizează referinţa precisă la textul original. Iaşi, Absolvent Hogaș Vlad Marius (semnătura în original) 3

4 DECLARAŢIE DE CONSIMŢĂMÂNT Prin prezenta declar că sunt de acord ca Lucrarea de licență cu titlul Aplicarea tehnicilor inteligenței artificiale și comunicarea în timp real în jocurile de tip browser, codul sursă al programelor şi celelalte conţinuturi (grafice, multimedia, date de test etc.) care însoţesc această lucrare să fie utilizate în cadrul Facultăţii de Informatică. De asemenea, sunt de acord ca Facultatea de Informatică de la Universitatea Alexandru Ioan Cuza Iași să utilizeze, modifice, reproducă şi să distribuie în scopuri necomerciale programele-calculator, format executabil şi sursă, realizate de mine în cadrul prezentei lucrări de licenţă. Iaşi, Absolvent Hogaș Vlad Marius (semnătura în original) 4

5 Cuprins Introducere... 6 Motivație... 6 Context... 7 Cerințe funcționale... 7 Abordare tehnică... 8 Contribuții Informații generale despre arhitectură și joc Aplicații asemănătoare Implementare Arhitectura aplicației Dezvoltarea aplicației client și al jocului Interfețele jocului Interfața de autentificare și înregistrare Interfața meniu Interfața de configurare a jocului Interfața de așteptare a jucătorilor Interfața de joc Modul singleplayer și aplicarea tehnicilor de inteligență artificială Modul multiplayer și comunicarea în timp real dintre client și server Dezvoltarea aplicației server Cererile HTTP WebSockets Validarea informațiilor primite prin WebSocket de la jucător Concluzii generale Bibliografie

6 Introducere WarTank este un joc cu o grafică 2D care poate fi jucat în browser de una sau mai multe persoane. Este o variantă modificată și îmbunătățită a jocului Battle City, joc care a apărut pentru prima oară în anul 1985 pe consolele de jocuri Family Computer de la Nintendo. În România a fost cunoscut sub denumirea de Tank A 1990, o versiune modificată neoficial a jocului Battle City, fiind jucat pe o consolă foarte populară în România, numită Terminator. (1) Jucătorul, cel care controlează un tanc, trebuie să distrugă tancurile inamice controlate de calculator sau de alți jucători reali, pe o hartă aleatorie cu diferite tipuri de teren şi obstacole care pot fi distruse ori peste care nu poți trece. Jocul are mai multe tipuri de puteri pe care le pot avea tancurile sau care pot apărea pe hartă. Motivație Nu sunt un amator al jocurilor de tip browser, dar am vrut să folosesc JavaScript-ul şi la altceva față de până acum, și anume dezvoltarea unor funcționalități pentru pagini web și aplicații. Am ales acest tip de joc pentru că a fost unul dintre jocurile mele preferate în copilărie și știu că îi pot aduce îmbunătățiri, iar în acelasi timp el să rămână la fel de simplu și distractiv, fără să îți ocupe prea mult din timpul liber jucându-l. Statisticile arată o creștere treptată a jocurilor sociale din anul 2012, unde veniturile dezvoltatorilor de jocuri din Statele Unite erau de 4,55 miliarde de dolari, aşteptându-se să crească până la peste 12 miliarde în (2) 6

7 Figura 1: Veniturile dezvoltatorilor de jocuri din Statele Unite Context Jocurile sunt activitatea recreațională și distractivă a omului dintotdeauna, indiferent de vârstă. Jocurile video au apărut în jurul sfârșitul secolului XX și au devenit rapid foarte apreciate odată cu apariția calculatorului și a consolelor de jocuri. Ele au avut un loc special în copilăria tuturor și chiar şi în ziua de astăzi, când am devenit mai ocupați, tot încercăm să ne bucurăm măcar puțin de ele, dorind să ne amintim puțin de copilărie. Jocurile video pe calculator și pe console sunt mai populare decât cele pe care le poţi juca în browser, însă cu încetul acest aspect a început să se schimbe datorită faptului că nu mai trebuiesc instalate pe sistem și pot fi jucate folosind doar o conexiune la internet. Practic este ceea ce numim acum jocuri sociale, care îti dau sansa să joci într-un mod de colaborare, rare fiind cele jucate în modul singleplayer. Cerințe funcționale Înregistrarea și autentificarea Utilizatorii se vor putea înregistra și autentifica folosind o adresa de , pe care o pot confirma în maxim o săptămână accesând un link trimis pe adresa lor de . 7

8 Meniul jocului Jucătorii vor putea alege să joace jocul singleplayer, jucând împotriva mai multor tancuri controlate de calculator sau multiplayer jucând împotriva altor tancuri controlate de alți jucători, prin simpla trimitere a unul link unic. Accesând un alt meniu vor putea alege din mai multe tipuri de tancuri cu diferite caracteristici; spre exemplu unul poate avea mai mult blindaj, dar poate fi mai încet, în timp ce un altul va avea viteză mai mare, însă va lua mai puțin din viață. Se va putea alege și dintre hărți, altele fiind mai complicate, fiind necesar să te miști mai mult până se va ajunge la adversar, altele mai simple, care vor avea mai puține obstacole. Autentificarea sau înregistrarea și trecerea prin meniu se cere a fi foarte rapidă, deoarece vorbim de un joc ce poate fi jucat într-o scurtă pauză de lucru. Jocul Deoarece acest joc se va putea juca și singleplayer, trebuie să includem în dezvoltarea lui și un sistem de IA (Inteligență Artificială) pentru tancurile controlate de calculator. Partea de multiplayer trebuie să conțină o metodă de invitație a jucătorilor și o etapă a jocului unde se va aștepta să între toți jucătorii pentru a începe simultan jocul. Abordare tehnică Javascript Ca limbaj de programare, atât pentru partea de server, cât și pentru cea de client voi folosi Javascript. Creat de Netscape în anul 1995 ca o extensie HTML pentru Netscape Navigator 2.0, Javascript a avut ca funcție principală manipularea documentelor HTML și de validare a formularelor. Din cauza numelor similare, lumea confundă Javascript cu Java. Cu toate că ambele au structura lexicală a limbajelor de programare, ele sunt două limbaje diferite. Spre deosebire de C, C# și Java, Javascript este un limbaj interpretat, asta însemnând că are nevoie de un interpretor ; în cazul de față Javascript este interpretat și executat de browser. (3) 8

9 Node.js Node.js este o platformă software ce utilizează Javascript ca limbaj de scripting și este folosită pentru a construi aplicații de rețea scalabile, în special aplicațiile de comunicare și jocurile de tip browser, deoarece amândouă necesită o comunicare în timp real dintre server și un număr foarte mare de clienți. (4) Phaser Phaser este un framework gratuit și rapid pentru crearea de jocuri HTML5 pentru browser. El te ajută să grăbești procesul de dezvoltare, scăpându-te de părțile plictisitoare în dezvoltarea unui joc. Am ales Phaser pentru că este unul dintre cele mai populare framework-uri, cu o comunitate activă și cu un număr mare de plugin-uri. (5) Socket.IO Este o librărie Javascript pentru aplicațiile care necesită o comunicare bidirecțională între server și client. Această librărie este formată din două părți: o librărie care rulează în browser pe partea de client și o librărie pentru Node.js care rulează pe partea de server și este nevoie de amândouă pentru a funcționa. (6) MySQL Pentru stocarea datelor voi folosi un sistem de gestiune a bazelor de date numit și MySQL, cel mai popular sistem open-source la ora actuală, fiind folosit și de site-urile mari precum Facebook, Twitter, YouTube, Yahoo! și multe altele. (7) HTML5 HTML5 este ultima îmbunătățire a standardului care definește HTML-ul. Noul termen reprezintă versiunea nouă a HTML-ului, prin noi elemente, atribute și comportamente, dar și printrun set mai larg de tehnologii ce permite o diversitate mai mare și mai puternică de site-uri și aplicații web. 9

10 Contribuții Lucrarea este structurată în 3 capitole, primul capitol conținând informații generale despre aplicație și arhitectura acesteia, care este una de tip client-server, iar în celelalte două capitole sunt oferite detalii de implementare și vor fi explicate în mod separat contribuțiile mele în procesul de dezvoltare pe partea de client și pe cea de server. Capitolul 1: Informații generale despre arhitectură și aplicație Capitolul 2: Dezvoltarea aplicației client și a jocului - va conține trei subcapitole la care am avut cea mai mare contribuție, unde am încercat să dobândesc cele mai multe cunoștințe și să-mi satisfac unele curiozități: utilizarea unei biblioteci pentru crearea de jocuri HTML5; utilizarea unui sistem de reguli în modul singleplayer pentru dezvoltarea părții de inteligență artificială; comunicarea în timp real a mai multor clienți cu server-ul în modul multiplayer. Capitolul 3: Dezvoltarea aplicației server În dezvoltarea aplicației server m-am axat mai mult pe comunicarea dintre client și server, atât prin cereri de tip HTTP, cât și prin cea în timp real cu ajutorul protocolului WebSockets: înregistrarea și autentificarea clienților folosind cereri HTTP; utilizarea unui sistem împotriva trișorilor și validarea informațiilor primite prin WebSocket de la jucător. 10

11 1 Informații generale despre arhitectură și joc WarTank este un joc multiplayer de tipul arcade și de acțiune, în care se pune accentul pe provocările fizice, inclusiv coordonarea mână-ochi și reflexe, iar scopul jucătorului este de a avea un scor cât mai mare prin distrugerea inamicilor. Jocul poate fi jucat împotriva prietenilor sau a oricărei persoane care are o conexiune la internet și un browser, dar și în modul singleplayer, adică împotriva tancurilor controlate de calculator. 1.1 Aplicații asemănătoare Înainte de a începe dezvoltarea proiectului am căutat jocuri asemănătoare, pentru a vedea ce funcționalități au, pe care dintre ele pot să le dezvolt și ce anume aș putea să adaug. Cele mai interesante sunt: Massive Tanks - massivetanks.com Jocul se poate juca numai multiplayer, de către toată lumea care accesează site-ul. Nu poți selecționa persoanele cu care să joci, nu are autentificare și nu există mai multe tipuri de tancuri cu diferite caracteristici. Tinny Tanks - multiplayer.gg Acest joc poate fi jucat atât singleplayer, cât și multiplayer, are o multitudine de funcționalități, de la crearea hărților până la upgradarea tancului, obstacolele sunt instrumente de birou și nu pot fi distruse, iar proiectilele sunt respinse. Figura 2: Jocul Massive Tanks Figura 3: Jocul Tinny Tanks 11

12 1.2 Implementare La începerea proiectului am utilizat un generator Yeoman pentru creare de jocuri HTML5 cu Phaser, care m-a ajutat cu structura de bază a jocului și cu un cod sursă inițial, fiind folosite cele mai bune practici. Yeoman pune la dispoziție o listă de generatoare care ajută la demararea unui proiect rapid, folosind cele mai bune practici și instrumente pentru a rămâne productiv. Un generator este o schelă de proiect completă care vine cu anumite instrumente utile. Dacă se dorește folosirea unuia dintre generatoarele puse la dispoziție pentru a începe un proiect nou, trebuie mai întâi instalat Node.js și managerul de pachete NPM, apoi instalate modulele necesare pentru NPM, folosind comanda npm install -g yo generator-phaser, care instalează global Yeoman (librărie ce ajută la crearea proiectelor) și generatorul pentru Phaser, apoi se poate invoca generatorul și crea schela proiectului folosind comanda yo phaser. Pentru îmbunătățirea productivității în dezvoltarea unei aplicații web, fluxul de lucru Yeoman cuprinde trei tipuri de instrumente: instrumentul pentru schela proiectului (yo); instrumentul pentru build, adică pregătirea proiectului pentru producție (Gulp, Grunt, etc); managerul pentru pachete de librării sau scripturi (NPM sau Bower). Se poate vizualiza jocul în browser prin rularea comenzii npm start în directorul proiectului, iar datorită unui pachet din cele instalate odată cu generatorul, numit budo, se va porni un server de dezvoltare care va actualiza pagina web în timp ce se salvează fișierele. Când proiectul este terminat sau se dorește să fie mutat în producție ceea ce este gata, se rulează comanda npm run build și se vor creea fișierele care se pot urca pe server, în folderul /build. Acțiunea comprimă și minimizează fișiere individuale într-un fișier mai mare, care poate fi descărcat mai repede la accesarea pagini web, iar de aceasta se ocupă următoarele librării instalate de managerul de pachete NPM pentru partea de dezvoltare: clean-css este o librărie rapidă și eficientă pentru comprimarea fișierelor CSS; aceasta ajută la o încărcare mai rapidă a site-ului; 12

13 htmlprocessor procesează fișierele html prin utilizarea comentariilor speciale; mkdirp crează directoare și subdirectoare necesare, ca de exemplu directorul build împreună cu restul subdirectoarelor; ncp este o unealtă pentru copierea fișierelor asincron, de exemplu mută toate fișierele necesare în folderul /build; uglify-js comprimă și minimizează fișierele javascript; browserify este un sistem simplu, bazat pe procedura de încărcare a modulelor în Node.js. Practic a fost portată metoda require( module ) din Node.js și au implementat-o să funcționeze similiar, în browser, pe client. Acesta caută toate apelurile require() din aplicație și crează un singur fișier (bundle) cu aceste resurse, pe care îl încarcă ulterior în aplicație. 1.3 Arhitectura aplicației Modelul client-server este o structură sau arhitectură care partajează procesarea între furnizorii de servicii, numiți servere și elementele care solicită servicii, numite clienți. Clienții și serverele comunică printr-o rețea de calculatoare, de obicei prin Internet, având suporturi hardware diferite, dar pot rula și pe același sistem fizic. Un server (fizic) rulează unul sau mai multe programe server, care partajează resursele existente cu clienții. Clientul nu partajează niciuna dintre resursele proprii, ci apelează la resursele serverului prin funcțiile server. (8) Pentru comunicarea între client și server am folosit configurația recomandată pe site-ul celor de la Socket.IO pentru utilizarea lui cu Express. În această configurație Express este utilizat pentru a trata cererile HTTP care vin în aplicația Node.js. Modulul Socket.IO se atașează de Express și ascultă pe același port pentru conexiunile WebSocket de intrare. Când un browser se conectează la aplicație, accesează index.html care îi servește toate fișierele necesare de JavaScript și CSS pentru început. JavaScript-ul în browser va iniția o conexiune spre Socket.IO care va crea o conexiune WebSocket. Fiecare conexiune WebSocket are un identificator unic pentru ca Node.js și Socket.IO să țină evidența cui i se trimite mesajul. 13

14 Figura 4: Modelul și arhitectura client-server Comunicarea trebuie să fie una în timp real, dar trebuie să specificăm că browser-ele nu comunică direct între ele, ci vor transmite mesaje către server, care sunt procesate și retransmise înapoi la browser-ele adecvate. Toate aceste mesaje de la browser conțin informații despre jucător, despre poziția lui, despre statusul lui, iar de la server vor fi trimise la alți jucători. Mesajele care curg de la client la server și înapoi pot fi puțin mai greu de urmărit, mai ales când sunt conectați mai mulți clienți odată. Din fericire, există un instrument foarte util în browser-ul Google Chrome. Dacă deschideți fereastra cu instrumente pentru dezvoltatori și mergeți la fila Network, veți putea monitoriza tot traficul WebSocket pentru respectiva fereastră făcând click pe butonul WS de-a lungul barei de instrumente de jos. 14

15 În panoul WebSocket apare în coloană din stânga o listă de conexiuni. Dacă apăsați pe una din conexiuni, apoi pe fila Frames se va afișa o listă de mesaje ce au avut loc prin acea conexiune WebSocket. În imaginea de mai jos se poate vedea un exemplu: Figura 5: Monitorizarea traficului și a schimbului de mesaje WebSocket Modulele Express si Socket.IO nu vin la pachet cu Node.js, ele sunt dependențe externe care trebuiesc descărcate și instalate separat. NPM (Node Package Manager) se ocupă de asta folosind doar comanda npm install atâta timp cât toate dependențele sunt listate in fișierul package.json. Acesta se poate găsi în rădăcina directorului de proiect și conține următorul fragment JSON pentru a defini dependențele de proiect: "dependencies": { "async": "^2.1.4", "body-parser": "^1.15.2", "express": "^4.14.0", "express-validator": "^3.1.2", "mysql": "^2.12.0", "nod er": "^2.7.0", "phaser": "^2.6.2", "socket.io": "^1.7.2" Secțiune de cod 1: Fragment JSON pentru a defini dependențele de proiect din package.json 15

16 Pe lângă Express și Socket.IO mai sunt instalate și alte librării pe care le folosim în proiect: async este un modul util și simplu pentru a lucra cu partea asincrona de Javascript; body-parser este folosit pentru parsarea cererilor primite prin HTTP, iar în proiectul de fața el se atașează la librăria Express; express-validator validează parametrii primiți din cererile de la HTTP și se atașează la fel de librăria Express. De exemplu, el se ocupă de validarea -ului la înregistrare, dar și de mulți alți parametri; mysql este un modul de Node.js ce implementează protocolul MySQL. Cu ajutorul lui putem crea o conexiune la baza de date în care putem să executăm interogări SQL; nod er este un modul cu ajutorul căruia se pot trimite -uri simplu, folosind protocolul SMTP; phaser este biblioteca jocului. 16

17 2 Dezvoltarea aplicației client și al jocului Folosind un generator Yeoman pentru un start mai rapid cum am specificat și în Capitolul 1, structura fișierelor și a folderelor a fost creată automat folosind cele mai bune practici pentru dezvoltarea jocului. Se poate observa în imaginea de mai jos structura folderelor și a fișierelor: Figura 6: Structura fișierelor assets aici se află toate imaginile si fișierele de configurare JSON necesare pentru aplicație; build după rularea comenzii npm run build aici se vor găsi toate fișierele care trebuie urcate în producție pentru rularea aplicației; css folderul cu toate fișierele CSS; node_modules folderul cu toate modulele instalate de NPM (ex: phaser, socket.io, express etc); server fișierele javascript pentru partea de server a aplicației; src fișierele javascript pentru partea de client care include codul jocului; index.html primul fișier accesat în momentul în care un browser se conectează la aplicație; package.json conține atât date despre aplicație (ex: nume, versiune) cât și numele și versiunea pentru toate modulele și bibliotecile necesare ca aplicația să ruleze. Pentru a începe procesul de dezvoltare al jocului trebuie să înțelegem mai întâi câteva caracteristici de bază a bibliotecii Phaser. 17

18 Phaser este o bibliotecă pentru jocuri HTML5 care ajută dezvoltatorii la crearea de jocuri foarte complexe, într-un timp cât mai scurt, singura cerință a browser-ului este să suporte tag-ul HTML canvas. Inițial canvas-ul a fost creat de Apple, în 2004, pentru a putea implementa widget-urile din dashboard și pentru a suporta grafica în browser-ul Safari. Ulterior a fost adoptat de Firefox, Opera și Google Chrome, pentru ca în prezent, să facă parte din specificațiile HTML5 și să fie folosit în interiorul unui document HTML cu scopul de a desena folosind JavaScript. (9) folderul src: Se poate vedea cum prinde totul viață în următoarele linii de cod din fișierul main.js, const game = new Phaser.Game(1024, 608, Phaser.AUTO, 'wartank-game'); game.state.add('login', require('./states/login')); game.state.add('menu', require('./states/menu')); game.state.add('menu-select', require('./states/menu-select')); game.state.add('multiplayer', require('./states/multiplayer')); game.state.add('game', require('./states/game')); game.state.start('login'); Secțiune de cod 2: Codul din main.js În prima linie de cod se crează o instanță a obiectului Phaser.Game ce se atribuie unei constante numită game. Primii doi parametri sunt lățimea și înălțimea elementului canvas, în acest caz, 1024 x 608 pixeli. Aceasta este dimensiunea în care va fi afișat jocul, însă acesta poate fi mult mai mare. Al treilea parametru poate fi Phaser.CANVAS, Phaser.WEBGL sau Phaser.AUTO, cel din urmă fiind contextul de randare pe care doresc să îl utilizez. Parametrul recomandat este Phaser.AUTO care încearcă în mod automat să utilizeze WebGL, dar în cazul în care browser-ul sau dispozitivul nu acceptă, va folosi canvas. Cel de-al patrulea parametrul este id-ul elementului DOM în care este inserat elementul canvas. O funcționalitate interesantă pe care o are Phaser este managerul de stări (en: states management). Astfel dacă vrei să împarți jocul în blocuri de cod sau interfețe, pe fiecare dintre aceste interfețe o poți dezvolta ca o stare (en: state) și la fiecare schimbare de stare se eliberează memorie, resurse și se gestionează memoria de obiecte nefolosite din aplicație (en: manages garbage collection) care cu siguranță e un plus. 18

19 2.1 Interfețele jocului Jocul este împărțit în 5 stări numite și interfețe: login, menu, menu-select, multiplayer și game. Primele 4 stări fac parte din meniul jocului, iar game este jocul în sine. Login este starea care se încarcă automat la accesarea jocului Interfața de autentificare și înregistrare Figura 7: Interfața de autentificare și înregistrare Această interfață este starea login din managerul de stări Phaser care se încarcă automat la accesarea aplicației. Aici jucătorul se va putea autentifica sau să-și creeze un cont nou. În cazul în care jucătorul este deja autentificat, în locul formularului de autentificare îi va apărea numele și un button de Play pentru a trece la interfața următoare. La apăsarea butonului LOGIN sunt trimise datele formularului printr-o cerere HTTP de tip POST la server, folosind funcția jquery.post() care este o prescurtare a funcției jquery.ajax() din biblioteca jquery. 19

20 $.post(config.server + '/login', $('.login-form').serialize(), function (data) { if(data.success){ Cookies.set('user', data.data, { expires: 7 ); self.displayloggedin(data.data.username); else { $('.login-page.error-mess').text(data.message).show(); ); Secțiune de cod 3: Cererea HTTP de tip POST pentru autentificare În funcție de răspunsul primit de la server care este de tip JSON, ori afișăm mesajul de eroare dacă autentificarea nu a fost realizată cu succes, ori stocăm cheia de acces primită într-un cookie care expiră în 7 zile și afișăm numele utilizatorului împreună cu butonul de PLAY pentru trecerea la următoarea interfață. Figura 8: Autentificare sau înregistrare reușită Un cookie este un fișier creat de un site web pentru a stoca informații pe calculatorul pe care îl accesează. Cookie-urile sunt folosite pentru autentificare precum și pentru urmărirea comportamentului utilizatorului. Cheia de acces primită este un șir aleatoriu de litere și numere și este salvată într-un cookie pentru ca jucătorul să nu mai trebuiască să se autentifice de fiecare dată când accesează jocul de pe același calculator pentru o perioadă de timp. La fiecare accesare verificăm dacă există o cheie pe browser-ul utilizatorului, iar dacă există, o trimitem server-ului să vedem dacă acea cheie este validă și cărui jucător îi aparține. 20

21 Înregistrarea jucătorului se face prin accesarea formularului de înregistrare, unde datele sunt transmise către server aproape la fel ca la autentificare, iar după validarea lor aceleași acțiuni sunt luate în funcție de răspunsul primit. În spatele panoului de autentificare și înregistrare rulează un demo identic cu cel din interfața de joc, doar cu câteva tancuri controlate de calculator Interfața meniu Figura 9: Interfața meniu Sursa imaginii mecanicului de tanc - În interfața meniu, care corespunde cu starea menu, nu avem decât câteva imagini de design și două butoane în care sunt prezentate cele două moduri în care poate fi jucat jocul, și anume modulul singleplayer și cel multiplayer. Phaser are câteva funcții rezervate care sunt executate la anumite puncte din joc și ar trebui să conțină diferite tipuri de cod. Mai jos este o listă cu funcțiile folosite pe parcursul proiectului: init() - Este prima funcție apelată la încărcarea unei interfețe. Este apelată înainte de preload(), create() sau oricare altă funcție. În aceasta sunt primite ca parametru variabilele trimise din alte interfețe. 21

22 preload() - Această funcție este folosită pentru încărcarea imaginilor și restul datelor necesare jocului. create() - Este apelată după ce funcția preload() s-a terminat de executat și de încărcat. Aici putem să poziționăm în joc imaginile aduse în fucția preload() și să pregătim alte date. update() - Această funcție este apelată la fiecare cadru, deci pe un calculator, asta ar însemna aproape de 60 de ori pe secundă. Aici putem muta jucătorul pe hartă sau verifica obiectele de coliziune. Aici se întâmplă cele mai interesante lucruri. Pentru că această interfață are cel mai puțin cod, voi prezenta structura de bază a unei stări numită de mine interfață pentru că fiecare este diferită prin conținut și funcționalitate. function Menu() { Menu.prototype.init = function(){ Menu.prototype.preload = function () { var game = this.game; game.load.image('tank-driver', 'assets/tank-driver-resize.jpg'); game.load.image('logo', 'assets/menu-logo.png'); game.load.image('menu-single', 'assets/menu/menu-single.png'); game.load.image('menu-multi', 'assets/menu/menu-multi.png'); Menu.prototype.create = function () { var game = this.game; $('.login-page').remove(); $('.backdrop').remove(); game.add.sprite(0, 0, 'tank-driver'); game.add.sprite(430, 45, 'logo'); ; game.add.button(510, 200, 'menu-single', this.menubuttonaction, this); game.add.button(510, 300, 'menu-multi', this.menubuttonaction, this); Menu.prototype.update = function(){ Menu.prototype.menuButtonAction = function(){ this.game.state.start('menu-select', true, false, arguments[0].key); ; module.exports = Menu; Secțiune de cod 4: Codul din interfața meniu Indiferent pe care din cele două butoane din meniu se dă clic, următoarea stare este menuselect, unde este configurat jocul înainte de începerea lui prin alegerea tancului și a hărții. 22

23 2.1.3 Interfața de configurare a jocului Figura 10: Interfața de configurare a jocului Această interfață corespunde cu starea menu-select. Aici găsim meniul de unde putem selecta tancul și harta pe care vrem să jucăm. Cele patru tipuri de tancuri se deosebesc atât prin design, cât și prin diferite caracteristici, ca de exemplu unul va avea mai mult blindaj, dar va fi mai încet, altul va avea viteză mai mare, dar va lua mai puțin din viață etc. Mai jos avem o poză cu tipurile de tancuri și caracteristicile acestora. Figura 11: Tipurile de tancuri Sursa pentru design-ul tancurilor

24 Hărțile diferă prin mărime sau prin tipul și așezarea obstacolelor. Fiecare hartă poate avea mai multe tipuri de obstacole, care se pot distruge mai greu sau mai ușor și au un număr predefinit de inamici pentru jocul singleplayer. La apăsarea butonului PLAY, în funcție de modul de joc selectat în meniul anterior, jucătorul este trimis spre interfața de joc, unde începe jocul, dacă a ales modul singleplayer sau spre interfață de așteptare a jucătorilor, numită și lobby, dacă a ales modul multiplayer Interfața de așteptare a jucătorilor Figura 12: Interfața de așteptare a jucătorilor Această interfață există doar pentru modul de joc multiplayer și este starea multiplayer din managerul de stări Phaser, ce în diferite jocuri se mai numește și lobby. Pe scurt este un spațiu unde jucătorii se adună și după ce toate cerințele sunt îndeplinite, jocul poate fi pornit de cel care creează jocul. În majoritatea jocurilor, lobby-ul este creat de un jucător care are control asupra lui. În jocul acesta, proprietarul lobby-ului alege harta pe care o să joace și cu cine vrea să joace prin trimiterea unui link unic celorlalte persoane. La accesarea acestei interfețe, o conexiune WebSocket se inițializează cu serverul și se va emite evenimentul newgame, împreună cu id-ul și numele de utilizator al jucătorului, cu tancul și harta selectate și statusul dacă e pregătit sau nu să înceapă jocul. 24

25 Server-ul generează un token 1 și creează o cameră folosind token-ul ca id al camerei pe care îl trimite înapoi proprietarul lobby-ului. Conceptul de cameră este construit în Socket.IO, dar mai multe informații despre acest concept veți putea găsi în capitolul despre dezvoltarea aplicației server. La primirea tokenului, acesta este afișat sub forma unui link, de exemplu care poate fi trimis altor jucători pentru a se alătura lobby-ului. La accesarea acestui link, jucătorul trebuie să se autentifice sau să se înregistreze și va fi trimis direct spre interfață de lobby, unde de asemenea se va crea o conexiune WebSocket. În schimb, în loc de emiterea evenimentului de newgame, se va emite evenimentul joingame, cu datele utilizatorului, iar în loc de harta selectată se va trimite token-ul, ca serverul să știe în ce cameră să îl atașeze. socket.on('connect', function(){ console.log('websocket succesfully connected!'); if(self.queryurl.gametoken){ socket.emit('joingame',{ user : { id: userdata.id, username: userdata.username, tank: userdata.tank, ready: false, gametoken: self.queryurl.gametoken.replace('#', '') ); else { socket.emit('newgame', { user: { id: userdata.id, username: userdata.username, tank: userdata.tank, ready: true, map: self.selectedmap ); ); Secțiune de cod 5: Codul pentru inițializarea unei conexiuni la server și emitere a evenimentelor de tip newgame si joingame Aici jucătorii vor putea să-și schimbe tancul cu care vor juca sau să-și schimbe statusul când sunt pregătiți să înceapă jocul. La fiecare schimbare se vor emite diferite evenimente către 1 Este o cheie sau un șir unic de cuvinte și litere. 25

26 server, care la rândul lui va emite către ceilalți clienți din aceeași cameră sau lobby și datele sunt actualizate automat în interfață. După ce toți jucătorii au intrat și sunt pregătiți să înceapă jocul, proprietarul lobby-ului apasă pe butonul PLAY care va emite un eveniment de începere a jocului, ce va fi transmis tuturor jucătorilor din cameră și vor fi trimiși spre interfața de joc Interfața de joc Figura 13: Interfața de joc Aici este interfața de joc numită și starea game unde se joacă jocul propriu-zis. Structura este asemănătoare cu cea din Secțiune de cod: 4. Pentru început este apelată funcția init() în care atribuim unor variabile publice parametrii primiți de la interfața precedentă, tipul tancului, harta și dacă este modul de joc multiplayer se mai trimite și obiectul cu conexiunea la websocket ca să nu mai creem conexiunea încă odată. Apoi este apelată funcția preload(), unde sunt încărcate de pe server sau din cache 2 toate imaginile, sprite-urile 3 și fișierele JSON de configurație a tancurilor și a hărților. 2 Este o colecție de date ce sunt o copie la indigo a valorilor originale, unde operația de aducere este mai costisitoare. 3 Este o colecție de imagini puse într-o singură imagine. 26

27 După ce toate fișierele au fost încărcate în funcția preload(), este apelată funcția create(), unde ne folosim de datele și imaginile încărcate pentru a desena harta și tancurile. Mai jos am creat o instanță pentru unul din cele trei sisteme de fizică, furnizate de către biblioteca Phaser, fiecare cu propria lui utilizare, în care avem avantaje și dezavantaje: game.physics.startsystem(phaser.physics.arcade); Sistemul de fizică Arcade (Phaser.Physics.ARCADE) este probabil cel mai folosit de către dezvoltatorii de jocuri pentru că se găsesc cele mai multe tutoriale și este cel mai simplu și mai rapid sistem în ceea ce privește performanța. Este un sistem care permite accelerația, viteza, coliziunea și multe altele, dar la un nivel rudimentar deoarece totul este văzut ca un dreptunghi. Sistemul de fizică Ninja (Phaser.Physics.NINJA) este un pic mai complex decât sistemul de fizică Arcade. Cea mai mare diferență între cele două sisteme este că permite coliziunea cu pante. Folosind acest sistem se poate crea o platformă cu dealuri și rampe, pe când sistemul Arcade este unul destul de pătrățos. Sistemul de fizică P2 (Phaser.Physics.P2JS) este cel mai complex și mai realistic, dar consumă și cele mai multe resurse. Folosind acest sistem se pot crea arcuri, pendule și altele. Un obiect din joc, de exemplu un sprite, poate aparține doar unui sistem de fizică, dar pot exista obiecte cu sisteme diferite într-un joc. De exemplu se poate avea sistemul de fizică P2 pentru gestionarea unui teren construit cu ajutorul poligoanelor, peste care trece un vehicul, în timp ce trage cu gloanțe ce se folosesc de sistemul de fizică mult mai rapid Arcade. Pentru desenarea hărții în funcția create() trebuie să creem o instanța a obiectului Map din /src/prefabs/map.js, iar în constructorul lui se declară proprietatea mapdata cu JSON-ul de configurare a hărților și se setează limitele lumii jocului. 27

28 { "name": "Default", "backgroundcolor": "#2d2d2d", "backgroundimage": null, "width" : 1024, "height": 608, "data" : [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 8, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 16, 16, 16, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 16, 16, 16, 0, 0], [0, 0, 16, 16, 16, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 16, 16, 16, 0, 0], [0, 0, 0, 8, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 8, 0, 0, 0], [0, 0, 0, 8, 0, 0, 0, 1, 1, 1, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 0, 0, 1, 1, 1, 0, 0, 0, 8, 0, 0, 0], [0, 0, 0, 8, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 8, 0, 0, 0], [0, 0, 0, 8, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 8, 0, 0, 0], [16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 16, 16, 16, 0, 0, 0, 0, 16, 16, 16, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16], [16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 16, 16, 16, 0, 0, 0, 0, 16, 16, 16, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16], [0, 0, 0, 8, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 8, 0, 0, 0], [0, 0, 0, 8, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 8, 0, 0, 0], [0, 0, 0, 8, 0, 0, 0, 1, 1, 1, 0, 0, 8, 8, 8, 8, 8, 8, 8, 8, 0, 0, 1, 1, 1, 0, 0, 0, 8, 0, 0, 0], [0, 0, 0, 8, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 8, 0, 0, 0], [0, 0, 16, 16, 16, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 16, 16, 16, 0, 0], [0, 0, 16, 16, 16, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 16, 16, 16, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0] ], "health": { "obstacle1" : 100, "obstacle8" : 1000, "obstacle16" : 250, "enemiesnr": 5 Secțiune de cod 6: JSON de configurare a hărții WarTank este un joc bazat pe plăci (en. Tile-based video game), asta înseamnă că aria unui joc este formată din mici forme dreptunghiulare, pătrate care sunt asemănătoare unei piese de puzzle ce formează o imagine mult mai mare. În acest joc, harta este formată din plăci pătrate cu dimensiune de 32x32 pixeli. Pentru așezarea obstacolelor pe hartă am folosit o matrice bidimensională; fiind un joc 2D, sistemul de coordonate este unul bidimensional format din două axe x și y. 28

29 Așadar în JSON-ul de configurare a hărții, în data avem matricea bidimensională ce este plină cu numere întregi, care dacă sunt diferite de 0 indică că acolo trebuie poziționat un obstacol cu id-ul lui. Map.prototype.createObstacles = function () { var obstacles = this.game.add.physicsgroup(phaser.physics.arcade); for (var x = 0; x < this.mapdata.data.length; x++) { for (var y = 0; y < this.mapdata.data[x].length; y++) { if (this.mapdata.data[x][y]) { var c = obstacles.create(y * this.blocksize, x * this.blocksize, 'obstacle', this.mapdata.data[x][y]); c.maxhealth = c.health = this.mapdata.health['obstacle' + this.mapdata.data[x][y]]; c.body.immovable = true; //c.anchor.setto(0.5, 0.5); return obstacles; Secțiune de cod 7: Așezarea obstacolelor pe hartă Atribuim variabilei obstacles un obiect al jocului de tip Group care este un container pentru obiectele de afișare și îi setăm un sistem fizic de tipul Arcade. Apoi iterăm matricea bidimensională și când întâlnim un număr întreg diferit de 0 creăm un obiect de tipul Sprite care așează obstacolul pe poziția lui, apoi îi setăm proprietățile health, maxhealth și immovable. Fiecare tip de obstacol se distruge mai ușor sau mai greu, în funcție de ce valoare are la viață și nu trebuie să se miște când este atins de un jucător. La crearea obiectului de tipul Sprite pentru poziționarea obstacolului sunt trimiși următorii parametri: x poziția pe axa x în pixeli (numărul plăcii pe axa x * dimensiunea plăcii); y poziția pe axa y în pixeli; key indexul pus la încărcarea imaginii sau a sprite-ului în funcția preload(); frame în cazul în care a fost încărcat un sprite, aici este indexul imaginii dorite. După ce am desenat harta jocului, tot în funcția create() trebuie să adăugăm tancul jucătorului și cel al inamicilor, prin creare unei instanțe a obiectului Tank. Se generează aleatoriu o direcție și o poziție, pe care să nu existe un obstacol ca să poată fi poziționat tancul, iar pentru asta ne folosim de o metodă din obiectul map. 29

30 Map.prototype.spawnTankLocation = function () { var location = {x: 0, y: 0; do { location.y = this.game.rnd.between(0, this.mapdata.data.length - 1); location.x = this.game.rnd.between(0, this.mapdata.data[0].length - 1); while (this.mapdata.data[location.y][location.x]!== 0); return { x: this.blocksize * location.x + 18, y: this.blocksize * location.y + 18, direction: this.game.rnd.pick(['right', 'left', 'up', 'down']) ; Secțiune de cod 8: Căutarea unei poziții fără obstacol în matricea bidimensională În obiectul Tank se declară o proprietate care conține toate setările tancului ce sunt calculate din JSON-ul de configurare tancuri. În JSON avem valorile maxime admise pentru viața, rata de foc, viteza, viteza proiectil și puterea de distrugere, iar pentru fiecare tip de tanc avem un procent din valoarea maximă. Mișcarea tancului se face prin apăsarea tastelor de navigare (cele cu săgeți) de pe tastatură și totul este controlat în funcția update(), care este apelată de 60 de ori pe secundă. Aici se verifică de fiecare dată dacă o tastă este apăsată și i se oferă tancului accelerație în direcția dorită. this.tank.body.velocity.x = 0; this.tank.body.velocity.y = 0; if (cursors.left.isdown) { this.tank.body.velocity.x = -this.tanksettings.speed; this.tankdirection = 'left'; this.tank.angle = 180; else if (cursors.right.isdown) { this.tank.body.velocity.x = this.tanksettings.speed; this.tankdirection = 'right'; this.tank.angle = 0; else if (cursors.up.isdown) { this.tank.body.velocity.y = -this.tanksettings.speed; this.tankdirection = 'up'; this.tank.angle = 270; else if (cursors.down.isdown) { this.tank.body.velocity.y = this.tanksettings.speed; this.tankdirection = 'down'; this.tank.angle = 90; Secțiune de cod 9: Codul care se ocupă de mișcarea și direcția tancului 30

31 Pentru detectarea coliziunii dintre tanc și obstacol am folosit funcția collide() din sistemul de fizică Arcade al jocului, care se poate folosi atât între simple instanțe de obiecte ale jocului, cât și între o instanță de obiect și un grup de obiecte. Sistemul de fizică face totul prea ușor, trebuie să adăugăm doar o simplă linie de cod în funcția update(). this.game.physics.arcade.collide(this.tank, this.map.obstacles, this.tankhitobstacle, null, this); Secțiune de cod 10: Sistemul de detectare al coliziuni între tanc și obstacole Primii doi parametri sunt obiectele jocului care trebuie verificate pentru detectarea coliziunii, iar al treilea este funcția apelată când coliziunea este detectată. 2.2 Modul singleplayer și aplicarea tehnicilor de inteligență artificială Într-un sens larg, cele mai multe jocuri încorporează o anumită formă de inteligență artificială (IA), adică nu este acea formă academică, ci mai degrabă un amestec de tehnici care în principal sunt preocupate de crearea iluziei de inteligență artificială. De exemplu, dezvoltatorii s-au folosit de inteligența artificială ani de zile, pentru a da aparent inteligență nenumăratelor caractere de joc, de la fantomele din clasicul joc Pac-Man până la boții 4 din jocul de acțiune cu împușcături Counter-Strike. Unii dezvoltatori consideră că sarcinile cum ar fi căutarea unui traseu aparțin de inteligența artificială a jocului. Steven Woodcok a raportat în 2003 Game Developer s Conference AI Roundtable Moderator s Report că unii dezvolatori cred că și detectarea de coliziune face parte din inteligența artificială a unui joc, ceea ce arată că sunt o mulțime de interpretări exagerate. Vom merge pe ideea că inteligența artificială în jocuri include totul, de la simpla urmărire și evadare, la modelul de mișcare și multe altele. 4 Este un jucător controlat de calculator folosind inteligența artificială. 31

32 Ciclu de decizii al caracterului non-jucător (en: non-player character) execută trei pași în mod constant: (10) percepe - acceptă informații despre mediul înconjurător, hartă, inamic; gândește - evaluează informațiile percepute și plănuiește conform regulilor; acționează execută planul; Alții ar putea argumenta că această abordare este mult prea simplă și prin urmare ar putea fi nepotrivită pentru crearea unei experiențe de joc plăcută, dar nu este așa. De fapt, jocurile video nu au nevoie de caractere non-jucător care sunt la fel de sofisticate și capabile ca și jucătorii umani care joacă. Jocurile sunt menite să fie distractive, iar sistemul de inteligență artificială nu ar trebui să fie prea bun, asta ar face jocul imposibil de câștigat. În schimb, ar trebui să permită jucătorului să câștige jocul în moduri interesante și provocatoare. În general tehnicile de comportament în inteligența artificială pentru jocuri sunt de două feluri: deterministe și nedeterministe. (11) Determinist Comportamentul determinist este specific și previzibil. Nu există nici o incertitudine. Un exemplu simplu de comportament determinist este un algoritm simplu de urmărire. Se poate programa un caracter non-jucător să se îndrepte spre un anumit punct țintă prin avansarea de-a lungul axelor x și y până când coordonatele caracterului x și y coincid cu locația țintă. Nedeterminist Comportamentul nedeterminist este opusul comportamentului determinist, deoarece are un grad de incertitudine și este oarecum imprevizibil. Un exemplu de comportament nedeterminist este un caracter non-jucător care învață să se adapteze la tactică de luptă a unui jucător. O astfel de învățare ar putea folosi o rețea neuronală, tehnică Bayesion sau un algoritm genetic. În inteligența artificială tehnicile deterministe sunt cele mai folosite în devoltarea unui joc. Aceste tehnici sunt previzibile, ușor și rapid de implementat, înțeles și testat. Deși sunt foarte utilizate, metodele deterministe plasează sarcina de a anticipa și de a programa toate scenariile explicite pe umerii dezvoltatorilor. 32

33 Metodele deterministe nu facilitează învățarea sau evoluția și după ce joci puțin, aceste comportamente tind să devină previzibile. Acest lucru limitează perioada în care un joc este distractiv și începe să devină plictisitor. Probabil cea mai utilizată tehnică ce este folosită la scară largă în inteligența artificială este trișarea. De exemplu, într-un joc ca al meu, calculatorul are acces la toate informațiile despre tancul meu, de la poziția lui, tipul tancului, cât mai am din viață și până la direcția în care mă îndrept și cu ce viteză. Trișarea în acest mod îl ajută pe caracterul non-jucător să aibă un avantaj în fața inteligenței jucătorului uman, dar aceasta poate fi și ceva rău. Dacă este prea evidentă pentru jucătorul uman această trișare, atunci el va crede că eforturile lui sunt zadarnice și își va pierde interesul. Așa cum am explicat și mai sus, sistemul de inteligență artificială nu trebuie să fie prea bun și acest mod de trișare pentru caracterele non-jucător trebuie să fie echilibrat destul cât să creeze o suficientă provocare pentru jucător, dar îndeajuns cât să păstreze jocul interesant și distractiv. Clasicul joc Pac-Man îl face pe jucător să creadă că inamicii îl vânează, că fantomele sunt un grup inteligent. De fapt, această percepție de grup inteligent este doar o iluzie. Pentru a fi siguri că fantomele nu urmează toate același drum prin labirint și pentru a le oferi o personalitate individuală, fiecăreia îi este oferită o variație ușor diferită a aceluiași algoritm, care este o selecție foarte simplă de direcție de fiecare data când fantomele ajung la o intersecție în labirint. În cazul în care se ajunge la o intersecție, fantoma trebuie să decidă dacă ar trebui să schimbe direcția sau nu. Uneori fantoma își schimbă direcția ca să se miște spre jucătorul uman, altădată alege o direcție aleatorie. Pentru a realiza acest comportament ușor diferit pentru fiecare dintre fantomele create este folosit un sistem aleatoriu ce utilizează factori de ponderare unici pentru fiecare dintre ele. Astfel o fantomă se poate deplasa într-o direcție aleatorie 75% din timp și în direcția jucătorului în celelalte 25% din cazuri, atunci când aceasta ajunge la o intersecție. O altă fantomă ar avea alegerea aleatorie a direcției cu o pondere de 50% din timp și așa mai departe. Rezultatul acestei metode simple este o personificare a fiecărei fantome de către jucător (prin proiecție de subconștient) și va percepe comportamentul unei fantome ca cel al unui jucător inteligent. 33

34 Diferența dintre mișcarea fantomelor în jocul Pac-Man nu este foarte mare față de tancurile non-jucător din WarTank și am încercat deasemenea să le ofer câte o personalitate diferită pentru a creea iluzia de inteligență. Deoarece hărțile nu sunt sub forma unui labirint și tancurile au spațiu de mișcare mai mare, direcția nu se poate schimba doar la întâlnirea unei intersecții, așa că am decis ca fiecare tanc să aleagă o perioadă de timp aleatorie în care să verifice dacă să schimbe direcția sau nu. Așadar, la fiecare schimbare de direcție, tancul își alege în mod aleatoriu un nou interval de timp din cele 4 intervale predefinite: 1000, 1500, 2000 și 2500 de milisecunde. La alegerea direcției de mers am folosit un algoritm simplu de urmărire. Utilizând tehnica de trișare, în care calculatorul știe poziția mea, am programat tancurile inamice să se îndrepte spre mine prin avansarea de-a lungul axelor x și y până când una dintre axe este egală cu una din axele mele. În acel moment tancul non-jucător se va opri, își va schimba direcția spre tancul cu jucător uman și va continua să tragă până când tancul jucător se va mișca și nici una dintre axe x și y nu va mai coincide. Totuși am preferat că tehnica de trișare prin care calculatorul știe poziția mea să nu fie prea evidentă, așa că în funcție de cadranul în care se află tancul jucătorului am decis să aleagă una din cele două direcții și nu pe cea mai rapidă. Figura 14: Cele patru cadrane ale unui sistem de coordonate carteziene De fiecare dată când se alege o nouă direcție se verifică să nu fie blocată de un obstacol, iar dacă este blocată, se verifică altă direcție până când se găsește una care nu este blocată de nici un obstacol. 34

35 Se mai verifică de fiecare dată când este apelată funcția update(), adica de aproape 60 de ori pe secundă, dacă tancul non-jucător este pe aceeași axă x sau y cu tancul jucătorului uman, indiferent dacă timpul aleatoriu nu a trecut pentru o reverificare a direcției, tancul se oprește, se îndreaptă spre tancul jucătorului uman și trage. Tank.prototype.updateAIEnemyTank = function (playertank) { var directions, tankspeed = this.tanksettings.speed; this.game.physics.arcade.collide(this.tank, this.map.obstacles, this.tankhitobstacle, null, this); this.game.physics.arcade.overlap(this.projectiles, this.map.obstacles, this.projectilehitobstacle, null, this); this.tankmaplocation = this.map.spritelocationonmap(this.tank); if(playertank) { directions = this.map.directionfromonetanktoanother(this.tankmaplocation, playertank.tankmaplocation) else { directions = [this.game.rnd.pick(['right', 'left', 'up', 'down']), this.game.rnd.pick(['right', 'left', 'up', 'down'])]; if (this.game.time.now > this.enemydata.nextcheckdirection) { this.enemydata.nextcheckdirection = this.game.time.now + this.game.rnd.pick([1000, 1500, 2000, 2500]); this.tankdirection = this.map.checkandgetdirections(directions, this.tankmaplocation); this.tank.angle = this.tankanglebydirection[this.tankdirection]; else { if(directions.length == 1){ this.tankdirection = directions[0]; this.tank.angle = this.tankanglebydirection[this.tankdirection]; tankspeed = 0; this.tank.body.velocity.x = 0; this.tank.body.velocity.y = 0; if (this.tankdirection == 'left') { this.tank.body.velocity.x = -tankspeed; else if (this.tankdirection == 'right') { this.tank.body.velocity.x = tankspeed; else if (this.tankdirection == 'up') { this.tank.body.velocity.y = -tankspeed; else if (this.tankdirection == 'down') { this.tank.body.velocity.y = tankspeed; if(this.tank.alive){ this.fireprojectile(); Secțiune de cod 11: Codul pentru mișcarea tancurilor controlate de calculator 35