Rumah > Artikel > hujung hadapan web > Javascript digabungkan dengan Flexbox untuk hanya melaksanakan kemahiran permainan_javascript teka-teki gelongsor

Javascript digabungkan dengan Flexbox untuk hanya melaksanakan kemahiran permainan_javascript teka-teki gelongsor

WBOYasal: 2016-05-16 15:15:031321semak imbas

Teka-teki gelongsor bermaksud membahagikan gambar kepada bahagian yang sama, merombak susunan (gambar di bawah), dan kemudian menggelongsorkannya bersama-sama untuk membentuk gambar yang lengkap.

Untuk melaksanakan teka-teki jigsaw, anda perlu mempertimbangkan cara mengocok pesanan secara rawak, cara menukar kedudukan dua gambar, dsb. Walau bagaimanapun, selepas menggunakan reka letak Flexbox, anda tidak perlu memikirkan perkara ini. Pelayar akan melakukannya untuk anda. Untuk pengenalan kepada Flexbox, klik di sini.
Apa yang digunakan dalam permainan ini ialah atribut susunan susun atur Flexbox Atribut pesanan boleh digunakan untuk mengawal susunan item Flex.
Di sini saya menggunakan sembilan elemen kanvas untuk membahagikan imej kepada sembilan bahagian yang sama. Anda juga boleh menggunakan kaedah lain, seperti kedudukan imej latar belakang:

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

Jika ia tidak terhad kepada grid sembilan persegi, tetapi juga grid enam belas persegi, dsb., elemen di atas boleh dijana secara dinamik.
Berikut ialah kod untuk menjana sembilan gambar dalam susunan kocok:

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);
  });
});

Kod kunci di atas ialah:

item.style.order = random[i];

Dengan merombak susunan nombor dan memberikannya secara rawak kepada atribut susunan setiap elemen kanvas, penyemak imbas akan mengisih nombor tersebut secara automatik untuk anda.
Saya tidak akan membincangkan butiran lain tentang kod ini. Begini cara menukar kedudukan dua gambar. Ini sangat mudah:

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

Anda hanya perlu menukar nilai atribut pesanan kedua-dua pihak.

Kod penuh

<!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>

Apabila anda menguji, sebaiknya gunakan emulator Google atau telefon mudah alih untuk membukanya, kerana hanya acara sentuhan mudah alih yang disokong.

Hanya fungsi asas dilaksanakan dalam kod, dan fungsi lengkap tidak dilaksanakan.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Kongsi permainan penyapu ranjau anda yang dibuat dengan kemahiran JS_javascriptArtikel seterusnya：Kongsi permainan penyapu ranjau anda yang dibuat dengan kemahiran JS_javascript

Artikel berkaitan

Lihat lagi