javascript結合Flexbox簡單實作滑動拼圖遊戲_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

javascript結合Flexbox簡單實作滑動拼圖遊戲_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:15 PM

flexbox

滑動拼圖就是把一張圖片分成幾等份，打亂順序（下圖），然後透過滑動拼湊成一張完整的圖片。

要實現一個拼圖遊戲，需要考慮怎樣隨機的打亂順序，怎麼交換兩張圖片的位置，等等。但是，使用了Flexbox佈局以後，這都不需要你去考慮，瀏覽器會幫你做，Flexbox就是這麼的強大。關於Flexbox的介紹可以點這裡。
這個遊戲要用的是Flexbox佈局的order屬性，order屬性可以用來控制Flex項目的順序。
這裡我用九個canvas元素來把圖片分成九等分，也可以用其他方法，例如背景圖片定位：

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

登入後複製

如果不只限於九宮格，還要十六宮格等，上面的元素完全可以動態生成。
以下是產生打亂順序的九張圖碼：

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

登入後複製

上面的關鍵程式碼是：

item.style.order = random[i];

登入後複製

透過將數字打亂順序，隨機賦值給每個canvas元素的order屬性，這樣瀏覽器就自動幫你排序了。
關於程式碼的其他細節就不講了，這裡說一下怎樣交換兩張圖片的位置，真是出乎意料的簡單：

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

登入後複製

只需要交換雙方的order屬性值就可以了。

完整程式碼

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

登入後複製

大家做測試的時候，最好用谷歌模擬器或手機打開，因為只支援行動端觸控事件。

程式碼中只實現了基本功能，並沒有實現完整功能。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

AI Hentai Generator

免費產生 AI 無盡。

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7431

CakePHP 教程

1359

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

H5中position屬性的靈活運用技巧 Dec 27, 2023 pm 01:05 PM

H5中如何靈活運用position屬性在H5開發中，常會涉及到元素的定位和佈局問題。這時候，CSS的position屬性就會發揮作用。 position屬性可以控制元素在頁面中的定位方式，包括相對定位（relative）、絕對定位（absolute）、固定定位（fixed）和黏附定位（sticky）。本文將詳細介紹在H5開發中如何靈活運用position屬性

CSS 佈局屬性最佳化技巧：position sticky 和 flexbox Oct 20, 2023 pm 03:15 PM

CSS版面配置屬性最佳化技巧：positionsticky和flexbox在網頁開發中，版面是一個非常重要的面向。良好的佈局結構可以提高使用者體驗，使頁面更加美觀和易於導航。而CSS佈局屬性則是達成此目標的關鍵。在本文中，我將介紹兩種常用的CSS佈局屬性最佳化技巧：positionsticky和flexbox，並提供特定的程式碼範例。一、positions

HTML教學：如何使用Flexbox進行自適應等高等寬等間距佈局 Oct 27, 2023 pm 05:51 PM

HTML教學：如何使用Flexbox進行自適應等高等寬等間距佈局，需要具體程式碼範例引言：在現代網頁設計中，佈局是一個非常關鍵的因素。對於需要展示大量內容的頁面來說，如何合理地安排元素的位置和大小，以實現良好的可視性和易用性，是一個重要的問題。 Flexbox（彈性盒佈局）就是一個非常強大的工具，透過它可以輕鬆實現各種靈活的佈局需求。本文將詳細介紹Flexbox

HTML教學：如何使用Flexbox進行垂直等高佈局 Oct 16, 2023 am 09:12 AM

HTML教學：如何使用Flexbox進行垂直等高佈局在Web開發中，佈局一直是個重要的問題。特別是在需要實現垂直等高佈局時，傳統的CSS佈局方法往往會遇到一些困難。而使用Flexbox佈局可以輕鬆解決這個問題。本教學將詳細介紹如何使用Flexbox進行垂直等高佈局，並提供具體的程式碼範例。 Flexbox是CSS3中的新特性，可用於建立靈活的、響應式的佈局。

HTML教學：如何使用Flexbox進行自適應等高佈局 Oct 21, 2023 am 10:00 AM

HTML教學：如何使用Flexbox進行自適應等高佈局，需要具體程式碼範例引言：在網頁設計與開發中，實現自適應等高佈局是一項常見的需求。傳統的CSS佈局方法往往在處理等高佈局時面臨一些困難，而Flexbox佈局則為我們提供了一個簡單且強大的解決方案。本文將介紹Flexbox佈局的基本概念和常見用法，並給出具體的程式碼範例，幫助讀者快速掌握使用Flexbox實現自

如何使用CSS3的flexbox技術，實現網頁內容的平均分配？ Sep 11, 2023 am 11:33 AM

如何使用CSS3的flexbox技術，實現網頁內容的平均分配？隨著網頁設計的發展，人們對於網頁版面的要求也越來越高。為了實現網頁內容的平均分配，CSS3的flexbox技術成為了一個非常有效的解決方案。本文將介紹如何使用flexbox技術來實現網頁內容的平均分配，並給出一些實用的範例。一、什麼是flexbox技術flexbox（彈性佈局）是CSS3新增加的一

HTML教學：如何使用Flexbox進行平均分配佈局 Oct 16, 2023 am 09:31 AM

HTML教學：如何使用Flexbox進行平均分配版面配置引言：在網頁設計中，經常需要對元素進行佈局。傳統的佈局方法存在一些局限性，而Flexbox（彈性盒子佈局）是一種能夠提供更靈活、更強大的佈局方式。本文將介紹如何使用Flexbox來實現平均分配佈局，同時給出具體的程式碼範例。一、Flexbox簡介Flexbox是CSS3中引入的一種彈性盒子佈局模型，它可以讓元

HTML教學：如何使用Flexbox進行可伸縮等高等寬等間距自適應佈局 Oct 19, 2023 am 10:22 AM

HTML教學：如何使用Flexbox進行可伸縮等高等寬等間距自適應佈局，需要具體程式碼範例一、什麼是Flexbox佈局Flexbox是CSS3中引入的一種新佈局模式，可以實現靈活的盒子模型佈局。它是FlexibleBox的縮寫，意為彈性佈局。 Flexbox佈局可以根據容器的大小自動調整元素的位置和尺寸，實現各種靈活的排列方式。二、如何使用Flexbox佈局創

See all articles

javascript結合Flexbox簡單實作滑動拼圖遊戲_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題