2048 in Vue.js

Prima di tutto provalo.
Puoi giocare con un touch-screen, quindi basta aprire il link con lo smartphone ma se sei su desktop puoi abilitare i DevTools del tuo browser e giocare ugualmente:
Apri il gioco

Per prima cosa bisogna controllare che il device sia touch-screen:

mounted() {
    if (!window.matchMedia("(any-hover: none)").matches) {
      this.isMobile = false;
      this.userMessage = "IMPORTANT: You need a touch screen to play!";
    }

    this.startGame();
  }

La funzione che fa partire il gioco imposta alcune variabili e soprattutto crea la matrice in cui si memorizzano i valori delle varie caselle:

startGame() {
      if (this.limit > 9) return;

      this.readyToPlay = false;
      this.setCellSide();
      this.createMatrix();
      this.points = 0;
      this.moves = 0;
      this.setValue(0, 2, 2);
      this.setValue(0, 1, 2);
      setTimeout(() => (this.readyToPlay = true), 500);
    },

    createMatrix() {
      this.matrix = [];
      for (var i = 0; i < this.limit; i++) {
        this.matrix[i] = [];
        for (var j = 0; j < this.limit; j++) {
          this.matrix[i][j] = 0;
        }
      }
    },

Cosa succede quando il giocatore fa uno swipe? Ecco la logica per lo swipe a sinistra. Questo è il cuore della logica del gioco che poi va replicato in modo più o meno furbo per gli altri 3 movimenti:

    moveLeft(x, hasMerged) {
      var hasMoved = false;
      for (let i = 0; i < this.limit; i++) {
        if (i > 0 && this.matrix[x][i] > 0) {
          // if empty
          if (this.matrix[x][i - 1] === 0) {
            this.matrix[x][i - 1] = this.matrix[x][i];
            this.matrix[x][i] = 0;
            hasMoved = true;
          }
          // if same values: merge them!
          if (
            this.matrix[x][i - 1] === this.matrix[x][i] &&
            this.matrix[x][i] + this.matrix[x][i - 1] <= hasMerged
          ) {
            this.matrix[x][i - 1] = this.matrix[x][i] + this.matrix[x][i - 1];
            this.matrix[x][i] = 0;
            hasMoved = true;
            this.addPoints(this.matrix[x][i - 1]);
            hasMerged = this.matrix[x][i - 1];
          }
        }
      }
      return { hasMoved: hasMoved, hasMerged: hasMerged };
    },
    swipeLeft() {
      for (let i = 0; i < this.limit; i++) {
        let _hasMerged = this.mergeLimit;
        var loop = true;
        while (loop) {
          let { hasMoved, hasMerged } = this.moveLeft(i, _hasMerged);
          _hasMerged = hasMerged;
          if (!hasMoved) loop = false;
        }
      }
    },

Ma come si controllano gli swipe? Con 2 eventi touch sul DIV che contiene la griglia di gioco:

 @touchstart="touchStart" @touchend="touchEnd" 

E dopo nel gestore degli eventi si fanno dei semplici controlli per capire la direzione dello swipe:

   touchStart(event) {
      this.touchstartX = event.changedTouches[0].screenX;
      this.touchstartY = event.changedTouches[0].screenY;
    },
    touchEnd(event) {
      this.touchendX = event.changedTouches[0].screenX;
      this.touchendY = event.changedTouches[0].screenY;
      if (this.handleGesture()) {
        this.moves++;
        setTimeout(() => {
          this.movementClass = "";
          this.createNewCellWithValue(0);
        }, 300);
      }
    },

    handleGesture() {
      if (
        this.touchendY < this.touchstartY &&
        this.touchstartY - this.touchendY > 50
      ) {
        this.swipeUp();
        this.movementClass = "fromDown";
        return true;
      }

      if (
        this.touchendY > this.touchstartY &&
        this.touchendY - this.touchstartY > 50
      ) {
        //console.log("Swiped Down");
        this.swipeDown();
        this.movementClass = "fromUp";
        return true;
      }

      if (this.touchendX < this.touchstartX) {
        //console.log("Swiped Left");
        this.swipeLeft();
        this.movementClass = "fromRight";
        return true;
      }

      if (this.touchendX > this.touchstartX) {
        //console.log("Swiped Right");
        this.swipeRight();
        this.movementClass = "fromLeft";
        return true;
      }

      if (this.touchendY === this.touchstartY) {
        //console.log("Tap");
        return false;
      }
    },