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

removove brown T and visible label in drag game V4

Browse Source
This commit is contained in:
dev sp
2024-01-20 07:42:44 +00:00
parent 15b8c1e803
commit 287d2469e6
3 changed files with 629 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/drag/v4.astro
View File

@@ -266,25 +266,25 @@ 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 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 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');
@@ -326,16 +326,26 @@ 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(window.innerWidth / 24, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
this.add.text(window.innerWidth / 2 + 10, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
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`});
} else{
this.add.text(window.innerWidth / 8, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(window.innerWidth / 2 * 1.47, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 30;
const baseFontSize = 22;
// Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 95, data.description, {
@@ -477,7 +487,7 @@ import Layout from '../../layouts/Layout.astro';
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 100)
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`