suchen

Heim >Web-Frontend >js-Tutorial >Javascript kombiniert mit Flexbox zur einfachen Implementierung eines Schiebepuzzlespiels. Javascript-Kenntnisse

Javascript kombiniert mit Flexbox zur einfachen Implementierung eines Schiebepuzzlespiels. Javascript-Kenntnisse

WBOY
WBOYOriginal
2016-05-16 15:15:031384Durchsuche

Schiebepuzzle bedeutet, ein Bild in gleiche Teile zu teilen, die Reihenfolge zu mischen (Bild unten) und sie dann zusammenzuschieben, um ein vollständiges Bild zu ergeben.

Um ein Puzzle umzusetzen, müssen Sie überlegen, wie Sie die Reihenfolge zufällig mischen, wie Sie die Positionen zweier Bilder vertauschen usw. Nachdem Sie das Flexbox-Layout verwendet haben, müssen Sie jedoch nicht darüber nachdenken. Der Browser erledigt dies für Sie. Für eine Einführung in Flexbox klicken Sie hier.
In diesem Spiel wird das Order-Attribut des Flexbox-Layouts verwendet. Das Order-Attribut kann verwendet werden, um die Reihenfolge der Flex-Elemente zu steuern.
Hier verwende ich neun Leinwandelemente, um das Bild in neun gleiche Teile zu unterteilen. Sie können auch andere Methoden verwenden, beispielsweise die Positionierung des Hintergrundbilds: 

<div class="wrap">
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
  <canvas></canvas>
</div>

Wenn es nicht auf ein Neun-Quadrat-Raster, sondern auch auf ein Sechzehn-Quadrat-Raster usw. beschränkt ist, können die oben genannten Elemente dynamisch generiert werden.
Im Folgenden finden Sie den Code zum Generieren von neun Bildern in gemischter Reihenfolge: 

var drawImage = function (url) {
  return new Promise(function (resolve, reject) {
    var img = new Image();
    img.onload = function () {
      resolve(img);
    };
    img.src = url;
  })
};

drawImage("2.jpg").then(function (img) {
  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var random = arr.sort(function() {return Math.random() > 0.5});
  [].forEach.call(document.querySelectorAll("canvas"), function (item, i) {
    item.width = $(".wrap").clientWidth / 3;
    item.height = $(".wrap").clientHeight / 3;
    item.style.order = random[i];
    var ctx = item.getContext("2d");
    ctx.drawImage(img, img.width * (i % 3) / 3, img.height * Math.floor(i / 3) / 3, img.width / 3, img.height / 3, 0, 0, item.width, item.height);
  });
});

Der obige Schlüsselcode lautet: 

item.style.order = random[i];

Durch das Mischen der Zahlen und die zufällige Zuweisung zu dem Bestellattribut jedes Canvas-Elements sortiert der Browser sie automatisch für Sie.
Ich werde nicht auf weitere Details zum Code eingehen. So tauschen Sie die Positionen zweier Bilder aus: 

var order1 = item.style.order;
var order2 = target.style.order;

Sie müssen lediglich die Auftragsattributwerte beider Parteien austauschen.

Vollständiger Code

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  <meta content="telephone=no" name="format-detection" />
  <title></title>
  <style>
    html, body {
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    .wrap {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    .wrap canvas {
      width: 33.3333%;
      height: 33.3333%;
      border: 1px solid red;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
<div class="wrap">
  <canvas data-value="1"></canvas>
  <canvas data-value="2"></canvas>
  <canvas data-value="3"></canvas>
  <canvas data-value="4"></canvas>
  <canvas data-value="5"></canvas>
  <canvas data-value="6"></canvas>
  <canvas data-value="7"></canvas>
  <canvas data-value="8"></canvas>
  <canvas data-value="9"></canvas>
</div>
<script>
  var $ = function (el) {
    return document.querySelector(el);
  };
  var touchMove, touchEnd;
  var drawImage = function (url) {
    return new Promise(function (resolve, reject) {
      var img = new Image();
      img.onload = function () {
        resolve(img);
      };
      img.src = url;
    })
  };
  drawImage("2.jpg").then(function (img) {
    var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    var random = arr.sort(function() {return Math.random() > 0.5});
    [].forEach.call(document.querySelectorAll("canvas"), function (item, i) {
      item.width = $(".wrap").clientWidth / 3;
      item.height = $(".wrap").clientHeight / 3;
      item.style.order = random[i];
      var ctx = item.getContext("2d");
      ctx.drawImage(img, img.width * (i % 3) / 3, img.height * Math.floor(i / 3) / 3, img.width / 3, img.height / 3, 0, 0, item.width, item.height);
    });
  });
  document.addEventListener("touchstart", function (e) {
    var target = e.target;
    if (e.target.tagName.toLowerCase() !== "canvas") {
      return;
    }
    var ctx = target.getContext("2d");
    var image = ctx.getImageData(0, 0, target.width, target.height);
    var obj = target.cloneNode(true);
    obj.getContext("2d").putImageData(image, 0, 0);
    var top = target.getBoundingClientRect().top, left = target.getBoundingClientRect().left;
    obj.style.cssText = "position: absolute; top: " + top + "px; left: " + left + "px";
    document.body.appendChild(obj);
    var point = {"x": e.touches[0].pageX, "y": e.touches[0].pageY};
    document.addEventListener("touchmove", touchMove = function (e) {
      obj.style.cssText = "position: absolute; top:" + (e.touches[0].pageY - point.y + top) + "px; left: " + (e.touches[0].pageX - point.x + left) + "px";
    });
    document.addEventListener("touchend", touchEnd = function (e) {
      var pos = {"x": e.changedTouches[0].pageX, "y": e.changedTouches[0].pageY};
      [].forEach.call(document.querySelectorAll(".wrap canvas"), function (item, i) {
        var offset = item.getBoundingClientRect();
        if (pos.x > offset.left && pos.x < (offset.left + item.width) && pos.y > offset.top && pos.y < (offset.top + item.height)) {
          var order1 = item.style.order;
          var order2 = target.style.order;
          if (obj.parentNode) {
            document.body.removeChild(obj);
          }
          item.style.order = order2;
          target.style.order = order1;
        }
      });
      document.removeEventListener("touchmove", touchMove);
      document.removeEventListener("touchend", touchEnd);
    })
  })
</script>
</body>
</html>

Wenn Sie testen, verwenden Sie zum Öffnen am besten den Google-Emulator oder ein Mobiltelefon, da nur mobile Touch-Ereignisse unterstützt werden.

Im Code sind nur die Grundfunktionen implementiert, die vollständigen Funktionen sind nicht implementiert.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Teilen Sie Ihr Minesweeper-Spiel, das mit JS_Javascript-Kenntnissen erstellt wurdeNächster Artikel：Teilen Sie Ihr Minesweeper-Spiel, das mit JS_Javascript-Kenntnissen erstellt wurde

In Verbindung stehende Artikel

Mehr sehen