work place dragged blocks position each next
parent
287d2469e6
commit
ab3be22771
|
@ -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;
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue