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

little changes in drag game and guided letter tracing game

Browse Source
This commit is contained in:
Dev 1
2023-10-06 18:20:59 +05:30
parent 2e1fef6390
commit 1178b1bd29
3 changed files with 94 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/guided-tracing/e.astro
View File

@@ -36,7 +36,7 @@ import Layout from "../../layouts/Layout.astro";
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics;
let isDrawing = false;
@@ -81,8 +81,9 @@ import Layout from "../../layouts/Layout.astro";
this.load.svg('layer1', '/assets/capital-letter/e_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/e_l2.svg');
this.load.svg('layer3', '/assets/capital-letter/e_l3.svg');
this.load.audio('audioOne', '/assets/audio/slant-left.mp3');
this.load.audio('audioTwo', '/assets/audio/slant-right.mp3');
this.load.svg('layer4', '/assets/capital-letter/e_l4.svg');
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
this.load.audio('audioThree', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
@@ -234,7 +235,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
@@ -245,7 +246,7 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioThree');
const audioThreeAudio = this.sound.add('audioTwo');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15);
@@ -253,12 +254,22 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false);
fourthLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const fourthTextLayer = this.add.text(textX, textY, '4. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioFourthAudio = this.sound.add('audioTwo');
fourthTextLayer.setVisible(false);
fourthLayer.setDepth(1.1);
// fourthLayer.setScale(1.15);
fourthLayer.setAlpha(0.5);
fourthLayer.setInteractive({ draggable: true });
fourthLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
let thirdDragStartPoint = { x: 0, y: 0 };
// ...
let fourthDragStartPoint = { x: 0, y: 0 };
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
@@ -270,7 +281,6 @@ import Layout from "../../layouts/Layout.astro";
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
audioTwoAudio.play();
@@ -278,6 +288,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
thirdLayer.setAlpha(0.5);
fourthLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
@@ -301,6 +312,7 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setVisible(true);
secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5);
fourthLayer.setAlpha(0.5);
} else {
secondLayer.setAlpha(0.5);
}
@@ -318,11 +330,31 @@ import Layout from "../../layouts/Layout.astro";
if (distance >= 100) {
thirdLayer.setAlpha(1);
thirdTextLayer.setVisible(false);
fourthTextLayer.setVisible(true);
fourthLayer.setVisible(true);
fourthLayer.setAlpha(0.5);
audioFourthAudio.play();
} else {
thirdLayer.setAlpha(0.5);
}
});
fourthLayer.on('dragstart', (pointer) => {
fourthDragStartPoint.x = pointer.x;
fourthDragStartPoint.y = pointer.y;
});
fourthLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(fourthDragStartPoint.x, fourthDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
fourthLayer.setAlpha(1);
fourthTextLayer.setVisible(false);
} else {
fourthLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);