work place dragged blocks position each next

pull/2/head
dev sp 2024-01-20 12:30:14 +00:00
parent 287d2469e6
commit ab3be22771
4 changed files with 52 additions and 61 deletions

View File

@ -112,12 +112,12 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
}
} else {
element.classList.remove('greenBorder', 'redBorder');
element.classList.remove('redBorder', 'greenBorder');
}
}
let url = window.location.href;

View File

@ -137,12 +137,12 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
}
} else {
element.classList.remove('redBorder', 'greenBorder');
element.classList.remove('greenBorder', 'redBorder');
}
}

View File

@ -100,12 +100,12 @@ import Layout from "../../layouts/Layout.astro";
if (checkbox.checked) {
if (gameData[id.replace('image', 'a')] === true) {
element.classList.add('redBorder');
} else {
element.classList.add('greenBorder');
} else {
element.classList.add('redBorder');
}
} else {
element.classList.remove('redBorder', 'greenBorder');
element.classList.remove('greenBorder', 'redBorder');
}
}
let url = window.location.href;

View File

@ -266,26 +266,6 @@ import Layout from '../../layouts/Layout.astro';
}
create() {
// const borderGraphics = this.add.graphics();
// const borderThickness = 6;
// borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
// const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
// borderGraphics.beginPath();
// borderGraphics.moveTo(borderX, 130);
// borderGraphics.lineTo(borderX, window.innerHeight - 260);
// borderGraphics.strokePath();
// borderGraphics.closePath();
// const borderGraphicsX = this.add.graphics();
// const borderThicknessX = 6;
// borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
// const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
// borderGraphicsX.beginPath();
// borderGraphicsX.moveTo(0, borderY);
// borderGraphicsX.lineTo(window.innerWidth, borderY);
// borderGraphicsX.strokePath();
// borderGraphicsX.closePath();
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
@ -460,7 +440,7 @@ import Layout from '../../layouts/Layout.astro';
},
];
// console.log('test blocks',blocks[0])
let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;}
let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;}
const droppedBlocks = [];
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
@ -479,43 +459,54 @@ import Layout from '../../layouts/Layout.astro';
});
newBlock.on("dragend", () => {
newBlock.setScale(1.0).setDepth(-2);
newBlock.setScale(1.0).setDepth(-2);
let droppedOnTargetZone = false;
let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => {
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
// Set the position based on target zone index
const col = counter % 2;
const row = Math.floor(counter / 2);
targetZones.forEach((targetZone, targetIndex) => {
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
newBlock.disableInteractive();
targetZone.block = newBlock;
droppedBlocks.push(newBlock);
// Adjust the x and y coordinates accordingly
newBlock.setPosition(targetZone.x + col * (newBlock.width + 10), targetZone.y + row * (newBlock.height + 10));
newBlock.disableInteractive();
targetZone.block = newBlock;
droppedBlocks.push(newBlock);
// Adjust isMatch function based on your requirements
if (isMatch(newBlock.texture.key, targetZone.name)) {
// Handle match logic if needed
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
counter++;
return;
}
});
if (!droppedOnTargetZone) {
newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
}
// Check if all blocks have been dropped on target zones
if (droppedBlocks.length === targetZones.length) {
displayResult(droppedBlocks);
}
});
// Adjust isMatch function based on your requirements
if (isMatch(newBlock.texture.key, targetZone.name)) {
// Handle match logic if needed
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
});
if (!droppedOnTargetZone) {
newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
}
// Check if all blocks have been dropped on target zones
if (droppedBlocks.length === targetZones.length) {
displayResult(droppedBlocks);
}
});