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

drawing currect version

Browse Source
This commit is contained in:
Suvodip
2024-06-19 13:56:55 +05:30
parent 5ed1ee1e6c
commit 6bd0c1c23b
75 changed files with 161 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/pages/drag/dragdrop_phonics.astro
View File

@@ -71,11 +71,11 @@ import Layout from '../../layouts/Layout.astro';
let retryButton;
let blockMatches;
if(isMobile){
topLogoWidth = 5;
muteIconWidth = 2;
resetIconWidth = 1.6;
tickIconWidth = 1.34;
cancelIconWidth = 1.16;
topLogoWidth = 4.5;
muteIconWidth = 1.8;
resetIconWidth = 1.47;
tickIconWidth = 1.24;
cancelIconWidth = 1.08;
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 67;
@@ -147,7 +147,7 @@ import Layout from '../../layouts/Layout.astro';
.then(({data}) => {
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
if(isMobile){
imageCustomWidth = "?width=100";
imageCustomWidth = "?width=80";
} else{
imageCustomWidth = "?width=100";
}
@@ -356,24 +356,24 @@ import Layout from '../../layouts/Layout.astro';
graphics.strokePath();
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`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 55, data.label2, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 15, window.innerHeight - 55, data.label3, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 55, data.label4, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 185, data.label5, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 185, data.label6, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`})
this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`})
}
if(isMobile){
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`});
} else{
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
}
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 20;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
let wrapWidth;
if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
@@ -438,53 +438,75 @@ import Layout from '../../layouts/Layout.astro';
// windowLoad();
submitUserData(this);
})
let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
if(isMobile){
blocks1Width1 = 180;
blocks1Width2 = 90;
blocks1Width3 = 2;
blocks1Width4 = 90;
blocks1Width5 = 180;
blocks1Width6 = 90;
blocks1Width7 = 2;
blocks1Width8 = 90;
} else{
blocks1Width1 = 200;
blocks1Width2 = 100;
blocks1Width3 = 2;
blocks1Width4 = 100;
blocks1Width5 = 200;
blocks1Width6 = 100;
blocks1Width7 = 2;
blocks1Width8 = 100;
}
const blocks = [
{
x: displayW / 2 - 200,
y: window.innerHeight - 250,
x: displayW / 2 - blocks1Width1,
y: window.innerHeight - 290,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 2-100,
y: window.innerHeight - 250,
x: displayW / 2 - blocks1Width2,
y: window.innerHeight - 290,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 2,
y: window.innerHeight - 250,
x: displayW / blocks1Width3,
y: window.innerHeight - 290,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 2+100,
y: window.innerHeight - 250,
x: displayW / 2 + blocks1Width4,
y: window.innerHeight - 290,
textureKey: "blocks4",
id: "block4",
},
{
x: displayW / 2-200,
y: window.innerHeight - 120,
x: displayW / 2 - blocks1Width5,
y: window.innerHeight - 160,
textureKey: "blocks5",
id: "block5",
},
{
x: displayW / 2-100,
y: window.innerHeight - 120,
x: displayW / 2 - blocks1Width6,
y: window.innerHeight - 160,
textureKey: "blocks6",
id: "block6",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
x: displayW / blocks1Width7,
y: window.innerHeight - 160,
textureKey: "blocks7",
id: "block7",
},
{
x: displayW / 2+100,
y: window.innerHeight - 120,
x: displayW / 2 + blocks1Width8,
y: window.innerHeight - 160,
textureKey: "blocks8",
id: "block8",
},
@@ -495,7 +517,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = [];
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.05).setScale(borderScale);
const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
@@ -516,7 +538,7 @@ import Layout from '../../layouts/Layout.astro';
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50)
)
) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -535,7 +557,7 @@ import Layout from '../../layouts/Layout.astro';
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(0);
targetZoneBorders[targetIndex].setAlpha(0.5);
return;
}
});