英文:
Puzzle using CSS and Javascript
问题
我试图使用CSS和JavaScript创建一个2行3列的拼图。想法是拼图的碎片都是不同形状的黑色。用户必须将碎片拖动到棋盘上以完成拼图。我写了一个创建棋盘和碎片的JavaScript代码。它们也可以拖动，但无法继续下去。需要帮助将碎片的形状从正方形更改为其他形状。
var rows = 5;
var columns = 5;
var currTile;
var otherTile;
var turns = 0;
window.onload = function() {
// 初始化5x5的棋盘
for (let r = 0; r < rows; r++) {
for (let c = 0; c < columns; c++) {
let tile = document.createElement("img");
tile.src = "blank.png";
// 拖动功能
tile.addEventListener("dragstart", dragStart);
tile.addEventListener("dragover", dragOver);
tile.addEventListener("dragenter", dragEnter);
tile.addEventListener("dragleave", dragLeave);
tile.addEventListener("drop", dragDrop);
tile.addEventListener("dragend", dragEnd);
document.getElementById("board").append(tile);
}
}
// 创建碎片
let pieces = [];
for (let i = 1; i <= rows * columns; i++) {
pieces.push(i.toString());
}
pieces.reverse();
for (let i = 0; i < pieces.length; i++) {
let j = Math.floor(Math.random() * pieces.length);
// 交换位置
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";
// 拖动功能
tile.addEventListener("dragstart", dragStart);
tile.addEventListener("dragover", dragOver);
tile.addEventListener("dragenter", dragEnter);
tile.addEventListener("dragleave", dragLeave);
tile.addEventListener("drop", dragDrop);
tile.addEventListener("dragend", dragEnd);
document.getElementById("pieces").append(tile);
}
}
// 拖动碎片
function dragStart() {
currTile = this;
}
function dragOver(e) {
e.preventDefault();
}
function dragEnter(e) {
e.preventDefault();
}
function dragLeave() {
}
function dragDrop() {
otherTile = this;
}
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>
英文:
Im trying to create a 2 rows 3 columns puzzle using CSS and JavaScript. The idea is that the pieces of the puzzle will be all black cut in different shapes. The users has to drag the pieces to board to complete it.I wrote a javascript that creates the board and pieces. Made them draggable too but unable to proceed from here. Need help in changing the shape of pieces from square to other shapes.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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;
}
<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<body>
<br>
<div id="board"></div>
<div id="pieces">
</div>
</body>
<!-- end snippet -->
答案1
得分: 1
现在，您可以将事件监听器添加到拼图上，以处理dragover事件并使用preventDefault()方法允许拖放发生。
然后，在事件处理程序中，您可以使用以下代码检索被拖放的拼图块的ID，使用datatransfer对象的getdata()方法：
boardElement.addEventListener("drop", e => {
// 获取被拖放的拼图块的ID
const id = e.dataTransfer.getData("text/plain");
// 查找拼图块
const piece = puzzlePieces.find(piece => piece.id === id);
// 更新拼图块的颜色
piece.color = "black";
// 渲染拼图板
render();
});
然后，您可以在boardelemennt的drag-over类中添加事件dragenter，并添加dragleave以释放拖动。
英文:
now, you can add event lister to the puzzle to handle dragover event with preventDefault() method to allow the drop to occur.
Then, in the event handler, you can retrieve the ID of the puzzle piece being dropped using getdata() method of the datatransfer object with following code:
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();
});
Then, you can add event dragenter in drag-over class in boardelemennt and dragleave to release the drag.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论