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

pending to make layer4 in letter E

Browse Source
This commit is contained in:
suvodip
2023-10-05 21:32:32 +05:30
parent f4350af973
commit 2e1fef6390
7 changed files with 1063 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/pages/guided-tracing/a.astro
View File

@@ -44,8 +44,9 @@ import Layout from "../../layouts/Layout.astro";
cloudeSize = 200;
cloudHeight = 340;
canvasScale = 0.14
canvasHeight = - 28;
canvasHeight = 35;
letterHeight = 70;
letterScale = 1;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
@@ -60,8 +61,9 @@ import Layout from "../../layouts/Layout.astro";
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = - 60;
canvasHeight = 20;
letterHeight = 50;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
@@ -73,31 +75,28 @@ import Layout from "../../layouts/Layout.astro";
parrotHeight = 245;
animatedAHeight = 20;
}
// let hideButton;
function preload() {
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
this.load.svg('letterA', '/assets/capital-letter/a.svg');
this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
this.load.audio('slide', '/assets/audio/slide.mp3');
this.load.audio('audioOne', '/assets/audio/slant-left.mp3');
this.load.audio('audioTwo', '/assets/audio/slant-right.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');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
// this.load.image('backgroundImage', '/assets/backgroundImage2.png');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('parrot', '/assets/parrot.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
}
// bgMobile.png
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -143,12 +142,18 @@ import Layout from "../../layouts/Layout.astro";
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2);
this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
font: '900 24px quicksand',
@@ -170,9 +175,6 @@ import Layout from "../../layouts/Layout.astro";
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
@@ -196,9 +198,6 @@ import Layout from "../../layouts/Layout.astro";
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
animatedLetter.setVisible(true);
});
@@ -223,30 +222,30 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1');
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play();
const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
secondLayer = this.add.image(customWidth / 2, 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 slantRightAudio = this.sound.add('slantRight');
const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3');
thirdLayer = this.add.image(customWidth / 2, 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 slideAudio = this.sound.add('slide');
const audioThreeAudio = this.sound.add('audioThree');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15);
@@ -271,9 +270,10 @@ 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);
slantRightAudio.play();
audioTwoAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
@@ -297,7 +297,7 @@ import Layout from "../../layouts/Layout.astro";
if (distance >= 100) {
secondTextLayer.setVisible(false);
thirdTextLayer.setVisible(true);
slideAudio.play();
audioThreeAudio.play();
thirdLayer.setVisible(true);
secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5);
@@ -325,8 +325,8 @@ import Layout from "../../layouts/Layout.astro";
graphics = this.add.graphics();
graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
@@ -343,80 +343,6 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightLeft = customHeight /2 - 100; // Starting y position
const endHeightLeft = customHeight / 2 + 170; // Ending y position
const startWidthLeft = customWidth / 2 + 22;
const endWidthLeft = customWidth / 2 - 70;
// handPointer.setOrigin(0.5, 0.5);
handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerLeft,
x: {
getStart: () => startWidthLeft,
getEnd: () => endWidthLeft,
}, // End x position
y: {
getStart: () => startHeightLeft,
getEnd: () => endHeightLeft,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightRight = customHeight /2 - 100; // Starting y position
const endHeightRight = customHeight / 2 + 170; // Ending y position
const startWidthRight = customWidth / 2 + 20;
const endWidthRight = customWidth / 2 + 107;
// handPointer.setOrigin(0.5, 0.5);
handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerRight,
x: {
getStart: () => startWidthRight,
getEnd: () => endWidthRight,
}, // End x position
y: {
getStart: () => startHeightRight,
getEnd: () => endHeightRight,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightSlide = customHeight / 2 + 70; // Starting y position
const endHeightSlide = customHeight / 2 + 70; // Ending y position
const startWidthSlide = customWidth / 2 - 60;
const endWidthSlide = customWidth / 2 + 55;
// handPointer.setOrigin(0.5, 0.5);
handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointeSlide,
x: {
getStart: () => startWidthSlide,
getEnd: () => endWidthSlide,
}, // End x position
y: {
getStart: () => startHeightSlide,
getEnd: () => endHeightSlide,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
// Start Position 626 317