使用CSS和Javascript的谜题

我试图使用CSS和JavaScript创建一个2行3列的难题。这个想法是，拼图的碎片将在不同的形状所有黑色削减。用户必须拖动到董事会来完成它。我写了一个javascript，创建董事会和块。使他们也可拖动，但无法从这里继续。需要帮助改变块的形状从方形到其他形状。

var rows = 5;
var columns = 5;

var currTile;
var otherTile;

var turns = 0;

window.onload = function() {
  //initialize the 5x5 board
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < columns; c++) {
      //<img>
      let tile = document.createElement("img");
      tile.src = "blank.png";

      //DRAG FUNCTIONALITY
      tile.addEventListener("dragstart", dragStart); //click on image to drag
      tile.addEventListener("dragover", dragOver); //drag an image
      tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
      tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
      tile.addEventListener("drop", dragDrop); //drop an image onto another one
      tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

      document.getElementById("board").append(tile);
    }
  }

  //pieces
  let pieces = [];
  for (let i = 1; i <= rows * columns; i++) {
    pieces.push(i.toString()); //put "1" to "25" into the array (puzzle images names)
  }
  pieces.reverse();
  for (let i = 0; i < pieces.length; i++) {
    let j = Math.floor(Math.random() * pieces.length);

    //swap
    let tmp = pieces[i];
    pieces[i] = pieces[j];
    pieces[j] = tmp;
  }

  for (let i = 0; i < pieces.length; i++) {
    let tile = document.createElement("img");
    tile.src = "blank2.png";

    //DRAG FUNCTIONALITY
    tile.addEventListener("dragstart", dragStart); //click on image to drag
    tile.addEventListener("dragover", dragOver); //drag an image
    tile.addEventListener("dragenter", dragEnter); //dragging an image into another one
    tile.addEventListener("dragleave", dragLeave); //dragging an image away from another one
    tile.addEventListener("drop", dragDrop); //drop an image onto another one
    tile.addEventListener("dragend", dragEnd); //after you completed dragDrop

    document.getElementById("pieces").append(tile);
  }
}

//DRAG TILES
function dragStart() {
  currTile = this; //this refers to image that was clicked on for dragging
}

function dragOver(e) {
  e.preventDefault();
}

function dragEnter(e) {
  e.preventDefault();
}

function dragLeave() {

}

function dragDrop() {
  otherTile = this; //this refers to image that is being dropped on
}

function dragEnd() {
  if (currTile.src.includes("blank")) {
    return;
  }
  let currImg = currTile.src;
  let otherImg = otherTile.src;
  currTile.src = otherImg;
  otherTile.src = currImg;

  turns += 1;
  document.getElementById("turns").innerText = turns;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

#board {
  width: 400px;
  height: 400px;
  border: 2px solid purple;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#board img {
  width: 79px;
  height: 79px;
  border: 0.5px solid lightblue;
}

#pieces {
  width: 1040px;
  height: 160px;
  border: 2px solid purple;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

#pieces img {
  width: 79px;
  height: 79px;
  border: 0.5px solid lightblue;
}

<body>
  <br>
  <div id="board"></div>
  <div id="pieces">
  </div>
</body>

现在，您可以将事件列表器添加到puzzle中，以使用preventDefault()方法处理dragover事件，从而允许放置。然后，在事件处理程序中，您可以使用datatransfer对象的g etdata()方法检索要放置的拼图块的ID，代码如下：

boardElement.addEventListener("drop", e => {
  // Get the ID of the puzzle piece being dropped
  const id = e.dataTransfer.getData("text/plain");
  // Find the puzzle piece
  const piece = puzzlePieces.find(piece => piece.id === id);
  // Update the color of the puzzle piece
  piece.color = "black";
  // Render the puzzle board
  render();
});

然后，您可以在boardelemennt和dragleave中的drag-over类中添加事件dragenter以释放拖动。

使用CSS和Javascript的谜题

1条答案

相关问题

热门标签

最新问答