国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

自定義上傳圖片拼圖游戲

hsluoyz / 3454人閱讀

摘要:點擊格子,首先比較該格子是否與空白格子直接相鄰,如果是就交換格子的和值進行換位獲取空白的格子對象值互換接下來是把上傳的圖片設置成格子背景,通過監(jiān)聽的事件來獲取圖片文件該方法將轉換成可訪問的本地路徑重新設置格子背景源碼地址點擊訪問完

1. 游戲訪問連接

點擊跳轉

2. 九宮格拼圖原理

圖例原理:

上圖的九宮格圖例,每個格子都有一個(x,y)的坐標,假如格子9是空白格子,怎么知道6和8是它的直接相鄰格子呢。這時候就體現出格子坐標(x,y)的作用了, 使用公式:|(x6 - x9)| + |(y6 - y9)| = 1,將空白格子9的坐標與格子6的坐標進行對應坐標的差值的絕對值的和等于1,就證明它們是直接相鄰格子,可進行移動互換。

詳細原理請點擊:跳轉

3. 實現過程,代碼分析

flex實現九宮格布局:


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

2 . 現在的布局是這樣子的:

3 . 分析:每個li代表一個格子,自定義屬性data-x和data-y代表坐標(x, y);而樣式order用于對格子進行移動排序;格子9添加id="empty"用于標識為空白格子。
4 . 因為格子的寬度是通過百分比設置的,會根據不同屏幕寬度的變化而變化;而且我們需要正方形的小格子,所以格子的高度需要js動態(tài)計算:

// 設置格子的高度、背景圖片的尺寸
setChildStyle() {
  this.childWidth = window.getComputedStyle(this.oChild[0], false).width; // 獲取格子寬度
  console.log(this.childWidth);
  for (let i = 0; i < this.oChild.length; i++) {
    this.oChild[i].style.height = `${this.childWidth}`;
  }
}

5 . 現在變成


6 . 現在給每個格子設置背景圖片的尺寸(background-size),將格子的background-size的寬度設置成格子父節(jié)點ul的寬度,高度為auto,然后通過backgound-position進行定位,用格子的背景拼湊成一張完整的圖片

setChildStyle() {
  this.childWidth = window.getComputedStyle(this.oChild[0], false).width;
  console.log(this.childWidth);
  for (let i = 0; i < this.oChild.length; i++) {
     this.oChild[i].style.height = `${this.childWidth}`;
     this.oChild[i].style.backgroundSize = `${this.ulWidth} auto`;
     this.setBgpositon(this.oChild[i]);
  }
}

7 . 其實每個格子的背景圖片都是同一張,只不過是通過background-position 對背景圖片進行定位,讓每個格子只顯示圖片背景的九分之一,

// 設置背景圖在格子的位置
setBgpositon(chiObj) {
  let x = chiObj.getAttribute("data-x") - 1;
  let y = chiObj.getAttribute("data-y") - 1;
  chiObj.style.backgroundPosition = `${-x*parseInt(this.childWidth)}px ${-y*parseInt(this.childWidth)}px`;
}

如下圖視:

8 . 設置默認背景圖片后:

// 設置格子的背景圖片
setBgImg(imgUrl) {
  for (let i = 0; i < this.oChild.length - 1; i++) {
    this.oChild[i].style.backgroundImage = `url(${imgUrl})`;
  }
}

9 . 接下來把格子擼成可移動的,與空白格子直接相鄰的格子都可以與空白格子換位,一開始的order樣式就起作用了。點擊格子,首先比較該格子是否與空白格子直接相鄰,如果是就交換格子的data-x、data-y和order值進行換位:

childEvent() {
  let that = this;
  let oEmptyChild = document.getElementById("empty"); // 獲取空白的格子對象
  this.oUl[0].addEventListener("click", function(ev){
    let target = ev.target;
    let targetX, targetY, targetOrder;
    let iEmptyX, iEmptyY, iEmptyOrder;
    if (target.className != "child" ) return false;
    iEmptyX = oEmptyChild.getAttribute("data-x");
    iEmptyY = oEmptyChild.getAttribute("data-y");
    iEmptyOrder = window.getComputedStyle(oEmptyChild, false).order;
    targetX = target.getAttribute("data-x");
    targetY = target.getAttribute("data-y");
    targetOrder = window.getComputedStyle(target, false).order;
    if (Math.abs(targetX - iEmptyX) + Math.abs(targetY - iEmptyY) == 1) {
      // data-x data-y order 值互換
      [iEmptyX, targetX] = [targetX, iEmptyX];
      [iEmptyY, targetY] = [targetY, iEmptyY];
      [iEmptyOrder, targetOrder] = [targetOrder, iEmptyOrder];

      oEmptyChild.setAttribute("data-x", iEmptyX);
      oEmptyChild.setAttribute("data-y", iEmptyY);
      oEmptyChild.style.order = iEmptyOrder;
      target.setAttribute("data-x", targetX);
      target.setAttribute("data-y", targetY);
      target.style.order = targetOrder;
    }
  }, false);
}

10 . 接下來是把上傳的img圖片設置成格子背景,通過監(jiān)聽input type="file"的change事件來獲取圖片文件files:

imgEvent() {
  let that = this;
  this.oFile.addEventListener("change", function(){
    let imgUrl = window.URL.createObjectURL(this.files[0]); // 該方法將files轉換成img可訪問的本地路徑
    that.oImg.setAttribute("src", imgUrl);
    that.oImg.onload = function() {
      that.setBgImg(imgUrl); // 重新設置格子背景
    }
  }, false);
}

11 . 源碼地址 點擊訪問

12 . (完)

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114256.html

相關文章

  • 定義上傳圖片拼圖游戲

    摘要:點擊格子,首先比較該格子是否與空白格子直接相鄰,如果是就交換格子的和值進行換位獲取空白的格子對象值互換接下來是把上傳的圖片設置成格子背景,通過監(jiān)聽的事件來獲取圖片文件該方法將轉換成可訪問的本地路徑重新設置格子背景源碼地址點擊訪問完 1. 游戲訪問連接 點擊跳轉 2. 九宮格拼圖原理 圖例原理: showImg(https://segmentfault.com/img/remote/14...

    Baoyuan 評論0 收藏0
  • HTML 簡單拼圖游戲

    摘要:基本需求有一個固定區(qū)域,被拆分成個同等大小的碎片,拿走其中一塊,靠近缺口的塊可以向缺口方向移動當拼出原來的圖樣視為完成。左右移動很簡單,序號大的序號小的即可。 先不廢話,請看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞這么個微信活動...

    vslam 評論0 收藏0
  • HTML 簡單拼圖游戲

    摘要:基本需求有一個固定區(qū)域,被拆分成個同等大小的碎片,拿走其中一塊,靠近缺口的塊可以向缺口方向移動當拼出原來的圖樣視為完成。左右移動很簡單,序號大的序號小的即可。 先不廢話,請看演示。 showImg(https://segmentfault.com/img/bVyoj2);showImg(https://segmentfault.com/img/bVyoj5); 公司要搞這么個微信活動...

    eechen 評論0 收藏0

發(fā)表評論

0條評論

hsluoyz

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<