de Yazed Jamal

Cum să construiești un joc de potrivire în timpul tău liber cu Easel.js

O parte din călătoria mea în lumea programării este învățarea despre dezvoltarea jocurilor. Am încercat mai multe limbaje precum Java și C ++, dar până la urmă aș vrea să merg cu Javascript. Am construit un joc înainte de a folosi JS. Jocul se numește Pong Ping, care este clona pentru jocul Pong. Acest joc a fost construit folosind Javascript nativ.

Dar astăzi aș vrea să construiesc un joc bazat pe un cadru de joc Javascript numit Easel.js. Jocul pe care urmează să-l construiesc este de fapt un joc foarte simplu: răsfoim pătrate și, dacă au aceeași culoare, vor dispărea. Jocul se va termina când fiecare culoare este potrivită. Iată un exemplu de joc în videoclipul de mai jos, dar folosesc imagini.

Pasul 1

Voi crea fișierul index.html și voi face o referință la biblioteca easel.js. Aleg să folosesc CDN (Content Delivery Network) în acest scop. De asemenea, va trebui să fac referire la main.js unde va fi tot codul meu Javascript.

#index.html<!DOCTYPE html><html><head> <title>Pairing Game</title> <script src="https://code.createjs.com/easeljs-0.8.2.min.js"></script><script src="js/main.js"></script></head><body onload="init()"> <canvas id="myCanvas" width="960" height="600"></canvas></body></html>

Trebuie să mă asigur că toate elementele DOM sunt încărcate complet înainte ca Javascript-urile să poată fi executate, așa că folosesc metoda onload pentru a lega Javascript prin funcția init ().

ad-banner

Pasul 2

Voi crea apoi fișierul main.js și voi configura mediul easel.js.

#js/main.jsvar squarHeight = 200;var squareWidth = 200;
function init() { var stage = new createjs.Stage("myCanvas"); var square = drawSquare();
stage.addChild(square); stage.update();}

Șevalet utilizează o clasă numită Stage ca un container pentru a afișa orice element pe pânza definită. Acum voi desena un pătrat prin funcția drawSquare. Voi utiliza toate API-urile disponibile de pe easel.js

#js/main.jsfunction drawSquare() { var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)") graphics.beginFill(randomColor()).rect(5,5,squareWidth,squareHeight); var shape = new createjs.Shape(graphics); return shape;}
function randomColor() { var num1 = Math.floor(Math.random()*255); var num2 = Math.floor(Math.random()*255); var num3 = Math.floor(Math.random()*255); return "rgba("+num1+","+num2+","+num3+",1)"; }

Mai întâi voi defini dimensiunea cursei pe care aș dori să o folosesc. Apoi voi aplica cursa cu o culoare specifică, voi defini culoarea pătratului și voi crea pătratul. Culoarea pătratului este o culoare aleatorie generată din funcția randomColor. Mai jos este cum va arăta în browser.

Cum sa construiesti un joc de potrivire in timpul tau

Pasul 3

După ce am redat cu succes un pătrat cu o culoare aleatorie, trebuie să proiectez câte rânduri și coloane vor fi completate pentru pătrate. De asemenea, va trebui să proiectez algoritmul pentru a reda un pătrat în fiecare coloană și rânduri.

#js/main.js##upated codesvar squarHeight = 200;var squareWidth = 200;var squareGap = 10;var column = 3;var row = 2;
function init() { var stage = new createjs.Stage("myCanvas"); var square;
for(i=0; i < column*row; i++) {    square = drawSquare();  square.x = (squareWidth+squareGap)*(i%column);  square.y = (squarHeight+squareGap)*Math.floor(i/column);   stage.addChild(square);  stage.update();   }
}
function drawSquare() { var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)") graphics.beginFill(randomColor()).rect(5,5,squarHeight,squareWidth); var shape = new createjs.Shape(graphics); return shape;}
function randomColor() { var num1 = Math.floor(Math.random()*255); var num2 = Math.floor(Math.random()*255); var num3 = Math.floor(Math.random()*255); return "rgba("+num1+","+num2+","+num3+",1)"; }

Din codurile de mai sus, voi primi un HTML redat de genul:

1611997146 27 Cum sa construiesti un joc de potrivire in timpul tau

Există multe modalități de implementare a redării pătrate. Am putea folosi bucla într-o matrice multidimensională sau am putea manipula dimensiunea pătratului cu o funcție matematică. În acest caz, voi folosi versiunea ulterioară. Dar iată algoritmul dacă doriți să utilizați metoda multidimensională:

#alternativevar positionX =0; var positionY = 0;
for(i=0;i<row;i++) {  for(j=0;j<column;j++) {      square = drawSquare();   square.x = positionX;   square.y = positionY;   stage.addChild(square);   stage.update();   positionX += squareWidth+squareGap;   console.log(positionX);  }  positionX = 0;  positionY += squarHeight+squareGap; }

Pasul 4

Din nou, obiectivul acestui joc este de a combina o pereche de culori împreună. Deci, trebuie să modific codul pentru ca acesta să genereze grupuri de culori în perechi. Pentru a face acest lucru, voi folosi o logică if else pentru a mă asigura că cele două culori similare sunt utilizate în timpul redării pătrate.

#js/main.jsvar temp;var genOnce = false;
function drawSquare() {var color = randomColor();var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)")
 if(!genOnce) {  graphics.beginFill(color).rect(5,5,squarHeight,squareWidth);  temp = color;  genOnce = true; }else {  graphics.beginFill(temp).rect(5,5,squarHeight,squareWidth);  genOnce = false; }
 var shape = new createjs.Shape(graphics); return shape;}

Acest lucru va reda un grup de pătrate ceva de genul acesta:

1611997147 347 Cum sa construiesti un joc de potrivire in timpul tau

Pasul 5

În continuare, vreau ca fiecare dintre pătrate să fie redat într-o poziție aleatorie, astfel încât perechile să fie separate una de cealaltă. Acest lucru poate fi realizat prin crearea mai întâi a unui tablou format din toți indicii pătratelor, apoi amestecarea matricei astfel încât numărul indexului să fie plasat aleatoriu.

#js/main.jsvar squarePlacement = [];
##function to generate array with all the squares indexfunction randomDoubleColor() { for(i=0; i<totalTiles;i++) {  squarePlacement.push(i); }  squarePlacement = shuffleArray(squarePlacement);  return squarePlacement;
}
##function of the array random shufflingfunction shuffleArray(array) {    for (var i = array.length - 1; i > 0; i--) {        var j = Math.floor(Math.random() * (i + 1));        [array[i], array[j]] = [array[j], array[i]];    }    return array;}

Atunci va trebui să schimb modul de redare a pătratului. În loc să iterez prin lungimea pătratelor totale, voi itera prin matricea amestecată aleatoriu.

#js/main.jsfunction init() {  var stage = new createjs.Stage("myCanvas"); var square; randomDoubleColor();
for(i=0; i < squarePlacement.length; i++) {      square = drawSquare();  square.x = (squareWidth+squareGap)*(squarePlacement[i]%column);  square.y = (squarHeight+squareGap)*Math.floor(squarePlacement[i]/column);   stage.addChild(square);  stage.update();   }
}

Acest lucru îmi va aduce un grup de pătrate ca acesta:

1611997147 917 Cum sa construiesti un joc de potrivire in timpul tau

Pot vedea efectul mai bine dacă sunt redate mai multe pătrate:

1611997148 203 Cum sa construiesti un joc de potrivire in timpul tau

Pasul 6

Scopul meu este acum să creez o funcție care să compare două pătrate care vor fi selectate ulterior.

#js/main.jsvar highlight = createjs.Graphics.getRGB(255, 0, 0);var tileChecked;

Voi începe cu definirea unei evidențieri variabile. Aceasta va fi utilizată pentru a evidenția primele pătrate selectate și o țiglă variabilă Bifat pentru a stoca același pătrat.

#js/main.jsfor(i=0; i < squarePlacement.length; i++) {      square = drawSquare();  square.x = (squareWidth+squareGap)*(squarePlacement[i]%column);  square.y = (squarHeight+squareGap)*Math.floor(squarePlacement[i]/column);   stage.addChild(square);  square.addEventListener("click", handleOnPress);  stage.update();   }
}

Voi crea apoi un ascultător de evenimente care va răspunde la un clic al mouse-ului și va declanșa funcția definită, handleOnPress. Acum voi defini funcția după cum urmează:

function handleOnPress(e) {  var tile = e.target;  if(!!tileChecked === false) {   tile.graphics.setStrokeStyle(5).beginStroke(highlight).rect(5, 5, squareWidth, squarHeight);   tileChecked = tile;  }else {   if(tileChecked.graphics._fill.style === tile.graphics._fill.style && tileChecked !== tile) {    tileChecked.visible = false;    tile.visible = false;   }else {    console.log("not match");    tileChecked.graphics.setStrokeStyle(5).beginStroke("rgba(20,20,20,1)").rect(5, 5, squareWidth, squarHeight);   }   tileChecked = null;  }    stage.update();
}

Practic, funcția va verifica mai întâi variabila tileChecked. Dacă este nedefinit, pătratul selectat va fi evidențiat. Obiectul pătrat selectat va fi salvat în variabila tileChecked. În caz contrar (ceea ce mă aștept să se întâmple la al doilea clic), se va compara culoarea dintre pătratul selectat curent și cel care este stocat în variabila tileChecked.

În această a doua comparație, dacă culoarea este potrivită, voi face să dispară ambele pătrate. Dacă nu este o potrivire, voi elimina evidențierea și voi reseta variabila țiglă Verificat la nedefinit.

1611997148 263 Cum sa construiesti un joc de potrivire in timpul tau

Pasul 7

Pentru a crea un adevărat joc de puzzle, nu trebuie afișate toate culorile. Voi face pătratele acoperite de pătrate gri, iar când se face clic pe fiecare, va dezvălui culoarea. Deci, atunci când nu este o potrivire, pătratul gri va acoperi din nou cutia.

Pentru a-l face mai redat, mă voi asigura că alte pătrate nu pot fi făcute clic pe durata comparației. Voi pune, de asemenea, o oarecare întârziere între momentul în care este afișată a doua culoare și când ambele pătrate dispar sau se transformă în gri. Trebuie făcute unele modificări pentru ca totul să funcționeze corect

function init() {  var stage = new createjs.Stage("myCanvas");  randomDoubleColor();
for(i=0; i < squarePlacement.length; i++) {    var color =randomColor();  console.log(color);  var square = drawSquare(color);  console.log(square);    square["color"] = square.graphics._fill.style;  square.graphics._fill.style = "rgb(140, 136, 136)";    square.x = (squareWidth+squareGap)*(squarePlacement[i]%column);  square.y = (squareHeight+squareGap)*Math.floor(squarePlacement[i]/column);   stage.addChild(square);  square.addEventListener("click", handleOnPress);  stage.update();   }  function handleOnPress(e) {    var tile = e.target;
tile.graphics.beginFill(tile.color).rect(5,5,squareHeight,squareWidth);  console.log(tile.mouseEnabled);  tile.mouseEnabled = false;  console.log(tile.mouseEnabled);
if(!!tileChecked === false) {      tileChecked = tile;  }else {
stage.mouseChildren = false;   tile.graphics.beginFill(tile.color).rect(5,5,squareHeight,squareWidth);
setTimeout(function() {    console.log("in");    console.log(tile);    console.log(tileChecked);       if(tileChecked.color === tile.color && tileChecked !== tile) {         tileChecked.visible = false;     tile.visible = false;                }else {    console.log("not match");    tile.graphics.beginFill("rgb(140, 136, 136)").rect(5,5,squareHeight,squareWidth);    tileChecked.graphics.beginFill("rgb(140, 136, 136)").rect(5,5,squareHeight,squareWidth);
}   tile.mouseEnabled = true;   tileChecked.mouseEnabled = true;   stage.mouseChildren = true;   tileChecked = null;
stage.update();      }, 1000);              }    stage.update();
}
}
function drawSquare(color) {     var graphics = new createjs.Graphics().setStrokeStyle(5).beginStroke("rgba(20,20,20,1)")
if(!genOnce) {  graphics.beginFill(color).rect(5,5,squareHeight,squareWidth);  temp = color;  genOnce = true; }else {  graphics.beginFill(temp).rect(5,5,squareHeight,squareWidth);  genOnce = false; }    var shape = new createjs.Shape(graphics); return shape;}

Mai jos este un videoclip al jocului în acțiune:

Acest joc poate fi îmbunătățit în continuare prin adăugarea regulilor de câștig sau pierdere sau poate prin adăugarea unui cronometru pentru a înregistra timpul de finalizare al fiecărui jucător. În acest moment voi opri dezvoltarea până în acest moment. Codul complet poate fi găsit pe GitHub de mai jos și oricine este liber să-l folosească pentru orice alt proiect.

foarte încântat / Matching-game-using-Easel.js
Contribuiți la dezvoltarea Matching-game-using-Easel.js prin crearea unui cont pe GitHub.github.com

DEMO

Note: Există, probabil, multe modalități de a implementa această caracteristică, dar acest mod a fost cel mai ușor pentru mine. Oricine este liber să comenteze orice greșeli sau îmbunătățiri pe care le pot aplica. Acest ghid este inițial pentru mine să învăț și să-mi amintesc ce am făcut. Cu toate acestea, oricine este binevenit să urmeze acest ghid dacă vi se pare util.