September 29, 2020 / Írta: Ambrus
Ez a projekt úgy kezdődött, hogy írtam egy egyszerű Snake implementációt javascriptben a P5JS library felhasználásával. A játék megtekinthető a https://editor.p5js.org/palpista11/present/TQOlc4jaE oldalon.
Mivel 160 sor lett, és úgy véltem, lehetne még rövidebb a kód, elkezdtem minimalizálni.
Az elágazások nagy részét kicseréltem egy egyszerű matematikai képlettel, a ? b : c kifejezéssel, vagy valami olyasmivel, amire nem emlékszel, miután megírod.
A nyilak olvasása például úgy történik, hogy kivonok 37-et a leütött karakter kódjából és megkapok 0-3-ig egy számot, amit már használhatok az irány számolásakor.
A JavaScript egy olyan nyelv, amiben nincsenek statikus típusok, így az értékek környezettől függően átkonvertálódnak a várt típusra. Volt egy függvény, aminek vissza kellett térnie egy false értékkel, és ahelyett, hogy kiírtam volna a return false; kifejezést és ezzel többsorossá tettem volna a függvényt, egyszerűen visszatértem az értékadás eredményének az ellentétjével. Tudni kell, hogy a változó értékadásának eredménye a változó új értéke lesz. Erre vigyázni kell, mert ha 0 az adott érték, akkor az booleanná konvertálva false lesz. Nekem viszont mindig egy új vektor objektum hozódott létre (bocsi 😆), úgyhogy az mindig true lesz.
this.touchStarted=e=>!(m=v(mouseX, mouseY))
Ha valamiért mindig true értékre lenne szükségünk, egy bármilyen kifejezést ilyen módon tudunk legegyszerűbben booleanná konvertálni:
!!("hello")
Vesszük az ellentettjét, ezzel booleanra konvertálva, majd annak is az ellentettjét, ami hasonló booleanitású, mint a az eredeti érték. (Valaki nem tudja, hogy kell kikapcsolni ebben a szerkesztőben a piros csíkokat? Nem tudom, mitől lehetnek.)
Egyébként nagyon sokat segít, hogy a P5JS könyvtárat használom, de ígyis olyan hosszúak voltak a függvénynevek, hogy inkább lemásoltam őket egykarakteres nevű változókba.
v=createVector
Az eredeti forráskód megtalálható a https://editor.p5js.org/palpista11/sketches/9KjSZ6TKR oldalon, a minifikált verziót pedig ide bemásolom:
let s = [],u,r=2,d,c,P=0,o=1,w,h,v,m this.setup=k=>{ createCanvas(windowWidth, windowHeight) u=width / 20 w=20 h=int(height / u) v=createVector //s=[v(1,0),v(2,0),v(3,0),v(4,0),v(5,0)] b=[0,1,2,3,4].forEach(i=>s.push(v(i,0))) c=é() } this.windowResized=a=>{ resizeCanvas(windowWidth, windowHeight) u=width/20 w=20 h=int(height/u) } this.keyPressed=e=>ű(keyCode-37) ű=l=>{ V = s[s.length - 1].copy() if (l%2) V.y +=l-2 else V.x+=l-1 if (!s[s.length - 2].equals(V))r=l } é=k=>{ p = v(int(random()*w),int(random()*h)) return s.find(pos => p.equals(pos)) ? é():p } this.draw=ú=>{ background(0) fill("red") rect(c.x * u, c.y * u, u, u) fill("#0f0") s.forEach(k=>rect(u*k.x,u*k.y,u,u)) text(P, 40, 40); if (!(frameCount % 20) && !d) { o=o?!!s.shift():true; let V = s[s.length-1].copy(); if (r%2) V.y += r-2 else V.x += r-1 if (V.x < 0 || V.y < 0 || V.x >= w || V.y >= h || s.find(k => k.equals(V))) d=1 if (c.equals(V)) { P++; c = é(); o=0; } s.push(V); } } this.touchStarted=e=>!(m=v(mouseX, mouseY)) this.touchEnded=k=>{ let a = m.sub(mouseX,mouseY).normalize() a.x>.52?ű(0):(-a.x>.52?ű(2):(a.y>.85?ű(1):ű(3))); }
Éles kódban soha ne kövess el hasonló kontárságokat, ismétlem, 𝙎𝙊𝙃𝘼! Bízd rá egy programra, ami nem vét benne hibákat. Léteznek nagyon jó kódminifikáló programok, mint pl. az UglifyJS, vagy a Closure Compiler, amik a programod megírása után fogják az egészet és minden változót átneveznek a lehető legrövidebb változónevűre, kitörlik az entereket, a felesleges space-eket, a kommenteket, stb…
Erre azért lehet szükség, hogy a weboldalad gyorsabban töltsön be, illetve ne fogyasszon annyi mobilinternetet a felhasználóknak. Egy párszáz soros kódnál elenyésző a különbség, de hogyha egy oldal több ilyen kis scriptből áll, amik egyszerre szeretnének betöltődni, akkor már érdemes lehet azon gondolkodni, hogy a scriptek és CSS stíluslapokat tömörítve töltsük fel.
Kategóriák: Programozás