WeChat-Applet implementiert Puzzlespiel

<!--index.wxml-->
<Klasse anzeigen="Container">
  <!-- Titel -->
  <view class="title">Auswahl des Spiellevels</view>

  <!-- Ebenenliste -->
  <Klasse anzeigen="levelBox">
    <view class="box" wx:for="{{levels}}" wx:key="levels{{index}}" bindtap="chooseLevel" data-level="{{item}}">
      <image src="/images/{{item}}"></image>
      <text>Ebene {{index+1}}</text>
    </Ansicht>
  </Ansicht>

</Ansicht>

/**index.wxss**/
/* Ebenenbereichsliste */
.levelBox{
  Breite: 100 %;
}

/* Einstufiger Bereich */
.Kasten{
  Breite: 50%;
  schweben: links;
  Rand: 25 Rpx 0;
  Anzeige: Flex;
  Flex-Richtung: Spalte;
  Elemente ausrichten: zentrieren;
}

/*Bild zur Ebenenauswahl*/
Bild{
  Breite: 260rpx;
  Höhe: 260rpx;
}

//index.js
Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    Ebenen: [
      'Bild01.jpg',
      'bild02.jpg',
      'bild03.jpg',
      'bild04.jpg',
      'bild05.jpg',
      'Bild06.jpg'
    ]

  },

  /**
   * Benutzerdefinierte Funktion - Auswahl des Spiellevels */
  wähleLevel: Funktion(e) {
    // Konsole.log(e.currentTarget.dataset.level)
    // Holen Sie sich das Bild zur Ebenenauswahl let level = e.currentTarget.dataset.level

    // Zur Spieleseite springen wx.navigateTo({
      URL: '../Spiel/Spiel?Level='+Level,
    })

  },
})

<!--pages/spiel/spiel.wxml-->
<Klasse anzeigen="Container">
  <!-- Top-Tipp-Bild -->
  <view class="title">Eingabeaufforderungsbild</view>
  <Bild src="{{url}}"></Bild>

  <!-- Spielbereich -->
  <canvas canvas-id="meineCanvas" bindtouchstart="touchBox"></canvas>

  <!-- Neustart-Schaltfläche -->
  <button type="warn" bindtap="restartGame">Neustart</button>
</Ansicht>

/* Seiten/Spiel/Spiel.wxss */
/* Eingabeaufforderungsbild*/
Bild{
  Breite: 250rpx;
  Höhe: 250rpx;
}

/* Leinwandbereich des Spiels */
Leinwand{
  Rand: 1rpx durchgezogen;
  Breite: 300px;
  Höhe: 300px;
}

// Seiten/Spiel/Spiel.js
// Die Anfangsposition des Blocks var num = [
  ['00', '01', '02'],
  ['10', '11', '12'],
  ['20', '21', '22']
]

// Die Breite des Blocks var w = 100

// Die Anfangsadresse des Bildes var url = '/images/pic01.jpg'

Seite({

  /**
   * Ausgangsdaten der Seite */
  Daten: {
    isWin: falsch

  },

  /**
   * Benutzerdefinierte Funktion - Reihenfolge der Blöcke zufällig durcheinanderbringen */
  mischen: Funktion() {
    // Bringe zuerst alle Blöcke an ihre Anfangspositionen zurück num = [
      ['00', '01', '02'],
      ['10', '11', '12'],
      ['20', '21', '22']
    ]

    //Zeichne die Zeile und Spalte des aktuellen leeren Quadrats auf, var row = 2
    var col = 2

    // Reihenfolge der Blöcke 100-mal zufällig mischen for (var i = 0; i < 100; i++) {
      // Erzeuge zufällig eine Richtung: hoch 0, runter 1, links 2, rechts 3
      var Richtung = Math.round(Math.random() * 3)

      // Nach oben: 0
      wenn (Richtung == 0) {
        // Das leere Quadrat kann nicht in der obersten Reihe stehen if (row != 0) {
          // Positionen vertauschen Num[Zeile][Spalte] = Num[Zeile - 1][Spalte]
          Num[Zeile - 1][Spalte] = '22'

          // Aktualisiere die Zeile des leeren Quadrats row -= 1
        }
      }

      // Weiter: 1
      wenn (Richtung == 1) {
        // Das leere Quadrat kann nicht in der untersten Reihe stehen, wenn (Reihe != 2) {
          // Positionen vertauschen num[row][col] = num[row + 1][col]
          Num[Zeile + 1][Spalte] = '22'

          // Aktualisiere die Zeile des leeren Quadrats row += 1
        }
      }

      // Links: 2
      wenn (Richtung == 2) {
        // In der Spalte ganz links dürfen keine leeren Felder stehen if (col != 0) {
          // Positionen vertauschen num[row][col] = num[row][col - 1]
          Num[Zeile][Spalte - 1] = '22'

          // Aktualisiere die leere quadratische Spalte col -= 1
        }
      }

      // Rechts: 3
      wenn (Richtung == 3) {
        // In der Spalte ganz rechts dürfen keine leeren Felder stehen if (col != 2) {
          // Positionen vertauschen num[row][col] = num[row][col + 1]
          Num[Zeile][Spalte + 1] = '22'

          // Aktualisiere die leere quadratische Spalte col += 1
        }
      }

    }

  },

  /**
   * Benutzerdefinierte Funktion - Canvas-Inhalt zeichnen */
  drawCanvas: Funktion () {
    lass ctx = dies.ctx

    // Leinwand löschen ctx.clearRect(0, 0, 300, 300)

    // Verwende eine doppelte for-Schleifenanweisung, um ein 3x3-Puzzle zu zeichnen for (var i = 0; i < 3; i++) {
      für (var j = 0; j < 3; j++) {
        wenn (Zahl[i][j] != '22') {
          // Zeile und Spalte abrufen var row = parseInt(num[i][j] / 10)
          var col = num[i][j] % 10

          // Zeichne das Quadrat ctx.drawImage(url, col * w, row * w, w, w, j * w, i * w, w, w)
        }
      }
    }

    ctx.draw()
  },

  /**
   * Benutzerdefinierte Funktion – auf Klickblock-Ereignisse achten*/
  touchBox: Funktion(e) {
    // Wenn das Spiel bereits erfolgreich ist, nichts tun if (this.data.isWin) {
      //Beenden Sie diese Funktion return
    }

    // Holen Sie sich die x- und y-Koordinaten des angeklickten Blocks
    var x = e.changedTouches[0].x
    var y = e.changedTouches[0].y
    // konsole.log('x:'+x+',y:'+y)

    // In Zeilen und Spalten umwandeln var row = parseInt(y / w)
    var col = parseInt(x / w)

    // Wenn die angeklickte Position nicht leer ist if (num[row][col] != '22') {
      // Versuche die Box zu verschieben this.moveBox(row, col)

      // Den Canvas-Inhalt neu zeichnen this.drawCanvas()

      // Bestimmen Sie, ob das Spiel erfolgreich ist, wenn (this.isWin()) {
        //Prompt-Anweisung auf dem Bildschirm zeichnen let ctx = this.ctx

        // Zeichne das komplette Bild ctx.drawImage(url, 0, 0)

        // Text zeichnen ctx.setFillStyle('#e64340')
        ctx.setTextAlign('Mitte')
        ctx.setFontSize(60)
        ctx.fillText('Spielerfolg', 150, 150)
        ctx.draw()
      }
    }
  },

  /**
   * Benutzerdefinierte Funktion - Verschieben des angeklickten Blocks */
  moveBox: Funktion(i, j) {
    // Fall 1: Wenn der angeklickte Block nicht ganz oben ist, dann prüfe, ob er nach oben verschoben werden kann if (i > 0) {
      // Wenn der obere Teil des Blocks leer ist if (num[i - 1][j] == '22') {
        // Tausche den aktuell angeklickten Block mit der leeren Position num[i - 1][j] = num[i][j]
        Zahl[i][j] = '22'
        zurückkehren
      }
    }

    // Fall 2: Wenn der angeklickte Block nicht ganz unten ist, prüfe, ob er nach unten verschoben werden kann if (i < 2) {
      // Wenn der Bereich unter dem Block leer ist if (num[i + 1][j] == '22') {
        // Tausche den aktuell angeklickten Block mit der leeren Position num[i + 1][j] = num[i][j]
        Zahl[i][j] = '22'
        zurückkehren
      }
    }

    // Fall 3: Wenn der angeklickte Block nicht ganz links ist, prüfe, ob er nach links verschoben werden kann if (j > 0) {
      // Wenn die linke Seite des Quadrats leer ist if (num[i][j - 1] == '22') {
        // Tausche den aktuell angeklickten Block mit der leeren Position num[i][j - 1] = num[i][j]
        Zahl[i][j] = '22'
        zurückkehren
      }
    }

    // Fall 4: Wenn der angeklickte Block nicht ganz rechts ist, prüfe, ob er nach rechts verschoben werden kann if (j < 2) {
      // Wenn die rechte Seite des Quadrats leer ist if (num[i][j + 1] == '22') {
        // Tausche den aktuell angeklickten Block mit der leeren Position num[i][j + 1] = num[i][j]
        Zahl[i][j] = '22'
        zurückkehren
      }
    }
  },

  /**
   * Benutzerdefinierte Funktion - Bestimmen Sie, ob das Spiel erfolgreich ist */
  isWin: Funktion() {
    //Verwende eine doppelte for-Schleife, um das gesamte Array auf (var i = 0; i < 3; i++) zu überprüfen {
      für (var j = 0; j < 3; j++) {
        // Wenn ein Block an der falschen Position steht if (num[i][j] != i * 10 + j) {
          // Return false, das Spiel war noch nicht erfolgreich return false
        }
      }
    }

    // Spiel erfolgreich, Status aktualisieren this.setData({
      isWin: wahr
    })
    //Gibt „true“ zurück, das Spiel ist erfolgreich. Return true
  },

  /**
   * Benutzerdefinierte Funktion - Spiel neu starten */
  Spiel neu starten: Funktion() {
    // Aktualisiere den Spielstatus this.setData({
      isWin: falsch
    })

    // Reihenfolge der Blöcke mischen this.shuffle()

    // Den Canvas-Inhalt zeichnen this.drawCanvas()
  },

  /**
   * Lebenszyklusfunktion - auf Seitenladen warten*/
  beim Laden: Funktion (Optionen) {
    // konsole.log(Optionen.Level)

    // Aktualisieren Sie die Bildpfadadresse url = '/images/' + options.level
    // Aktualisiere die Adresse des Prompt-Bildes this.setData({
      URL: URL
    })

    // Einen Canvas-Kontext erstellen this.ctx = wx.createCanvasContext("myCanvas")

    // Reihenfolge der Blöcke mischen this.shuffle()

    // Den Canvas-Inhalt zeichnen this.drawCanvas()
  },

  /**
   * Lebenszyklusfunktion - wartet auf den Abschluss der ersten Darstellung der Seite*/
  onReady: Funktion() {

  },

  /**
   * Lebenszyklusfunktion - Seitenanzeige überwachen*/
  onShow: Funktion() {

  },

  /**
   * Lebenszyklusfunktion - Achten Sie auf das Ausblenden von Seiten */
  onHide: Funktion() {

  },

  /**
   * Lebenszyklusfunktion - Deinstallation der Seite überwachen*/
  beimEntladen: Funktion() {

  },

  /**
   * Seitenbezogene Ereignisverarbeitungsfunktion - Achten Sie auf die Pulldown-Aktion des Benutzers */
  beiPullDownRefresh: Funktion() {

  },

  /**
   * Die Funktion, die das Bottoming-Ereignis auf der Seite behandelt*/
  bei ErreichenBottom: function() {

  },

  /**
   * Der Benutzer klickt auf die obere rechte Ecke, um zu teilen*/
  beiShareAppMessage: Funktion() {

  }
})