Programoz asi verseny webes feluletennjszk.uni-obuda.hu/wp-content/uploads/2017/02/fsf... · Agar.IO Agar.io Az Agar.io ir any t asa eg errel t ort enik: ahol az eg ermutat o, a felhaszn

BevezetesElokeszuletek

Tervezes, fejlesztesZaro gondolatok

Programozasi verseny webes feluletenavagy hogyan keszult az Agar.OE

Kertesz Gaboregyetemi tanarseged

Obudai EgyetemNeumann Janos Informatikai KarAlkalmazott Informatikai Intezet

2017-03-23Kertesz Gabor Agar.OE



Full-stack fejlesztesHour of CodeAgar.IO

Tartalom

1 BevezetesFull-stack fejlesztesHour of CodeAgar.IO

2 Elokeszuletek

3 Tervezes, fejlesztes

4 Zaro gondolatok

Kertesz Gabor Agar.OE




Ki a full-stack fejleszto?

Az, aki a stack minden retegeben otthonosan mozog, vagyegyenesen szakertoje a kulonfele szinteknek:

Fizikai es szoftveres kornyezet

Adatmodellezes, adatbazisok

Uzleti logika

API, MVC

UI, UX

Biztonsagi kerdesek

Felhasznalo

http://www.laurencegellert.com/2012/08/

what-is-a-full-stack-developer/


http://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/

http://www.laurencegellert.com/2012/08/what-is-a-full-stack-developer/




A cel tehat hogy mindent megtanuljak... ?

A full-stack fejleszto ideologiaja nem arrol szol, hogy mindent nekikell csinalnia: a szoftverfejlesztes csapatmunka!Azonban jol jon, ha a fejlesztonek a sajat specializacioja mellettralatasa van a tobbi teruletre, technologiara is.





Parhuzam

”It’s like a general practitioner in medicine. He has knowledge andtraining in all areas of medicine, he’s heard of most medicalproblems and is able to help and point in the right direction. In anemergency he can do a lot more, even do a surgery if no one elsecan be around in time to make a difference, but... That can’t behis every day job. That’s not how it’s done. You don’t ask yourdoctor to do all the treatments you need. You can’t expect him tobe anaesthesiologyst, assistant and a surgeon all at the sametime.”

Komment @ https://www.sitepoint.com/full-stack-developer/


https://www.sitepoint.com/full-stack-developer/




Hour of Code

”Mindenkinek meg kellene tanulnia a szamıtogep programozast, ...mert az megtanıt gondolkodni is” (Steve Jobs)

Nemzetkozi kezdemenyezesAltalanos bevezetes, nepszerusıtes 60 percben





Kodolas Oraja a Neumann Karon

http://nik.uni-obuda.hu/hourofcode

2014 otaKozepiskolas celkozonseg, komplexebb feladatok


http://nik.uni-obuda.hu/hourofcode




Az otlet

EPAM Elevate Me Challenge: http://elevate-me.hu/

Az eredeti kod Magnus Wolffelt Elevator Saga-ja:http://play.elevatorsaga.com/

Nyılt forras, elerheto GitHubonA verseny otlete nagyon jo, de tul komplex algoritmizalasifeladat egy kozepiskolasnak


http://elevate-me.hu/

http://play.elevatorsaga.com/




Agar.io

”Agar.io is a massively multiplayer action game created byMatheus Valadares. Players control a cell in a map representing apetri dish; the goal is to gain as much mass as possible byswallowing smaller cells without being swallowed by bigger ones.”

https://en.wikipedia.org/wiki/Agar.io


https://en.wikipedia.org/wiki/Agar.io




Agar.io

Az Agar.io iranyıtasa egerrel tortenik: ahol az egermutato, afelhasznalo altal iranyıtott sejtek abba az iranyba haladnak

Egyszeru es nagyszeru: keves elerheto funkcio van a mozgasonkıvul

PvP, azaz a felhasznalok egymas ellen jatszanak




Kesz komponensekFunkciok, kovetelmenyek

Tartalom

1 Bevezetes

2 ElokeszuletekKesz komponensekFunkciok, kovetelmenyek


4 Zaro gondolatok





Alapotlet

A vezerles atalakıtasa: az eger pozıcioja helyett a sejtekmozgasat algoritmus hatarozza meg

Az algoritmust a bongeszobe ırjak, a kodok on-the-flytesztelhetoek

A kodok versenyeztethetoek





Agar.io klon

Nem kell mindent ujra feltalalni, itt az Agar.io open-source klonja:https://github.com/huytd/agar.io-clone/


https://github.com/huytd/agar.io-clone/




Agar.io klon





JavaScript





Funkciok

Agar.io uzleti logika

UI jelentos atalakıtasa: kodbox, vezerloelemek (start, stop,restart, stb)

Log

Megoldas bekuldese

Versenyeztetes





Nem funkcionalis kovetelmenyek

Ertelmezheto felhasznaloi hibauzenetek

Robusztussag

240+ erdeklodo a Kodolas Oraja irantAz elozetes felmeres alapjan csak 80+ jelolte meg, hogyhalado ismeretei vannak, azaz latott mar kodotMindezzel egyutt nyugodtan szamolhatunk tobb mint szazuserrel egyidejuleg!

Felhasznalobaratsag... :)





Amire nincs szukseg

Egy halom funkcio kiiktathato, ugy mint: osztodas, loves,vırusfertozes

Chat

Mobil-optimalizaltsag: reszponzıv CSS, touch control




Diohejban a Node.js-rolSzerver-oldalFejlesztokornyezetUzleti logikaKliens-oldalSkalazasVerseny

Tartalom

1 Bevezetes

2 Elokeszuletek

3 Tervezes, fejlesztesDiohejban a Node.js-rolSzerver-oldalFejlesztokornyezetUzleti logikaKliens-oldalSkalazasVerseny

4 Zaro gondolatok





Node.js

2009 ota

JavaScript a szerver oldalon

Esemenyvezerelt felepıtes, Aszinkron I/O





Szinkron vs. Aszinkron

Console.WriteLine(File.ReadAllText("file.txt"));

//avagy:

string result;

using (StreamReader streamReader = new

StreamReader(path , encoding , true ,

StreamReader.DefaultBufferSize , checkHost))

{

result = streamReader.ReadToEnd ();

}

Console.WriteLine(result);

Forraskod 1: C# kod





Szinkron vs. Aszinkron

// szinkron

var fs = require("fs");

var data = fs.readFileSync(’input.txt’);

console.log(data.toString ());

// aszinkron:

const fs = require(’fs’);

fs.readFile(’file.md’, ’utf -8’, function (err ,

content) {

if (err) { return console.log(err); }

console.log(content);

});

Forraskod 2: Node.js kod





Callback

A JS alapvetoen non-blocking IO, ıgy az idoigenyes muveletek(fajlmuveletek, halozati vagy adatbazismuveletek) megkezdeseutan tovabblep

A muvelet befejezesekor egy dedikalt fuggvenyt hıv meg,amely kezeli az eredmenyt: callback fuggveny

Gyakran anonım fuggvenykent van megvalosıtva

Ez sajatos, olvashato kodot eredmenyez, de konnyu a lotuloldalara atesni: ”callback hell”

Kulon izgalom hogy a Node.js single-threaded





JavaScript





JavaScript a stackben

Egy webfejlesztonek nehez megemeszteni a JavaScriptet aszerver oldalon

Pedig nagyon hasznos, ha a szerver es kliens oldaliprogramnyelv is ugyanaz (MEAN)

Az architekturanak rengeteg elonye van: a realtimemegoldasoktol kezdve a modularis felepıtesen at acsomagkezeloig

Ettol fuggetlenul persze JavaScript, minden betegsegevelegyutt:https://www.destroyallsoftware.com/talks/wat


https://www.destroyallsoftware.com/talks/wat




Szerver-oldal

’use strict ’;

var express = require(’express ’);

var app = express ();

var http = require(’http’).Server(app);

var httpreq = require(’http’);

var io = require(’socket.io’)(http);

var SAT = require(’sat’);

var c = require(’../../ config.json’);

var util = require(’./lib/util’);

var quadtree = require(’simple -quadtree ’);

var tree = quadtree(0, 0, c.gameWidth ,

c.gameHeight);

Forraskod 3: server.jsKertesz Gabor Agar.OE




Strict mode

A ”rossz szintaxis”-bol - ami amugy nem hiba - konkretanhibat general

Gyk csak strict modban celszeru dolgozni, ettol lesz ”secure”a kod





Express.js

Easy to use web-frameworkRengeteg raepules, konnyu hasznalat, logikus felepıtes

var express = require(’express ’)

var app = express ()

app.get(’/’, function (req , res) {

res.send(’Hello World!’)

})

app.listen (3000 , function () {

console.log(’Example app listening on port

3000! ’)

})

Forraskod 4: Express.js minta





Socket.io

Real-time kommunikacio kliens es szerver kozottLAMP stackben pollinggal tud ertesulni a kliens aszerver-oldali valtozasokrolA Node.js esemenyvezerelt kornyezeteben a szerver pushuzenetet kuldhet a klienseknek

var app = require(’express ’)();

var http = require(’http’).Server(app);

var io = require(’socket.io’)(http);

app.get(’/’, function(req , res){ res.sendFile(__dirname +

’/index.html’); });

io.on(’connection ’, function(socket){

console.log(’a user connected ’);

socket.on(’chat message ’, function(msg){

console.log(’message: ’ + msg); });

});

http.listen (3000, function (){ console.log(’listening on

*:3000 ’); });

Forraskod 5: Socket.io szerver





Socket.io

Az alapotlet, hogy a kliens es a szerver esemenyeket tudkivaltani a masikbanAkar adatokat is tovabbıthatnak egymas kozott (JSON esetenkomplett objektumokat)A szerver broadcast uzenetet is kuldhet a feliratkozottklienseknek

<script src="/socket.io/socket.io.js" ></script >

<script src="//code.jquery.com/jquery -1.11.1. js"></script >

<script >

$(function () {

var socket = io();

$(’form’).submit(function (){

socket.emit(’chat message ’, $(’#m’).val());

$(’#m’).val(’’);

return false;

});

});

</script >

Forraskod 6: Socket.io kliens





config.json

JSON objektum, jol elkulonulo konfiguracios allomany

{

"port": 80,

"userLimit": 15,

"foodMass": 1,

"gameWidth": 4000,

"gameHeight": 3000,

//...

}

Forraskod 7: config.json





JASON?





JSON

JavaScript Object Notation

Nyelvfuggetlen adatformatum

XML vs JSON





npm & package.json

”the package manager for JavaScript. Find, share, and reusepackages of code from hundreds of thousands of developers –and assemble them in powerful new ways.”

”Use npm to install, share, and distribute code; managedependencies in your projects; and share & receive feedbackwith others.”

$ npm install

$ npm install package_name

Forraskod 8: npm a konzolon





npm & package.json

{"name" : "agar -oe" ,"version" : "0.0.1" ,"description" : "Agar.OE is an Agar.IO clone made for Hour of Code" ,"main" : "server/server.js" ,"author" : "Gabor Kertesz (Obuda University)" ,"contributors" : [

//...

] ,"dependencies" : {

"express" : "^4.13.4" ,"simple -quadtree" : "^0.1.3" ,"socket.io" : "^1.4.6" ,"socket.io-client" : "*" ,"sticky -session" : "*" ,"redis" : "*" ,"sat" : "^0.5.0" ,"cluster" : "^0.7.7"

}}

Forraskod 9: package.json





A csomagkezelo alkalmazasanak arnyoldalai

Az ”npm install” konnyu, de vajon mennyit ront ateljesıtmenyen?

A Node alapbol kiforratlan, rengeteg valtozas a modulokban

Megbızol a forrasban?





A csomagkezelo alkalmazasanak arnyoldalai

https://medium.com/friendship-dot-js/

i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558Kertesz Gabor Agar.OE

https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558

https://medium.com/friendship-dot-js/i-peeked-into-my-node-modules-directory-and-you-wont-believe-what-happened-next-b89f63d21558




A fejleszto eszkoztara

gulp

Babel

JSlint

nodemon

mocha





A fejleszto eszkoztara - gulp

”Automate and enhance your workflow”

Konnyen hasznalhato build eszkoz

Build JavaScript eseten?

g u l p . t a s k ( ’test’ , [ ’lint’ ] , f u n c t i o n ( ) {g u l p . s r c ( [ ’test /**/*. js’ ] )

. p i p e ( mocha ( ) ) ;}) ;

g u l p . t a s k ( ’build -server ’ , [ ’lint’ ] , f u n c t i o n ( ) {r e t u r n g u l p . s r c ( [ ’src/server /**/*.* ’ , ’src/server /**/*. js’ ] )

. p i p e ( b a b e l ( ) )

. p i p e ( g u l p . d e s t ( ’bin/server/’ ) ) ;}) ;

Forraskod 10: gulpfile.js





A fejleszto eszkoztara - Babel

JavaScript compiler

ES2015 szintaktika

(OFF: Sebastian McKenzie az alkoto, mar a Facebook londonicsapatat erosıti. A meglepo inkabb az, hogy 18 eves voltamikor felvettek.)





A fejleszto eszkoztara - etc

JSlint

The JavaScript code quality tool”It parses and analyzes a source file, returning an object withinformation about the file.”

nodemon

”Nodemon is a utility that will monitor for any changes in yoursource and automatically restart your server. Perfect fordevelopment.”

Mocha

JavaScript test framework





Uzleti logika

f u n c t i o n addFood ( toAdd ) { /* ... */ }f u n c t i o n removeFood ( toRem ) { /* ... */ }f u n c t i o n movePlayer ( p l a y e r ) { /* ... */ }f u n c t i o n moveMass ( mass ) { /* ... */ }f u n c t i o n m a s s I n f o ( ) { /* ... */ }f u n c t i o n ba lanceMass ( ) { /* ... */ }f u n c t i o n t i c k P l a y e r ( c u r r e n t P l a y e r ) { /* ... */ }f u n c t i o n moveloop ( ) { /* ... */ }f u n c t i o n gameloop ( ) { /* ... */ }f u n c t i o n sendUpdates ( ) { /* ... */ }

/* ... */

s e t I n t e r v a l ( moveloop , 1000 / 30) ;s e t I n t e r v a l ( gameloop , 2500) ;s e t I n t e r v a l ( mass In fo , 60000) ;s e t I n t e r v a l ( sendUpdates , 1000 / c . networkUpdateFactor ) ;

Forraskod 11: server.js





Uzleti logika

i o . on ( ’connection ’ , f u n c t i o n ( s o c k e t ) {/* ... */

var c u r r e n t P l a y e r = {i d : s o c k e t . id ,x : p o s i t i o n . x ,y : p o s i t i o n . y ,w : c . d e f a u l t P l a y e r M a s s ,h : c . d e f a u l t P l a y e r M a s s ,c e l l s : c e l l s ,massTota l : massTotal ,hue : Math . round ( Math . random ( ) ∗ 360) ,t y p e : type ,l a s t H e a r t b e a t : new Date ( ) . getTime ( ) ,t a r g e t : {

x : 0 ,y : 0

}} ;/* ... */

s o c k e t . on ( ’gotit’ , f u n c t i o n ( ) { /* ... */ }s o c k e t . on ( ’respawn ’ , f u n c t i o n ( ) { /* ... */ }s o c k e t . on ( ’disconnect ’ , f u n c t i o n ( ) { /* ... */ }s o c k e t . on ( ’0’ , f u n c t i o n ( ) { /* ... */ }s o c k e t . on ( ’bing’ , f u n c t i o n ( ) {

s o c k e t . emit ( ’bong’ ) ;}) ;

}

Forraskod 12: server.js





Kliens oldal

webpack: JavaScript module bundler

”kotegelo”: modularis felepıtesben felepıtett kliens oldali JSkodokat fuz ossze egy JS allomanyba

Az eredmeny kevesbe attekintheto, de valid

var i o = r e q u i r e ( ’socket.io -client ’ ) ;var Canvas = r e q u i r e ( ’./ canvas ’ ) ;var g l o b a l = r e q u i r e ( ’./ global ’ ) ;

Forraskod 13: app.js





Kliens oldal

var f o o d s = [ ] ;var u s e r s = [ ] ;var l e a d e r b o a r d = [ ] ;var t a r g e t = {x : p l a y e r . x , y : p l a y e r . y} ;/* ... */

f u n c t i o n s e t u p S o c k e t ( s o c k e t ) {s e t I n t e r v a l ( f u n c t i o n ( ) {

g l o b a l . s t a r t P i n g T i m e = new Date ( ) ;s o c k e t . emit ( ’bing’ ) ;

} , 20000) ;// ping -pong => bing -bong

s o c k e t . on ( ’bong’ , f u n c t i o n (num) {var l a t e n c y = Date . now ( ) − g l o b a l . s t a r t P i n g T i m e ;addLog ( ’Ping: ’ + l a t e n c y + ’ms’ , "debug" ) ;

}) ;

s o c k e t . on ( ’connect_failed ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’disconnect ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’welcome ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’gameSetup ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’playerDied ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’playerDisconnect ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’playerJoin ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’leaderboard ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’serverMSG ’ , f u n c t i o n ( ) { /* ... */}) ;s o c k e t . on ( ’RIP’ , f u n c t i o n ( ) { /* ... */}) ;

Forraskod 14: app.jsKertesz Gabor Agar.OE




Kliens oldal

Mindig a sajat sejt van kozepenHTML5 Canvas

window . ca n va s = new Canvas ( debug ) ; //debug a mainlogban

var c = window . c a nv a s . cv ;// Canvas.js: this.cv = document.getElementById(’cvs ’);

//index.html: <canvas tabindex ="1" id="cvs"></canvas >

var graph = c . g e t C o n t e x t ( ’2d’ ) ;

f u n c t i o n d r a w C i r c l e ( centerX , centerY , r a d i u s , s i d e s ) {var t h e t a = 0 ;var x = 0 ;var y = 0 ;

graph . beg inPat h ( ) ;

f o r ( var i = 0 ; i < s i d e s ; i ++) {t h e t a = ( i / s i d e s ) ∗ 2 ∗ Math . PI ;x = c e n t e r X + r a d i u s ∗ Math . s i n ( t h e t a ) ;y = c e n t e r Y + r a d i u s ∗ Math . cos ( t h e t a ) ;graph . l i n e T o ( x , y ) ;

}

graph . c l o s e P a t h ( ) ;graph . s t r o k e ( ) ;graph . f i l l ( ) ;

}

Forraskod 15: app.js





Vezerles

Idaig tobbnyire az agario-clone repobol pullolt kodotelemeztuk, es persze kiszedtuk mindazt, ami nem kell (eskijavıtottuk, ami rossz volt)Most johetnek sorban az uj funkciok, kezdve a vezerlesselEgermutato helyett kodbol szeretnenk iranyıtani a sejtetA jatek gyakorlatilag egy 4000 × 3000 meretu palyan zajlik,amiben a sejteknek, elelmeknek koordinataja vanA mozgas gyakorlatilag azt jelenti, hogy a jatekosnakmozgasvektora van, ezt definialta az eger mutatoja is, eskodbol is ezt logikus definialni

var i r a n y = {x : 0 , y : 0} ;/* ... */

g l o b a l . s o c k e t . emit ( ’0’ , {x : i r a n y . x , y : i r a n y . y}) ;

Forraskod 16: Iranyvektor





Vezerles

e z T o r t e n i k = f u n c t i o n ( foods , u s e r s , map , p l a y e r , t a r g e t , memory ) { /* ... */ } ;

Forraskod 17: Iranyıtas

A user ırja meg a fuggveny magjat, amely fuggveny egy 200milliseces SetInterval()-ba van beagyazva.

Kozeli elelmek

Kozeli ellenfelek

Palya merete

Sajat adatok (pozıcio, meret)

Iranyvektor (x, y)

Memoria: a fuggveny ujrahıvasakor a lokalis valtozokelvesznek, a memory object tagjai megmaradnak





Vezerles

//index.html: <textarea id="code">target.x = 10; target.y = 0;</textarea >

e v a l b t n . o n c l i c k = f u n c t i o n ( ) {j s h i n t . JSHINT ( e d i t A r e a L o a d e r . g e t V a l u e ( ’code’ ) , {} , { f o o d s : f a l s e , u s e r s :

f a l s e , map : f a l s e , p l a y e r : f a l s e , t a r g e t : t rue , memory : t rue , c o n s o l e :f a l s e , debug : f a l s e }) ;

i f ( j s h i n t . JSHINT . e r r o r s . l e n g t h == 0 && ( j s h i n t . JSHINT . data ( ) . i m p l i e d s ===u n d e f i n e d | | j s h i n t . JSHINT . data ( ) . i m p l i e d s . l e n g t h == 0) )

{e v a l ( ’ezTortenik = function(foods , users , map , player , target , memory)

{’ + e d i t A r e a L o a d e r . g e t V a l u e ( ’code’ ) + ’};’ ) ;addLog ( "Nem talaltam szintaktikai hibat , futtatom a kodot." ) ;

}e l s e { /* ... */ }

}






Vezerles

t r y {e z T o r t e n i k ( g l o b a l . foods , g l o b a l . u s e r s , {width : g l o b a l . gameWidth , h e i g h t :

g l o b a l . gameHeight} , j a t e k o s , i r a n y , memory ) ;}catch ( ex ) {

debug ( "HIBA: " + ex ) ;i r a n y . x = 0 ;i r a n y . y = 0 ;

}i f ( g l o b a l . s o c k e t )

g l o b a l . s o c k e t . emit ( ’0’ , {x : i r a n y . x , y : i r a n y . y}) ;






Skalazas

”240+ erdeklodo a Kodolas Oraja irant”

az egy szalon futo aszinkron kiszolgalo ennyi usert biztosannem fog tudni kiszolgalni

Vertikalisan:

tobb memoria es processzormag a virtualis szervernektobb magot hasznalo, konkretan tobb node folyamat indıtando

Horizontalisan:

tobb szerver indıtasafelhasznalok nem ugyanazon a palyan





Vertikalis skalazas

Node cluster modul

egy master - sok worker felepıtescpu magonkent egy folyamat

a workerek kozti kommunikacio azonban izgalmas kerdeskor

ugyanaz a worker ki tudja szolgalni minden esetben ugyanazt aklienst?kommunikacio Redisen keresztulpublish-subscribe modellmaster szal kezelheti a palya tomegenek balanszat

kellemetlen, amikor az ido surgetese kozben dobben ra azember, hogy ennek kivitelezese nem realis (es bizonytalan,hogy megoldas lenne-e a felhasznaloi terhelesre)





Horizontalis skalazas

Indıtsunk tobb kiszolgalot

ha a nincs a hatterben adatok osszemosasa, akkor ez kulonszobakat jelenthogy dol el, hogy mely felhasznalo mely szobaba keruljon?a szobakon limitet is ertelmezni kell

tobb virtualis szerverre is szukseg lesz, ahol magonkentegy-egy kiszolgalo indul

a gyakorlatban minden kiszolgalo max. 15 usert fogadott, es 4× 4 kiszolgalo futott (max 240 user)





Szobak

Egy regebbi PHP kod szolgalt a felhasznalok beleptetesere

Ettol nem szerettem volna megvalni (tehat ujraırni nodeban),ezert a szobavalasztas PHP-ban tortent

a problema az, hogy a PHP-s backenden sessionben taroltfelhasznaloi adatokat Nodeban is el kell erni

$ SESSION-bol JSON array, azt pedig base64 kodolas utanatkerul a kliensen keresztul a Node kiszolgalohoz, aholvisszaalakul JSON tombbe, ami JS oldalon persze egyszeruencsak tomb :)





Szobak

Az iskolasok eletet megkonnyıtendo elneveztem a szobakat,amely szobak a kozponti gepen futo webalkalmazastrendszeresen ertesıtettek az allapotukrol:

f u n c t i o n publ ishRoom ( ) {var o p t s = {h o s t : ’10.81.3.71 ’ , path : ’/agaroe/ajax.php?setroom=’ + i p a d d r

+ ’:’ + p r o c e s s . a r g v [ 2 ] + ’&users=’ + u s e r s . l e n g t h } ;h t t p r e q . r e q u e s t ( o p t s ) . end ( ) ;// console.log(opts);

}

s e t I n t e r v a l ( publ ishRoom , 15000) ;

Forraskod 20: Szoba bejelentese





Szobak





Verseny

A vegen a forrasok beadhatoak (sima ajax call, a kimenetpedig a usertol - nicknev, valodi nev - fuggoen egy allomany)

A forras beadasanal kiemelten fontos, hogy tudjuk, kikeszıtette (kovetjuk a sessiont, es csekkoljuk hogy lejart-e)

Az sem arthat, ha a keszıtot segıtjuk helyi mentes/betolteslehetosegevel (HTML5 local storage)

Vegul pedig idealis lenne, ha a kliensek is node processeklennenek





Mi kerul a fajlba?

// asdasd - Proba Pal(Obudai Egyetem , Neumann

Kar)

module.exports = {

kor: function(foods , users , map , player ,

target , memory) {

target.x = 10; //ide kerul a bekuldott kod

}

};

Forraskod 21: Felhasznaloi kod minta





Versenyszerver

Egy specialis kiszolgalo, nehany apro finomıtassal akonfiguracioban

Nincs szukseg ertesıtesekre, sem szerkesztopanelre

Bongeszoben ”spectator” mod

Stopper a kliens oldalon

Stop megnyomasara ”fagyasztas”, a kliensek megallnak





Kliensek a versenyen

Nemcsak a logika, gyakorlatilag a forras is teljesen ugyanaz,mint a bongeszoben futo JS eseten

var i o = r e q u i r e ( ’socket.io-client ’ ) ;/* ... */

var l o g i c = ( p r o c e s s . a r g v [ 2 ] ) ? p r o c e s s . a r g v [ 2 ] : "random" ;g l o b a l . p layerName = ( p r o c e s s . a r g v [ 3 ] ) ? p r o c e s s . a r g v [ 3 ] : l o g i c +

( Math . random ( ) ∗ 1000) . t o F i x e d ( 0 ) ;var u s e r = r e q u i r e ( ’./user/’ + l o g i c ) ;s o c k e t = i o ( ’http :// localhost :8080 ’ , {q u e r y : "type=player"}) ;/* ... */

s o c k e t . emit ( ’respawn ’ ) ;s e t I n t e r v a l ( f u n c t i o n ( ) {

/* ... */

t r y {u s e r . kor ( g l o b a l . foods , g l o b a l . u s e r s , {width : g l o b a l . gameWidth , h e i g h t :

g l o b a l . gameHeight} , j a t e k o s , i r a n y , memory ) ;} catch ( e r r ) { /* ... */}i f ( g l o b a l . s o c k e t )

g l o b a l . s o c k e t . emit ( ’0’ , {x : i r a n y . x , y : i r a n y . y}) ;} , 200) ;

f u n c t i o n s e t u p S o c k e t ( s o c k e t ) { /* ... */ }

Forraskod 22: client.jsKertesz Gabor Agar.OE




Kliensek a versenyen

A beerkezett megoldasokat megszurtem, hogy duplikacio nelegyen

(Atnezhettem volna a karakterneveket is...)

Es egy erre a celra keszıtett weboldalon randomgeneraltamcsoportokat, majd a csoportoknak megfeleloen elindıtottam aversenyszerveren a ”harcokat”

A tovabbjutokat kovettem, es a donto korbe neveztem...




Full-StackBeszamoloOsszefoglalas

Tartalom

1 Bevezetes

2 Elokeszuletek


4 Zaro gondolatokFull-StackBeszamoloOsszefoglalas





Full-stack fejlesztes

Production szerverek konfiguralasa, a halozati cımzes kovetese

LAMP + Node.js & Express.js & Socket.io & etc.

Az Agar.IO klonban ki volt dolgozva a HTML5 alapu grafika,ıgy csak a modosıtasokkal kellett foglalkozni

HTML5, bongeszo JS, CSS3

Uzleti logika: verseny es versenykliensek mukodese

Segedlet keszıtese a kozepiskolasoknak (API, mintakodok)

Szervezes, levelezes, egyeb PR tevekenysegek


Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs

Foto: Orha Balazs




Mintakodok

function(foods , users , map , player , target ,

memory) {

target.x = (Math.random () - 0.5) * 100;

target.y = (Math.random () - 0.5) * 100;

}

Forraskod 23: Mintakod





Mintakodok


memory) {

target.x = map.width / 2 - player.x;

target.y = map.height / 2 - player.y;

}






Mintakodok

function(foods , users , map , player , target , memory) {

var legkozelebbi = function(tomb , player) { /* ... */ };

var tav = function(e1 , e2) { /* ... */ };

var idx = legkozelebbi(foods , player);

var tmp = (foods !== undefined) ? foods[idx] : {x: 0,

y: 0};

if (tmp !== undefined) {

var x = tmp.x-player.x; var y = tmp.y-player.y;

}

else {

var x = 0; var y = 0;

}

target.x = x * 100;

target.y = y * 100;

}






A gyoztes algoritmusa :)


memory) {

target.x = foods [0].x - player.x;

target.y = foods [0].y - player.y;

}

Forraskod 26: A gyoztes kodja





Konkluzio?

Ha van kesz komponens, alkalmazd!

A 21. szazadban nincs egyedi problema, StackOverflow esGitHub a baratod

A JS tud olvashato lenni ...

De a fejlesztes meg mindig gyerekcipoben van, kiforratlan, soka radikalis valtozas

Egy osszetett alkalmazas egyaltalan nem kivitelezhetetlen

Mindig letezzen megvalosıthatosagi- es hatekonysagvizsgalat

Time management !!!

Nincs jobb motivacio a felhasznaloknal

Az oktatas elmeny





Koszonom a figyelmet!

Kertesz [email protected]


Documents

Programoz asi verseny webes feluletennjszk.uni-obuda.hu/wp-content/uploads/2017/02/fsf... · Agar.IO Agar.io Az Agar.io ir any t asa eg errel t ort enik: ahol az eg ermutat o, a felhaszn