diff --git a/src/pages/drag/tmp.astro b/src/pages/drag/tmp.astro
index 98b5363..6e5beb8 100644
--- a/src/pages/drag/tmp.astro
+++ b/src/pages/drag/tmp.astro
@@ -166,7 +166,7 @@ import Layout from '../../layouts/Layout.astro';
});
class MyGame extends Phaser.Scene {
constructor() {
- super({ key: 'MyGame' });
+ super();
}
preload() {
var progressBar = this.add.graphics();
@@ -306,6 +306,16 @@ import Layout from '../../layouts/Layout.astro';
}
];
// console.log(data)
+ if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
+ this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
+ this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
+ this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
+ this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
+ this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
+ this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
+ this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
+ this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
+ }
if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
@@ -430,65 +440,70 @@ 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 = [];
- const blockWidth = 100; // Adjust based on the width of your blocks
- const blockSpacing = 10;
- targetZones.forEach((targetZone, targetIndex) => {
- const startX = targetZone.x - (targetZone.width / 2) + blockSpacing / 2;
-
- targetZone.block = null;
-
- blocks.forEach((block, index) => {
-
- if (block.textureKey.includes(targetZone.name)) {
- const x = startX + index * (blockWidth + blockSpacing);
- const y = targetZone.y - 50;
-
- const newBlock = this.add.sprite(x, y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
-
- newBlock.on("drag", (pointer, dragX, dragY) => {
- newBlock.setScale(1.3);
- newBlock.x = dragX;
- newBlock.y = dragY;
- });
-
- newBlock.on("dragend", () => {
- newBlock.setScale(1.0).setDepth(-2);
-
- let droppedOnTargetZone = false;
-
- targetZones.forEach((target, index) => {
- if (Phaser.Geom.Intersects.RectangleToRectangle(newBlock.getBounds(), new Phaser.Geom.Rectangle(target.x, target.y, 200, 100))) {
- newBlock.setPosition(target.x - 50, target.y - 50);
- newBlock.disableInteractive();
- target.block = newBlock;
- droppedBlocks.push(newBlock);
-
- if (isMatch(newBlock.texture.key, target.name)) {
- // Handle match logic if needed
- }
-
- droppedOnTargetZone = true;
- targetZoneBorders[index].setVisible(true);
- targetZoneBorders[index].setAlpha(1);
- return;
- }
- });
-
- if (!droppedOnTargetZone) {
- newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
- }
-
- if (droppedBlocks.length === targetZones.length) {
- displayResult(droppedBlocks);
- }
- });
- }
- });
+ targetZones.forEach((targetZone) => {
+ const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
+ const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
+ targetZoneBorders.push(targetBorder);
+ targetZone.block = null;
+ }),
+ blocks.forEach((block, index) => {
+ console.log(index+1)
+ const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+ // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
+ newBlock.on("drag", (pointer, dragX, dragY) => {
+ newBlock.setScale(1.3);
+ newBlock.x = dragX;
+ newBlock.y = dragY;
});
+ newBlock.on("dragend", () => {
+ newBlock.setScale(1.0).setDepth(-2);
+ 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 / 4);
+
+ // 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);
+ }
+ });
+ });
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
diff --git a/src/pages/drag/tmp2.astro b/src/pages/drag/tmp2.astro
new file mode 100644
index 0000000..6dc352e
--- /dev/null
+++ b/src/pages/drag/tmp2.astro
@@ -0,0 +1,628 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index 8ee3000..8789b7b 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -266,6 +266,26 @@ 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`)
@@ -440,7 +460,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) => {
@@ -459,54 +479,43 @@ import Layout from '../../layouts/Layout.astro';
});
newBlock.on("dragend", () => {
- newBlock.setScale(1.0).setDepth(-2);
- let droppedOnTargetZone = false;
+ newBlock.setScale(1.0).setDepth(-2);
- 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);
+ let droppedOnTargetZone = false;
- // Adjust the x and y coordinates accordingly
- newBlock.setPosition(targetZone.x + col * (newBlock.width + 10), targetZone.y + row * (newBlock.height + 10));
+ 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);
- 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
+ }
- // 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;
}
+ });
- 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);
- }
- });
-
-
-
+ 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);
+ }
+ });