JS Puzzle - 初始化图像和游戏启动功能问题

Question

我目前正在开展一个小项目，但我仍然坚持使用一些代码，我刚刚尝试了不同的方法，并且我不会像我喜欢的那样平移是。

基本上，我已经制作了拼图的UI（12平方网格），并通过CSS设置了这些拼贴的属性。我打算让这个游戏成为一个滑动益智游戏，这意味着一个瓷砖是空白的，并且在点击时应该与其他瓷砖交换，游戏的目的是使图像整体化。我即将编写Javascript以使其全部工作，我已经为行/列创建了一个变量数组，并创建了一个链接标记（一个href）来通过一个函数启动游戏并包括onclick每个瓷砖上的事件。我需要为用户制作JS代码以赢得游戏，因为瓷砖的顺序正确，但我对此有一些想法。

我只是在最简单的方法上努力做到这一点并让图像随机显示并分散在每个图块上。我试着加入数学。在早期的这个版本中运行，但这对我来说不起作用（可能是因为我做错了）。

任何帮助都将不胜感激，如果您需要更多相关信息，请不要犹豫。

Pastebin：https://pastebin.com/ryfR1Cqk（更新后的链接）

 <script type="javascript/text">
    var gamearray = column = row = board = ['1','2','3','4','5','6','7','8','9','10','11',''];

Answer 1

请尝试使用以下示例

＆＃13;

＆＃13;

// https://www.sitepoint.com/image-manipulation-with-html5-canvas-a-sliding-puzzle-2/

init();

// random values in boxes; insert values and add classnames
function init() {
  var puzzleValues = [1, 2, 3, 4, 5, 6, 7, 8,  ""],
      $puzzleBox = $(".puzzle");
  $puzzleBox.html("");
  for (let i=0; i<9; i++) {
    var $newDiv = $("<div>");
    let numb = random(puzzleValues);
    $newDiv.html(numb);
    $newDiv.addClass("items item"+numb);
    $puzzleBox.append($newDiv);
  }
  $(".item").css("background-image", "none");
  $puzzleItems = $(".items");
  move();
}

// on every move, check if the game is won
function check() {
  let checkArr = [];
  for (let i=0; i<9; i++) {
    if ($(".items").eq(i).hasClass("item"+(i+1))) {
      checkArr.push(i+1);
    //  console.log(checkArr);
    }
  }
  if (checkArr.length === 8) {
    $(".item").css("background-image", "url(https://res.cloudinary.com/beumsk/image/upload/v1513108563/tiger_veeob8.jpg)");
    setTimeout(function() {
      alert("You won !");
      init();
    }, 200);
  }
}

// takes random element af an array and deletes it
function random(arr) {
  let rand = Math.floor(Math.random() * arr.length);
  let toReturn = arr[rand];
  arr.splice(rand, 1);
  return toReturn; 
}

// change 2 elts positions in DOM
function swapElts(elt1, elt2) {
  var $temp = $("<div>");
  elt1.before($temp);
  elt2.before(elt1);
  $temp.before(elt2);
  $temp.remove;
}

// on click, move this box to the 'empty' box
function move() {
  $(".items").on("click", function(e) {
    // item 0
    if ($(this).is($(".items").eq(0))) {
      if      ($(".items").eq(1).hasClass("item")) swapElts($(this), $(".items").eq(1));
      else if ($(".items").eq(3).hasClass("item")) swapElts($(this), $(".items").eq(3));
    }
    // item 1
    else if ($(this).is($(".items").eq(1))) {
      if      ($(".items").eq(0).hasClass("item")) swapElts($(this), $(".items").eq(0));
      else if ($(".items").eq(2).hasClass("item")) swapElts($(this), $(".items").eq(2));
      else if ($(".items").eq(4).hasClass("item")) swapElts($(this), $(".items").eq(4));
    }
    // item 2
    else if ($(this).is($(".items").eq(2))) {
      if      ($(".items").eq(1).hasClass("item")) swapElts($(this), $(".items").eq(1));
      else if ($(".items").eq(5).hasClass("item")) swapElts($(this), $(".items").eq(5));
    }
    // item 3
    else if ($(this).is($(".items").eq(3))) {
      if      ($(".items").eq(0).hasClass("item")) swapElts($(this), $(".items").eq(0));
      else if ($(".items").eq(4).hasClass("item")) swapElts($(this), $(".items").eq(4));
      else if ($(".items").eq(6).hasClass("item")) swapElts($(this), $(".items").eq(6));
    }
    // item 4
    else if ($(this).is($(".items").eq(4))) {
      if      ($(".items").eq(1).hasClass("item")) swapElts($(this), $(".items").eq(1));
      else if ($(".items").eq(3).hasClass("item")) swapElts($(this), $(".items").eq(3));
      else if ($(".items").eq(5).hasClass("item")) swapElts($(this), $(".items").eq(5));
      else if ($(".items").eq(7).hasClass("item")) swapElts($(this), $(".items").eq(7));
    }
    // item 5
    else if ($(this).is($(".items").eq(5))) {
      if      ($(".items").eq(2).hasClass("item")) swapElts($(this), $(".items").eq(2));
      else if ($(".items").eq(4).hasClass("item")) swapElts($(this), $(".items").eq(4));
      else if ($(".items").eq(8).hasClass("item")) swapElts($(this), $(".items").eq(8));
    }
    // item 6
    else if ($(this).is($(".items").eq(6))) {
      if      ($(".items").eq(3).hasClass("item")) swapElts($(this), $(".items").eq(3));
      else if ($(".items").eq(7).hasClass("item")) swapElts($(this), $(".items").eq(7));
    }
    // item 7
    else if ($(this).is($(".items").eq(7))) {
      if      ($(".items").eq(4).hasClass("item")) swapElts($(this), $(".items").eq(4));
      else if ($(".items").eq(6).hasClass("item")) swapElts($(this), $(".items").eq(6));
      else if ($(".items").eq(8).hasClass("item")) swapElts($(this), $(".items").eq(8));
    }
    // item 8
    else if ($(this).is($(".items").eq(8))) {
      if      ($(".items").eq(5).hasClass("item")) swapElts($(this), $(".items").eq(5));
      else if ($(".items").eq(7).hasClass("item")) swapElts($(this), $(".items").eq(7));
    }
    // perform the check
    check();
  });
}

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100vw;
  min-height: 100vh;
  font-family: Arial;
  background: linear-gradient(to bottom right, #e53935, #5e35b1);
  text-align: center;
}

header {
  padding: 10px;
  letter-spacing: 2px;
  color: white;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
}

.puzzle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 302px;
  min-height: 302px;
  box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.3);
  border: solid 1px white;
  margin: auto;
}
.puzzle .items {
  display: inline;
  float: left;
  line-height: 100px;
  text-align: center;
  width: 100px;
  height: 100px;
  border: solid 1px white;
  cursor: pointer;
  color: rgba(0, 0, 0, 0);
  background: url(https://res.cloudinary.com/beumsk/image/upload/v1513108563/tiger_veeob8.jpg);
  background-size: 300%;
}
.puzzle .item1 {
  background-position: top left;
}
.puzzle .item2 {
  background-position: top;
}
.puzzle .item3 {
  background-position: top right;
}
.puzzle .item4 {
  background-position: center left;
}
.puzzle .item5 {
  background-position: center;
}
.puzzle .item6 {
  background-position: center right;
}
.puzzle .item7 {
  background-position: bottom left;
}
.puzzle .item8 {
  background-position: bottom;
}
.puzzle .item {
  background-position: bottom right;
}

footer {
  padding: 5px;
  font-size: 14px;
  color: white;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.9);
}
footer a {
  text-decoration: none;
  color: #ffe082;
}
footer a:hover {
  text-decoration: underline;
  color: white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<section class="puzzle"></section>

＆＃13;

＆＃13;

＆＃13;