我试图使用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>现在，您可以将事件列表添加到谜题中，以preventDefault()方法处理dragover事件，以允许掉落发生。然后，在事件处理程序中，您可以使用datatransfer对象的getdata()方法检索被丢弃的拼图块的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来释放拖拽。