kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

try to adjust drag v4 positions

Browse Source
This commit is contained in:
dev sp
2024-01-20 15:50:32 +00:00
parent ab3be22771
commit a3ad792a96
3 changed files with 750 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/pages/drag/tmp.astro
View File

@@ -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();