* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.game-container {
text-align: center;
}
.game-board {
display: flex;
justify-content: space-evenly;
margin-bottom: 20px;
margin-top: 20px;
}
.piece {
width: 50px;
height: 50px;
background-color: rgba(0, 128, 255, 0.7);
margin: 10px;
cursor: grab;
border-radius: 5px;
}
.piece#triangle1 {
background-color: red;
transform: rotate(45deg);
}
.piece#triangle2 {
background-color: blue;
transform: rotate(45deg);
}
.piece#square {
background-color: green;
}
.piece#parallelogram {
background-color: purple;
transform: skew(20deg);
}
.piece#triangle3 {
background-color: yellow;
transform: rotate(45deg);
}
.piece#triangle4 {
background-color: orange;
transform: rotate(45deg);
}
.piece#smallTriangle {
background-color: pink;
transform: rotate(45deg);
}
.drop-area {
width: 200px;
height: 200px;
border: 2px dashed #555;
margin-top: 20px;
position: relative;
}
// Select all draggable pieces and the target area
const pieces = document.querySelectorAll('.piece');
const targetArea = document.getElementById('targetArea');
// Drag and drop functionality
pieces.forEach(piece => {
piece.addEventListener('dragstart', dragStart);
piece.addEventListener('dragend', dragEnd);
});
targetArea.addEventListener('dragover', dragOver);
targetArea.addEventListener('dragenter', dragEnter);
targetArea.addEventListener('dragleave', dragLeave);
targetArea.addEventListener('drop', drop);
let draggedPiece = null;
// Handle drag start
function dragStart(e) {
draggedPiece = e.target;
setTimeout(() => {
e.target.style.opacity = '0.5';
}, 0);
}
// Handle drag end
function dragEnd(e) {
setTimeout(() => {
e.target.style.opacity = '1';
}, 0);
draggedPiece = null;
}
// Handle drag over
function dragOver(e) {
e.preventDefault();
}
// Handle drag enter
function dragEnter(e) {
e.preventDefault();
targetArea.style.backgroundColor = '#ddd';
}
// Handle drag leave
function dragLeave() {
targetArea.style.backgroundColor = '';
}
// Handle drop
function drop(e) {
e.preventDefault();
targetArea.style.backgroundColor = '';
if (draggedPiece) {
draggedPiece.style.position = 'absolute';
draggedPiece.style.left = `${e.clientX - targetArea.offsetLeft - 25}px`;
draggedPiece.style.top = `${e.clientY - targetArea.offsetTop - 25}px`;
targetArea.appendChild(draggedPiece);
}
}