Hozzon létre egy digitális etch egy vázlatot

Ebben a bemutatóban a mechanikus rajz játékot vázlatot vázolunk, mint inspirációt, és megpróbáljuk végrehajtani ezeket a funkciókat a modern eszközökhöz, webes technológiákkal. A (aptly nevű) vászon használatával először a tablettákra összpontosítunk, amelyek az autentikus játékhoz hasonlóan hasonlítunk. Kihasználhatjuk az érintőképes eseményeket a tárcsák vezérléséhez, valamint az eszközmozgás eseményeinek törléséhez a tartalom törléséhez. Nem távozik a telefonok, akkor is feltárjuk, hogyan kell használni a websocketeket, hogy növeljék a lehetőségeket a vezérlők és a rajzterület megosztásával.

01. Szerezd meg az eszközöket

Ez a bemutató a Node.js.-t fogja használni Mielőtt elkezdenénk, menjünk Filesilo , Válassza ki az ingyenes dolgokat és ingyenes tartalmakat a bemutató mellett - Itt letöltheti azokat a eszközöket, amelyekre szükség van a bemutatóhoz. Ezután futtassa az alábbi parancsokat, amely telepíti a függőségeket és elindítja a kiszolgálót. A csomópontot használjuk a helyi kiszolgáló , és később szolgál minket a weboldalak számára is.

 NPM telepítés
Csomópont szerver / index.js 

02. Használja a Draw () funkciót

Ban ben main.js , a húz() A funkció a kérelem középpontja lesz. A vászonot használjuk, hogy két pontot vonzunk; Az eredet (x1, y1), ahol utoljára elhagytuk a rajzunkat, és a rendeltetési helyet (X2, Y2), az új pontot elérni akarjuk. Most meg kell adnunk ezt a funkciót, hogy megfigyeljük a rajz bármilyen formáját.

 Funkció rajz (x1, y1, x2, y2) {
  // A kontextus globálisan az init ()
  kontextus.beginpath ();
  kontextus.moveto (x1, y1);
  kontextus.lineto (x2, y2);
  kontextus.Stroke ();
} 

03. Végezze el a billentyűzet eseményeit

Mielőtt végrehajtanánk tárcsázást, gyorsan adjunk hozzá egy billentyűzet hallgatót, amely kiválthatja a rajzfunkciót. Már a különböző keycodes A példában, de a hallgatót kissé módosítania kell, hogy kiváltja a húz() a korábban definiált funkció. Most frissítse a böngészőt, és nézze meg, mit tud rajzolni a nyílgombokkal.

 Dokumentum.addeventlistener ("Keydown", funkció (e) {
  / * Keycode Switch megy itt * /
  rajz (matematika (prev_horizontal), math.floor (prev_vertical), math.floor (vízszintes), math.floor (függőleges));
  prev_vertical = függőleges;
  prev_horizontal = vízszintes;
}); 

04. A vászon átméretezése

Lehet, hogy észrevette, hogy a vászon elemünknek még nincs méretét. A rajzlapunkhoz nagyobb helyet szeretne, talán még az egész ablak is. Az alábbi kód gondoskodik az átméretező eseményről, de ne felejtse el hívni Állítsa be a fájlokat () ban ben benne() is.

 FunkcióbeállításFrame () {
  // vászon a globálisan definiálva init ()
  vavas.width = window.innerwidth;
  vászon.height = window.innerheight;
}
window.addeventlistener ("átméretezés", beállítóvasítás); 

05. Adjon hozzá egy keretet

Azt akarjuk, hogy az alkalmazás olyan, mint az eredeti játék, amennyire csak lehetséges, így szeretnénk hozzáadni egy keretet a rajzterület körül. Ehhez definiálhatjuk a margin értéket, és módosíthatjuk a CSS-t #vázlat Margin: 20px Auto; A vászon vízszintes középpontjában, és nagyobb helyet kell tartani a tárcsák alján.

 VAR Framemargertical = 122;
var framemarginhorizontal = 62;
FunkcióbeállításFrame () {
  canvas.width = window.innerwidth - framemarginhorizontal;
  canvas.height = window.InnerHeight - Framemargergertical;
} 

06. Hozzon létre egy tárcsákat

Már megadtuk a CSS-t a tárcsákhoz Nyilvános / CSS / Styles.css , így szabadon nézzen. Ezután adj hozzá kettőt & lt; div & gt; Címkék a & lt; vászon & gt; a HTML fájlban, az alábbiak szerint. Egyezményként a bal oldali tárcsát vízszintes rajzra és a függőleges jobbra fogjuk használni. Új változókat is hozzáadunk a benne() Funkció az érintőképes események előkészítéséhez.

 & lt; div id = "dialhorizontal" osztály = "DIAL" & gt; & lt; / div & gt;
& lt; div id = "Dialvertikus" osztály = "DIAL" & gt; & lt; / div & gt; 

 var scticleft = document.getelementbyid ('Dial Horhorizontal');
VAR RegionLeft = Új Zingtouch.Region (Céllegeft);
var Targetright = Document.getElementbyid ('Dialvertical');
VAR Regionright = Új Zingtouch.Region (Targetright); 

07. A Zingtouch használatával

A Zingtouch egy JavaScript könyvtár, amely képes különböző érintőképes gesztusok kimutatására, és az egér eseményeket is kezelheti. Az Ön számára biztosított / nyilvános / lib / Mappa, amint azt a tárcsák vezérléséhez használjuk. Az alábbiakban a bal oldali ellenőrzés megvalósítása; Meg kell ismételnie és módosítania kell a másik oldalra.

 RegionLeft.bind (TitkLeft, 'Forgatás ", funkció (E) {
  ha (e.detail.distancefromlast & lt; 0) {
  --vízszintes;
  } más {
  ++ vízszintes;
  }
  szöghorizontal + = e.detail.distanceFromlast;
  citchleft.style.transform = 'forgatása (' + anglehorizontal + 'deg)';
  rajz (matematika (prev_horizontal), math.floor (prev_vertical), math.floor (vízszintes), math.floor (prev_vertical));
  prev_horizontal = vízszintes;
}); 

08. Végezze el a tárcsázási határokat

Ahhoz, hogy blokkolja a vonalakat a képernyőn, használjuk a Candraw () funkció, amely visszaad egy logikai. Átadjuk az irányt, akár a "vízszintes" vagy a "függőleges", a vízszintes vagy függőleges változó értékét. Ezt a funkciót mindkét tárcsák "forgatása" hallgatójába hívjuk, és csak akkor, ha "igaz" növeljük a szöget, és hívjuk a húz() funkció.

 Funkció Candraw (irány, érték) {
  var max = (irány === "vízszintes")? (vavas.width) :( vavas.height);
  Ha (Érték & lt; 2 || érték & gt; max - 2) {
  vissza a hamis;
  }
  visszatér;
} 

09. Kerülje el a tárcsázási problémákat

A határokat már éppen végre, van esély a tárcsát elzárhatná egyik végén, ha az érték megy át a határt, még egy tizedes pontossággal. A helyzet elkerülése érdekében kezeljük az ügyet, ahol Candraw () Hamis, és visszaállítja az értéket egy korábban érvényesnek, amint az a vízszintes vezérlő számára látható:

 ha (Candraw ("vízszintes", vízszintes))) {
  szöghorizontal + = e.detail.distanceFromlast;
  citchleft.style.transform = 'forgatása (' + anglehorizontal + 'deg)';
  rajz (matematika (prev_horizontal), math.floor (prev_vertical), math.floor (vízszintes), math.floor (prev_vertical));
  prev_horizontal = vízszintes;
} más {
  vízszintes = prev_horizontal;
} 

10. Szerezd meg a rajztáblát a táblagépen

Mindig ajánlott tesztelni a célzott eszközöket a lehető leghamarabb. Alkalmazásunk most jó állapotban van, és válaszolhat az eseményekre. Kövesse a Localhost távolról elérhető lépéseket, hogy megkapja a rajztáblát a táblagépen.

Ezután a Safari-t és a Fejlesztési menüt használjuk az iPad alkalmazásának ellenőrzésére. Android eszközökhöz, használatra Chrome: // ellenőrzése .

11. Tesztelje a gyorsulásmérőt

Csatlakoztassa tablettáját az USB-n keresztül, és ellenőrizze az alkalmazást a fejlesztői eszközök segítségével.

Az alábbi kóddal a helyén van, meg kell tudnia látni a különböző gyorsítási értékeket, ahogy a készüléket áthelyezi. A vászon visszaállításához úgy döntöttünk, hogy az X tengelyen 5-nél nagyobb gyorsulást vizsgálunk, és lassan csökkenti az opacitást ( kitöröl ).

 var eraserate = 1; / * Definiálja globális változó * /
ablak.addeventlistener ("DeviceMotion", funkció (esemény) {
  konzol.log ("gyorsulás ::", esemény.accelation);
  ha (esemény.accelation.x & gt; 5) {
  eraserátum - = math.abs (esemény.accelation.x / 100);
  konzol.log ("Erase ::", törlés);
  }
}); 

12. Rázza a törlést

Az előző lépésben láttuk, hogyan kell ellenőrizni a mozgást és a gyorsulást. Most meg kell hívnunk fadedrawing () amikor a feltételünk teljesül. Ebben az esetben felülvizsgáljuk a vászon pontos példányát egy másik átlátszatlanságban.

Állítsa vissza a globalalpát 1-re húz() és állítsa be a globalbocosperation vissza a forráshoz.

 Funkció fadedrawing () {
  Ha (Eraserátum & LT; 0) {
  kontextus.Contrect (0, 0, vászon.Hát, vászon.height);
  Eraserátum = 1;
  Visszatérés;
  }
  kontextus.globalalpha = törlés;
  kontextus.globalcompospeOperation = 'Másolás';
  kontextus.Drawimage (vászon, 0, 0);
} 

13. úgy néz ki, mint az igazi üzlet

Eddig az alkalmazásunk eléggé és lapos. Annak érdekében, hogy néhány mélységet adjunk hozzá, hozzáadunk egy keretszínt, az árnyékot a keretben és egy kis mennyiségben a tárcsákon. A tárcsázási árnyékok CSS már rendelkezésre áll, de hozzá kell adnia a két elemet a test végén.

Töltse ki az itt javasolt elemek CSS-jét:

 & lt; div id = "dialshadowhorizontal" osztály = "árnyék" & gt; & lt; / div & gt;
& lt; div id = "dialshadowvertical" osztály = "árnyék" & gt; & lt; / div & gt; 

 test {
  Háttér: # 09cbf7;
}
#sketch {
  Box-Shadow: 2PX 2PX 10PX RGBA (0, 0, 0, .25) inszer;
} 

14. Használja a webhelyeket

A bemutató elején röviden említettük a weboldalakat a csomópont-kiszolgálón keresztül. Most, hogy van egy önálló rajzpad a tabletta számára, megnézzük, hogy elérhetővé tegye a telefonját is. A telefonok azonban túl kicsiek lehetnek a képernyő és a kezelőszervek megjelenítéséhez. Ezért az aljzatok kommunikálnak a telefon és a számítógép képernyőjén.

15. Detektálja a készülék méretét

A fő HTML fájlban cserélje ki main.js val vel extra.js . Az utóbbiak mindent megteszünk, amit eddig végeztünk, az eszközök és az aljzatok kezelése, amelyek a következő lépésekben vizsgáljuk meg. Nézd meg detectdevice () - Ez a módszer most a terhelésre kerül benne() és eldönti, hogy melyik "mód" az alkalmazás kezeléséhez.

Az alábbiakban az észlelt telefon specifikus esete:

 Ha (ablak.innerwidth & lt; 768) {
  socket = io.connect ();
  Document.QuerySelector ('# Sketch'). Eltávolítás ();
  VAR Dials = Document.QuerySelectorall ('. Dial, .shadow);
  [] .foreach.call (tárcsázás, funkció (tétel) {
  item.classlist.add ('Big');
  });
  iscontrols = igaz;
  framemarginvertical = 62;
  socket.emit ("Ready", {'Ready': 'Controls'});
} 

16. A telefonról a számítógépre

Egészében extra.js A kódok bitjeit észre fogja venni socket.emit () vagy socket.on () . Ezek az emitterek és hallgatók a kezelőszervek (telefon) és a képernyő (számítógép) példányok számára. Minden kibocsátott eseménynek át kell mennie a szerveren, hogy újra eloszthassa az összes csatlakoztatott aljzatot. Ban ben Server \ Index.js Adjon hozzá néhány további hallgatót a "Csatlakozás" funkcióban és indítsa újra a csomópont-kiszolgálót.

 Socket.on ('Draw', függvény (adatok) {
  io.sockets.emit ("rajz", adatok);
});
socket.on ("törlés", funkció (adatok) {
  io.sockets.emit ("törlés", adatok);
});
socket.on ("Alkothrame", funkció (adatok) {
  screenwidth = adatok.Screenwidth;
  screenheight = data.screenheight;
  io.sockets.emit ('Alkothrame', adatok);
}); 

17. Javítsa ki a telefon tájolását

Látogasson el a localhost-ra a számítógépen, miközben távolról érheti el a telefont (mint korábban a tabletta). Most látnia kell egy vonalat, amelyet a képernyőn rajzol, miközben bekapcsolja a tárcsákat a telefonon. Meg fogja venni azonban, hogy a tárcsák nem illeszkednek megfelelően, ha a telefon portré módban van.

Ezt néhány CSS-vel javíthatjuk:

 @Media képernyő és (tájolás: portré) {
  .dial.big # dialvertikus ,.shadow.big # dialshadowvertical {
  Jobb: Calc (50% - 75px);
  alsó: 20px;
  Top: Auto;
  }
  .dial.big # dialhorizontal, .shadow.big # dialshadowhorizontal {
  Bal: Calc (50% - 75px);
  Top: 20px;
  }
} 

18. A játékot reálisabbá tegye

Menjünk vissza a tabletta verziójához. Sajnos, a rezgés API nem érhető el az iOS-on, így nem tudunk haptikus visszajelzést végrehajtani, amikor a tárcsák megfordulnak. Az eredeti játékban azonban elhagyhatod az ideiglenes fekete ujjlenyomatjeleket a képernyőn, ha azt nyomta. Hozzáadhatunk egy érintőképernyőt a készüléken, hogy megismételjük ezt a funkciót.

Állítsa be ezeket a hallgatókat benne() és fedezze fel az általuk hívott funkciókat:

 Ha (Type === 'All') {
  vavas.addeventlistener ('Touchstart', funkció (e) {
  e.preventdefault ();
  rajzfingingerprint (e.layerx, e.layery, igaz);
  });
  vászon.addeventlistener ('Touchend', Funkció (E) {
  Hidefingerprint (E.LayerX, E.layery);
  });
} 

19. Mentse el a vászon másolatát

Ban,-ben rajzfingeryprint () módszer, mielőtt mást csinálni, akkor megtakarítás egy példányát a jelenlegi állapotában a vászon egy rejtett elemet, amit használni visszaállítani a rajz, ha törli a nyomtatási. Ez csak az első érintésen történik, és nem a következő hívásokon, amelyek növelik a nyomtatás méretét 100 ms.

 FUNCTION SCRAMFERTHERPREST (XPOS, YPOS, SAVECANVAS) {
  / * részleges funkció, lásd az extra.js * /
  Ha (Savecanvas) {
  hiddencanvas = document.createels ('vászon);
  var Hiddencontext = Hiddencanvas.getContext (2D ');
  hiddencanvas.width = vászon.Hát;
  hiddencanvas.height = vászon.height;
  hiddencontext.drawimage (vászon, 0, 0);
  }
} 

20. Futtassa az alkalmazást offline állapotban

Most az alkalmazást igazán önállóvá teheted, ha otthoni képernyővé válik a táblagépéhez. Nem tudunk ugyanezt tenni a telefonon, mivel kapcsolatot igényel a kiszolgálóhoz. Ban ben /nyilvános , Keresse meg a nevű fájlt sketch.appcache és cserélje ki az IP-címed "localhost" összes példányát.

Most módosítsa a HTML-t a következőképpen:

 & lt; html lang = "en" manifest = "sketch.appcache" & gt; 

21. Mentse az alkalmazást

Most keresse meg újra az alkalmazást a táblagépen, és válassza ki a Hozzáadás a Kezdőlap képernyőhöz. Új ikon jelenik meg az asztalon. Nyissa ki egyszer, miközben továbbra is távolról van csatlakoztatva a localhosthoz. A korábban beállított gyorsítótár manifeszt letölti az összes szükséges fájlt az offline használathoz a háttérben. Kapcsolja ki a Wi-Fi-t, és nyissa meg újra az alkalmazást. Voálá!

Ez a cikk eredetileg megjelent Web Designer magazin 263. kiadja itt .

Olvass tovább:

• 15 webes Apis, amit soha nem hallottál
• A kezdő útmutató az interfész animációk tervezéséhez
• Útmutató a jobb CSS írásához