Cum am scris jocul pentru competiție sau transformarea miraculoasă a lui „Lines” în „Battleship”
Portal de informații de securitate » Programare » Cum am scris jocul pentru concurs sau transformarea miraculoasă a „Liniilor” în „Cuirasat”
Cum am scris jocul pentru competiție sau transformarea miraculoasă a lui „Lines” în „Battleship”
Nu există limită pentru perfecțiune
Jocul meu anterior a fost lansat de un fișier php de pe server. De data asta m-am hotarat sa merg mai departe. Am vrut ca totul să funcționeze nu numai pe Internet, ci și din sistemul de fișiere, fără un server web local. În primul rând, condițiile competiției impuneau versiunea offline și, în al doilea rând, pentru a putea măcar să o jucați singur pe drum, de exemplu, acolo unde nu există internet. (În general, tot ceea ce fac, fac pentru mine. Și acum joc propriul meu joc.) Dar, dacă este necesar - și de pe server, cu oameni, și nu cu AI, adică și această opțiune ar trebui să fie prezentă. În general, sarcina a fost crearea unui ansamblu universal cu toate scripturile, modelele 3D, texturile și sunetele pentru distribuție atât pe o pagină de pe Internet, cât și ca arhivă care putea fi descărcată, dezambalată și lansată pur și simplu prin index.html. Desigur, această din urmă opțiune are sens doar pentru versiunea pentru un singur utilizator.
Inițial, modelele 3D pe care le-am creat pentru versiunea web au fost stocate în fișiere model.json, însă, am constatat că atunci când sunt conectate cu tag-ul SCRIPT, totul funcționează în Firefox, dar în Chrome dă o eroare legată de politica de securitate . Soluția s-a dovedit a fi simplă: redenumiți json în js - și nicio problemă. Ei bine, probabil, ar fi posibil să forțați tipul de conținut necesar, dar cine știe ce, acolo, în viitor, vor mai exista politici de securitate în browsere. Ce se întâmplă dacă tot nu vor permite încărcarea scripturilor din fișierele numite diferit,decât *.js din sistemul de fișiere local. Și așa, js - și fără întrebări. Descărcați scenariul și nu vă arătați. Se încarcă modelul 3D:
De asemenea, din cauza politicii de securitate a browserului, texturile modelelor care s-au comportat perfect în versiunea cu server au refuzat categoric să se conecteze din fișierele lor png și jpg aflate local, așa că a trebuit să le convertesc în base64 și să le aranjez, de asemenea, în sub formă de scripturi, cu nume de fișiere precum textura .png.js Ei bine, conectați aceste scripturi cu eticheta SCRIPT bună, veche, creată dinamic. E foarte simplu!
Funcționează astfel: parser-ul meu model găsește link-uri către imagini în fișierul său, aceste legături sunt realizate cu terminații .js, scripturile cu imagini texturate sunt conectate dinamic, imaginile sunt traduse din base64 și suprapuse modelului. Și pentru a fi sigur, în mod ironic, pentru a determina momentul în care scriptul este încărcat, am adăugat fiecare astfel de script la sfârșit cu un apel de funcție care semnalează programului principal că este încărcat și acum puteți lucra mai departe cu imaginea sau modelul conținut în acesta.
Instrumente de dezvoltare
Așa că, acum că modelul și încărcătorul de texturi au funcționat bine cu sistemul de fișiere, fără niciun server, am început să scriu jocul în sine. Da, sunt un programator javascript pur. Mulți din acest loc și-au răsucit degetele spre tâmplă. Nu folosesc nicio bibliotecă (cu excepția motorului 3D), nici măcar nu folosesc JQuery. Nici eu nu folosesc OOP. Prototipuri - în cazuri rare, doar atunci când, după părerea mea, este cu adevărat necesar. Iubesc minimalismul și nimic mai mult. Și nici un cod suplimentar în care să nu înțeleg ce face fiecare linie!
Voi dezvălui un secret teribil. De asemenea, nu înțeleg managerii noi pentru proiecte de construcție, nu folosesc github și nu am deschis niciodată niciun Visual Studio.Doctore, ce e cu mine? Din instrumentele de programare, folosesc doar notepad avansat. Probabil că sunt un psihopat.
Cu toate acestea, mi se pare că este foarte simplu - să conectați o bibliotecă de scripturi 3D care funcționează cu WebGL la pagină și să creați o scenă. Mai include cineva astăzi scripturi cu eticheta SCRIPT și creează manual de markup HTML? Apăsează cineva astăzi butoanele cu degetele și se uită la monitor cu ochii? Cu aceste degete, acești butoane? Cu acești ochi - la acest monitor? Ce sălbăticie! Bine, glumesc. Dar astăzi, a atinge HTML sau, Doamne ferește, javascript pur este ca și cum ai atinge un șarpe. Este mai bine să înșurubați peste mai multe straturi. Și după ce ai convertit codul zece pași în javascript, întrebându-mă de ce, până la urmă, nu funcționează nimic. Nu judec pe nimeni, doar mi se pare că în dezvoltarea web există o părtinire nu foarte sănătoasă față de utilizarea a numeroase instrumente, manageri și biblioteci. Sper că povestea mea nu provoacă nimănui un atac de disonanță cognitivă.
Termeni de referinta? Ce? Pentru mine? Dizdok? Ei bine, iată un altul, pierzi minute prețioase din viața ta cu prostia asta. Singurul lucru pe care l-am regretat a fost că nu am desenat imediat o diagramă bloc a algoritmului părții server a versiunii multi-utilizator. Până la urmă, a înțeles greșit. Dar, când totuși am desenat o diagramă pe o bucată de hârtie, mi-am văzut imediat toate greșelile și le-am corectat.
Creare
Ceea ce îmi place la dezvoltarea indie este procesul creativ. De fapt, inițial ca parte a competiției, am decis să scriu o variație pe tema Liniile de culoare și chiar am creat un prim nivel funcțional. Iată cum arăta.
Ideea a fost că jocul funcționează în 3D, iar mingile nu apar în sine pe teren, trebuie să fie aruncate acolo și aliniate în rânduri de aceeași culoare. Aceada, trebuie să lovești buzunarele potrivite din grilă. După aceea, ușile din podea se deschid sub bile și acestea cad. Dar când primul nivel a fost gata și l-am jucat eu însumi, mi-am dat seama brusc că jocul nu era foarte interesant. Și atunci am decis să o las pentru vremuri mai bune, până când îmi vine în minte o idee cum să îmbunătățesc această creație, ce, poate, să adaug. Am o altă idee. Aruncarea mingiilor m-a făcut să mă asociez cu zborul ghiulelor. Și am decis să refac rapid acest joc într-o bătălie pe mare. Din fericire, au fost alocate două luni întregi pentru scrierea proiectului competitiv.
Ta-dam! Cu o ușoară mișcare a mâinii, „Liniile” se transformă... se transformă... se transformă... într-o elegantă „Bătălie pe mare!” Și da, pur și simplu nu m-am putut abține să nu creez Perla Neagră. Ce este o bătălie pe mare fără o furtună a mărilor.
Grafica 3D nu este, desigur, elementul meu. A făcut corăbiile cât a putut mai bine. Pentru a reduce sarcina de detectare a coliziunilor, am folosit ciocnitori invizibili în jurul fiecărei nave. Pentru o navă - un ciocnitor, repetând aproximativ forma.
Astfel, am obținut o bătălie navală pe rând, dar în 3D și cu capacitatea de a muta nave în orice punct de pe terenul de joc. Ideea este să reglați corect unghiurile de rotație și înclinarea tunurilor, pentru a lovi navele inamice cu ghiulele.
Modalități de a împărtăși cu lumea
În primul rând, desigur, competiția. În acest proces, s-a dovedit că organizatorii competiției nu erau mulțumiți de lansarea jocului dintr-un fișier html și aveau nevoie de un exe. Ce avem cu asamblarea de executabile din js? Primul pe care l-am încercat a fost Electron. Cu toate acestea, s-a dovedit a fi prea greu pentru mine. A fost necesar să instalați o grămadă de manageri din github și să efectuați zeci de manipulări pentru a configura și construi toate acestea. Înțeleg că Electron vrea să mă conducă pe caledezvoltare web standard. Nu am avut timp să mă ocup de asta, întrucât era ultima zi a termenului alocat pentru crearea unui joc competitiv. Nu, asta nu merge. Și apoi am dat peste utilitarul web2exe. Totul este foarte simplu - îl rulați, îl introduceți în fișierul html, chiar descarcă node-webkit în sine și obțineți un ansamblu cu un fișier exe la ieșire. Ce nu mi-a plăcut a fost că fișierul s-a dovedit a fi foarte mare, 105 MB. Hmmm... În timp ce jocul în sine cântărește doar 15 MB. Cu toate acestea, am găsit un instrument de ambalare care comprima cel mai mare fișier nw.dll. Ca urmare, întregul ansamblu a început să cântărească 68 MB și 43 MB în arhiva zip.
Apropo, web2exe nu acceptă asamblarea „ezeshnikului” sub Windows XP, ceea ce este păcat. Versiunea mea html funcționează și în XP. Numai în acest sistem de operare există anumite cerințe speciale pentru grafica WebGL în browsere.
Nu am câștigat competiția, dar am obținut o experiență neprețuită în rezolvarea, așa cum mi s-a părut mai devreme, a problemelor de nerezolvat. Acum sunt sigur că nimic nu este imposibil.
Ei bine, haideți să postăm versiunea web. După încheierea competiției, am scris un server în php. A fost nevoie de aproximativ o lună de seri libere.
Apropo, serverul
Nu va funcționa prea des pentru a interoga serverul pe o găzduire http obișnuită. Prin urmare, îl vom sonda la fiecare 10 secunde. Pe client este creată o coadă din acțiunile jucătorului, cum ar fi mutarea navei din punctul A în punctul B, împușcarea etc. Și la momentul potrivit pentru a trimite datele, această coadă merge la server. Adversarul o citește și se formează o coadă pentru ca el să joace. Totul este la fel: mișcare, împușcare etc., doar, din punctul lui de vedere, cu navele adversarului. Astfel, fiecare dintre cei doi jucători are două cozi - una pentru trimiterea de informații către server, cealaltă pentru a juca acțiunile adversarului.Aici, desigur, nu va exista sincronizare, dar deoarece jocul este pe rând, nu este necesar. Principalul lucru este că nava inamică trage din punctul dorit, care a venit de la server. Iar ruta către acesta este construită de programul de pe client, iar nava se deplasează în acest punct.
Întregul script de server în php, dacă este prezentat într-o singură linie, a rezultat astfel:
Voi nota ceea ce am realizat pentru mine. Acum pot scrie jocuri single player folosind grafica WebGL care rulează pe un fișier html atât de pe server, cât și din sistemul de fișiere local. Toate acestea funcționează în ambele versiuni în Windows, Android și ar trebui să funcționeze în iOS și Linux - dar nu am cum să verific aceste sisteme de operare. De asemenea, pot face mai multe versiuni „grele” cu fișiere executabile pentru Windows și iOS din aceeași versiune html (web2exe are o astfel de oportunitate). Tot codul este scris o dată în JS și funcționează în toate opțiunile de mai sus. Ei bine, cu excepția versiunii online pentru rețelele sociale, trebuie să adăugați un alt script de server și apeluri de client la api.