Javascript와 Flexbox를 결합하여 슬라이딩 퍼즐을 간단하게 구현 가능 game

집

웹 프론트엔드

JS 튜토리얼

Javascript와 Flexbox를 결합하여 슬라이딩 퍼즐을 간단하게 구현 가능 game_javascript 기술

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:15 PM

flexbox

슬라이딩 퍼즐은 그림을 동일한 부분으로 나누고 순서를 섞은 다음(아래 그림) 서로 밀어서 완전한 그림을 이루는 것을 의미합니다.

직소 퍼즐을 구현하려면 순서를 무작위로 섞는 방법, 두 그림의 위치를 바꾸는 방법 등을 고려해야 합니다. 그러나 Flexbox 레이아웃을 사용한 후에는 이에 대해 생각할 필요가 없습니다. Flexbox는 매우 강력합니다. Flexbox에 대한 소개를 보려면 여기를 클릭하세요.
이 게임에서 사용되는 것은 Flexbox 레이아웃의 order 속성입니다. order 속성을 사용하여 Flex 항목의 순서를 제어할 수 있습니다.
여기서는 9개의 캔버스 요소를 사용하여 이미지를 9개의 동일한 부분으로 나눕니다. 배경 이미지 위치 지정과 같은 다른 방법을 사용할 수도 있습니다.

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

로그인 후 복사

9제곱 그리드에 국한되지 않고 16제곱 그리드 등으로 제한되지 않으면 위 요소를 동적으로 생성할 수 있습니다.
다음은 섞인 순서로 9개의 사진을 생성하는 코드입니다.

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];

로그인 후 복사

숫자의 순서를 섞고 각 캔버스 요소의 순서 속성에 무작위로 할당하면 브라우저가 자동으로 정렬합니다.
두 사진의 위치를 바꾸는 방법은 다음과 같습니다.

var order1 = item.style.order;
var order2 = target.style.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 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7403

자바 튜토리얼

1630

Cakephp 튜토리얼

1358

라라벨 튜토리얼

1268

PHP 튜토리얼

1218

Related knowledge

H5의 위치 속성의 유연한 적용 기술 Dec 27, 2023 pm 01:05 PM

H5에서 위치 속성을 유연하게 사용하는 방법 H5 개발에서는 요소의 위치 지정 및 레이아웃이 관련되는 경우가 많습니다. 이때 CSS 위치 속성이 작동하게 됩니다. 위치 속성은 상대 위치 지정, 절대 위치 지정, 고정 위치 지정 및 고정 위치 지정을 포함하여 페이지에서 요소의 위치 지정을 제어할 수 있습니다. 이번 글에서는 H5 개발에서 position 속성을 유연하게 활용하는 방법을 자세히 소개하겠습니다.

CSS 레이아웃 속성 최적화 팁: 고정 및 Flexbox 위치 지정 Oct 20, 2023 pm 03:15 PM

CSS 레이아웃 속성 최적화 팁: positionsticky 및 flexbox 웹 개발에서 레이아웃은 매우 중요한 측면입니다. 좋은 레이아웃 구조는 사용자 경험을 향상시키고 페이지를 더욱 아름답고 탐색하기 쉽게 만들 수 있습니다. CSS 레이아웃 속성은 이 목표를 달성하는 데 핵심입니다. 이 기사에서는 일반적으로 사용되는 두 가지 CSS 레이아웃 속성 최적화 기술인 positionsticky와 flexbox를 소개하고 구체적인 코드 예제를 제공합니다. 1. 직위

HTML 튜토리얼: 적응형 동일 높이, 동일 너비, 동일 간격 레이아웃을 위해 Flexbox를 사용하는 방법 Oct 27, 2023 pm 05:51 PM

HTML 튜토리얼: 적응형 동일 높이, 동일 너비, 동일 간격 레이아웃을 위해 Flexbox를 사용하는 방법, 특정 코드 예제가 필요합니다. 소개: 최신 웹 디자인에서 레이아웃은 매우 중요한 요소입니다. 많은 양의 콘텐츠를 표시해야 하는 페이지의 경우, 가시성과 사용 편의성을 높이기 위해 요소의 위치와 크기를 어떻게 합리적으로 배치하는가가 중요한 문제입니다. Flexbox(Flexible Box Layout)는 다양한 유연한 레이아웃 요구 사항을 쉽게 실현할 수 있는 매우 강력한 도구입니다. 이 기사에서는 Flexbox를 자세히 소개합니다.

HTML 튜토리얼: 수직 동일 높이 레이아웃에 Flexbox를 사용하는 방법 Oct 16, 2023 am 09:12 AM

HTML 튜토리얼: 수직 높이 레이아웃에 Flexbox를 사용하는 방법 웹 개발에서 레이아웃은 항상 중요한 문제였습니다. 특히 수직 동일 높이 레이아웃을 구현해야 하는 경우 기존 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 기술을 사용하여 웹 콘텐츠를 균등하게 배포하는 방법을 소개하고 몇 가지 실제 사례를 제공합니다. 1. Flexbox 기술이란 무엇입니까? Flexbox(탄력적 레이아웃)는 CSS3에 추가된 새로운 기능입니다.

HTML 튜토리얼: 고르게 분산된 레이아웃을 위해 Flexbox를 사용하는 방법 Oct 16, 2023 am 09:31 AM

HTML 튜토리얼: 고르게 분산된 레이아웃을 위해 Flexbox를 사용하는 방법 소개: 웹 디자인에서는 요소를 레이아웃하는 것이 필요한 경우가 많습니다. 기존 레이아웃 방법에는 몇 가지 제한 사항이 있으며 Flexbox(유연한 상자 레이아웃)는 더 많은 유연성과 성능을 제공할 수 있는 레이아웃 방법입니다. 이 기사에서는 Flexbox를 사용하여 균일한 배포 레이아웃을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. Flexbox 소개 Flexbox는 CSS3에 도입된 유연한 상자 레이아웃 모델로, 요소를 다음과 같이 허용합니다.

HTML 튜토리얼: 확장 가능하고 동일 높이, 동일 너비, 동일 간격 적응형 레이아웃을 위해 Flexbox를 사용하는 방법 Oct 19, 2023 am 10:22 AM

HTML 튜토리얼: 확장 가능, 동일 높이, 동일 너비, 동일 간격 적응형 레이아웃을 위해 Flexbox를 사용하는 방법 특정 코드 예제가 필요합니다. 1. Flexbox 레이아웃은 유연성을 구현할 수 있는 CSS3에 도입된 새로운 레이아웃 모드입니다. 박스 모델 레이아웃. 유연한 레이아웃을 의미하는 FlexBox의 약어입니다. Flexbox 레이아웃은 컨테이너의 크기에 따라 요소의 위치와 크기를 자동으로 조정하여 다양하고 유연한 배치를 구현할 수 있습니다. 2. Flexbox 레이아웃을 사용하여 생성하는 방법

See all articles

Javascript와 Flexbox를 결합하여 슬라이딩 퍼즐을 간단하게 구현 가능 game_javascript 기술

핫 AI 도구

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

인기 기사

뜨거운 도구

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제