55 soros Snake

September 29, 2020 / Írta: Ambrus

Loading Likes...

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.