Chyba nikogo nie zaskoczy fakt, że post o grze majowej pojawia się w czerwcu 🙂 Dobra wiadomość jest taka, że tworzenie gry tekstowej w AngularJS idzie pełną parą i wszystko wskazuje na to, że projekt będzie skończony w pierwszym tygodniu czerwca 😉
Tymczasem do gry dodałem wstępną implementację systemu przeciwników. Losowo pojawiają się oni w wybranych lokacjach i atakują gracza gdy ten wejdzie na ich teren. Gracz może oczywiście oddać 🙂 Póki co nie ma żadnego systemu walki, ale odpowiednie pod niego fundamenty już stoją.
Jak zwykle, w aktualną wersję gry zagrać można klikając w obrazek powyżej.
Nie ma co owijać w bawełnę, przejdę od razu do konkretów. Postaram się opisać wszystkie nowości we w miarę logicznym porządku. Jeśli jednak coś będzie nie zrozumiałe, lub coś pominę, dajcie znać. Wszystko chętnie wytłumaczę 🙂 . Zacznę od nowego pliku czyli monsterService.js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
angular.module('textRPG'). service('monstersService', function(){ this.update = function(monsterList) { for (var i = 0; i < monsterList.length; i++) { var currMonster = monsterList[i]; if(currMonster.lastAttack >= currMonster.attackTime){ if(currMonster.attitude === 'aggresive'){ currMonster.attacking = true; } currMonster.lastAttack = 0; } else { currMonster.lastAttack++ } } } this.monsters = { 'goblin': function(name,lastAttack){ this.name = name; this.type = 'goblin'; this.maxHp = 4; this.hp = 4; this.attacking = false; this.attitude = 'aggresive'; this.attackTime = 300; this.lastAttack = lastAttack; }, 'troll': function(name,lastAttack){ this.name = name; this.type = 'troll'; this.maxHp = 15; this.hp = 15; this.attacking = false; this.attitude = 'neutral'; this.attackTime = 550; this.lastAttack = lastAttack; }, 'knight': function(name,lastAttack){ this.name = name; this.type = 'knight'; this.maxHp = 10; this.hp = 10; this.attacking = false; this.attitude = 'friendly'; this.attackTime = 300; this.lastAttack = lastAttack; }, } }) |
Jak widać jest to dość prosty serwis przypisany do głównego modułu. Posiada on zdefiniowane dwa elementy: metodę update oraz obiekt monsters. Zacznę od tego drugiego. Klucze w polach tego obiektu to łańcuchy znaków równe rodzajom potworów. Przypisane do nich wartości to funkcje, które są konstruktorami instancji danego potwora. Każdy z tych konstruktorów przyjmuje dwa argumenty, pierwszy będzie unikatowym (dla danej lokacji) identyfikatorem potwora, a drugi wartością decydującą kiedy nastąpi pierwszy atak (potwory mogą być tworzone w grupach, nie chcę aby wszystkie atakowały na raz). Przeznaczenie konkretnych pól obiektów potworów powinno być jasne. Nie wszystkie póki co są wykorzystywane, te które są, opiszę gdy będą wykorzystywane w jakimś kodzie.
Funkcja update tego serwisu, przyjmować będzie listę obiektów stworzonych z opisanych powyżej konstruktorów. Dla każdego potwora z tej listy, sprawdzam czy już czas aby zaatakował. Jeżeli tak i jeżeli jego nastawienie jest wrogie (wartość pola attitude to aggresive), wartość pola attacking ustawiana jest na true, a licznik czas do kolejnego ataku jest zerowany. Jest to system bardzo podobny do systemu zarządzania akcjami gracza 🙂 .
Kolejne nowości pojawiły się w serwisie lokacji, czyli w pliku roomService.js. Każdy obiekt lokacji ma dwa nowe pola encounters oraz monsters. Oto przykład:
|
1 2 |
'encounters': [{'type':'goblin','chance':0.7,'min':1,'max':3}], 'monsters': [], |
Pierwsze pole, to tablica zawierająca informacje o tym jakie potwory można spotkać w danej lokacji, z jaką częstotliwością i w jakiej ilości. Każdy element tej tablicy to obiekt przechowujący te informacje dla osobnego potwora. Drugie nowe pole to lista potworów, które aktualnie się tu znajdują. Póki co, na początku gry jest ona pusta dla wszystkich lokacji.
Do uzupełnienia tej tablicy służy nowa funkcja znajdująca się w serwisie roomService, spawnMonsters:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
this.spawnMonsters = function(room){ var currRoom = this.rooms[room]; if(currRoom.encounters.length > 0){ for (var i = 0; i < currRoom.encounters.length; i++) { var currEncounter = currRoom.encounters[i]; if(Math.random() < currEncounter.chance){ console.log('spawning') var monsterNum = Math.floor(Math.random() * (currEncounter.max - currEncounter.min) + currEncounter.min); for (var j = 0; j < monsterNum; j++) { this.rooms[room].monsters.push(new monstersService.monsters[currEncounter.type](currEncounter.type+j,75*j)); } } } } } |
spawnMonsters jako argument otrzymuje nazwę aktualnego pokoju. Następnie dla każdego obiektu w polu encounters danego pomieszczenia, wybierana jest losowo liczba pomiędzy 0 a 1. Jeżeli wylosowana liczba jest mniejsza niż szansa na danego potwora, losowana jest kolejna liczba, tym razem z zakresu ilości możliwych potworów. Kolejny krok to dodanie do tablicy monsters przetwarzanej lokacji tyle nowych obiektów potworów aktualnego. Dla każdego potwora, poprzez konstruktor, ustawiane jest unikatowe name oraz lastAttack.
Kolejną nową funkcją w tym serwisie jest clearRoom:
|
1 2 3 4 5 6 7 8 |
this.clearRoom = function(room,name){ for (var i = 0; i < this.rooms[room].monsters.length; i++) { currMonster = this.rooms[room].monsters[i]; if(currMonster.name === name){ this.rooms[room].monsters.splice(i,1); } } } |
Funkcja otrzymuje dwa argumenty, nazwę lokacji oraz unikatowe name potwora. Następnie tablica monsters danego pokoju jest przeszukiwana aż znaleziony zostanie odpowiedni przeciwnik. Po odnalezieniu, wróg jest usuwany z tablicy.
I to tyle jeśli chodzi o serwis potworów. Kolejne zmiany, które opiszę, to nowe funkcje w serwisie playerService, które pozwalają graczowi na atakowanie.
Pierwsza z nich to attack:
|
1 2 3 4 5 |
this.attack = function(monster){ roomService.clearRoom(this.currentLocation,monster.name); this.performingAction = true; this.currentAction = 'attacking'; } |
Jak widać, nic specjalnego. Funkcja jako argument przyjmuje referencje do obiektu potwora. W jej wnętrzu wywoływana jest metoda clearRoom serwisu lokacji, z argumentami równymi, obecnej lokacji gracza, oraz nazwą potwora. Następnie pole performingAction ustawiane jest na true, a pole currentAction na attacking. Działa to prawie identycznie jak w przypadku funkcji walking.
Druga nowość w serwisie gracza, to nowe pole obiektu actions – attacking:
|
1 2 3 4 5 6 7 8 9 |
'attacking': function(){ if(self.currentActionTime >= 200){ self.performingAction = false; self.currentAction = undefined; self.currentActionTime = 0; } else { self.currentActionTime += 1; } }, |
Tak jak w przypadku chodzenia, atakowanie, zajmuje postaci trochę czasu i na chwilę ‚zamraża’ możliwość korzystania z innych akcji. Mechanizm ten opisałem już w poprzednim poście 🙂 .
I tak dochodzę do najważniejszego póki co pliku w grze czyli controller.js, głównego kontrolera. Zmian tutaj jest parę, najważniejsza to z pewnością nowy wygląd pętli gry:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
this.update = function(){ self.player.update(); if(self.rooms[self.player.currentLocation].monsters.length != 0){ self.monsters.update(self.rooms[self.player.currentLocation].monsters); self.checkAttackers(); } if(self.roomService.getAnnounce()){ if(self.rooms[self.player.currentLocation].monsters.length == 0){ self.roomService.spawnMonsters(self.player.currentLocation); } self.emmitMessage(); self.roomService.setAnnounce(false); } if(self.player.dead){ $interval.cancel(self.loop); } } |
Ok, to lecimy. Na początku aktualizowana jest postać gracza. Następnie, jeżeli w aktualnym pomieszczeniu znajdują się jakieś potwory, wywołuję metodę serwisu monsterService, update. Jako argument przekazuję listę potworów z aktualnej lokacji. Kolejny krok to wywołanie metody kontrolera checkAttackers.
Następna część pętli wywołuje się, jeżeli gracz właśnie wszedł do nowej lokacji. Teraz najpierw sprawdzam, czy lista potworów nowego pokoju jest pusta, jeżeli tak wywołuję metodę spawnMonsters z serwisu potworów. Dalsza część pętli powinna być już zrozumiała.
W kontrolerze pojawiło się też kilka innych nowych metod, ale ich działanie powinno być jasne. Jeżeli coś jednak nie będzie miało sensu, daj znać w komentarzach, chętnie spróbuję wytłumaczyć co miałem na myśli 🙂
Ostatnia zmiana, jaką chciałem dziś przedstawić znajduje się w pliku html. Fragment ten znajduje się pod definicją przycisków odpowiedzialnych za poruszanie się po świecie:
|
1 |
<input ng-disabled="main.checkAction()" ng-repeat="monster in main.getCurrMonsters() track by $index" type="button" value="Attack {{monster.type}}!" ng-click="main.attack(monster)"> |
Ten element z dyrektywą ng-repeat, powoduje, że gdy gracz wejdzie do pomieszczenia, w którym znajdują się przeciwnicy, w aplikacji pojawi się ilość przycisków równa ilości potworów. Przyciśnięcie przycisku spowoduje, że postać zaatakuje danego potwora. Nie będę dokładnie opisywał jak to działa (można zerknąć w kod, nie jest zbyt skomplikowane), bo póki co walka nie jest zaimplementowana do końca 😉 Na tę chwilę naciśnięcie przyciska automatycznie zabija potwora, a ataki potworów nic nie robią. Ale to już niedługo się zmieni 🙂
Tyle wystarczy na jeden post. Jeżeli nie chcesz przegapić kolejnych wpisów o AngularRPG, to zachęcam do polubienia mojej strony na facebooku. Zawsze zamieszczam tam informacje o wszystkich nowościach. Jest to też dobre miejsce na kontakt ze mną. Na wszystkie pytania zawsze odpowiem :).