pending to make layer4 in letter E
suvodip
parent
f4350af973
commit
2e1fef6390
Binary file not shown.
|
Before Width: | Height: | Size: 46 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -44,8 +44,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
cloudeSize = 200;
|
cloudeSize = 200;
|
||||||
cloudHeight = 340;
|
cloudHeight = 340;
|
||||||
canvasScale = 0.14
|
canvasScale = 0.14
|
||||||
canvasHeight = - 28;
|
canvasHeight = 35;
|
||||||
letterHeight = 70;
|
letterHeight = 70;
|
||||||
|
letterScale = 1;
|
||||||
backgroundScale = 0.8;
|
backgroundScale = 0.8;
|
||||||
sunScale = 0.1;
|
sunScale = 0.1;
|
||||||
sunScalePlus = 0.15;
|
sunScalePlus = 0.15;
|
||||||
|
|
@ -60,8 +61,9 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
cloudeSize = 500;
|
cloudeSize = 500;
|
||||||
cloudHeight = 250;
|
cloudHeight = 250;
|
||||||
canvasScale = 0.195;
|
canvasScale = 0.195;
|
||||||
canvasHeight = - 60;
|
canvasHeight = 20;
|
||||||
letterHeight = 50;
|
letterHeight = 50;
|
||||||
|
letterScale = 1;
|
||||||
backgroundScale = 1;
|
backgroundScale = 1;
|
||||||
sunScale = 0.2;
|
sunScale = 0.2;
|
||||||
sunScalePlus = 0.25;
|
sunScalePlus = 0.25;
|
||||||
|
|
@ -73,31 +75,28 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
parrotHeight = 245;
|
parrotHeight = 245;
|
||||||
animatedAHeight = 20;
|
animatedAHeight = 20;
|
||||||
}
|
}
|
||||||
// let hideButton;
|
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
|
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
|
||||||
this.load.svg('letterA', '/assets/capital-letter/a.svg');
|
this.load.svg('letterA', '/assets/capital-letter/a.svg');
|
||||||
this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
|
this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
|
||||||
this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
|
this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
|
||||||
this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
|
this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
|
||||||
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
this.load.audio('audioOne', '/assets/audio/slant-left.mp3');
|
||||||
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
this.load.audio('audioTwo', '/assets/audio/slant-right.mp3');
|
||||||
this.load.audio('slide', '/assets/audio/slide.mp3');
|
this.load.audio('audioThree', '/assets/audio/slide.mp3');
|
||||||
this.load.image('topLogo', '/assets/top_logo.png');
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||||
this.load.svg('handPointer', '/assets/svg/hand.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('backgroundImage', '/assets/bg6.png');
|
||||||
this.load.image('cloud', '/assets/cloud.png');
|
this.load.image('cloud', '/assets/cloud.png');
|
||||||
this.load.image('canvas', '/assets/canvas4.png');
|
this.load.image('canvas', '/assets/canvas4.png');
|
||||||
this.load.image('parrot', '/assets/parrot.png');
|
this.load.image('parrot', '/assets/parrot.png');
|
||||||
this.load.image('sun', '/assets/sun.png');
|
this.load.image('sun', '/assets/sun.png');
|
||||||
this.load.image('bgMobile', '/assets/bgMobile.png');
|
this.load.image('bgMobile', '/assets/bgMobile.png');
|
||||||
|
this.load.image('canvasStand', '/assets/stand2.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
// bgMobile.png
|
|
||||||
function create() {
|
function create() {
|
||||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
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', });
|
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
|
repeat: -1 // Repeat indefinitely
|
||||||
});
|
});
|
||||||
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
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);
|
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);
|
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);
|
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
|
||||||
this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
|
|
||||||
firstScreen.setVisible(false);
|
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", {
|
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
|
||||||
font: '900 24px quicksand',
|
font: '900 24px quicksand',
|
||||||
|
|
@ -170,9 +175,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
hideButton.setVisible(false); // Hide the "Hide" button
|
hideButton.setVisible(false); // Hide the "Hide" button
|
||||||
demoButton.setVisible(true); // Show the "Demo" button
|
demoButton.setVisible(true); // Show the "Demo" button
|
||||||
graphics.setVisible(true);
|
graphics.setVisible(true);
|
||||||
handPointerLeft.setVisible(false);
|
|
||||||
handPointerRight.setVisible(false);
|
|
||||||
handPointeSlide.setVisible(false);
|
|
||||||
animatedLetter.setVisible(false);
|
animatedLetter.setVisible(false);
|
||||||
});
|
});
|
||||||
hideButton.setVisible(false);
|
hideButton.setVisible(false);
|
||||||
|
|
@ -196,9 +198,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
firstScreen.setVisible(true);
|
firstScreen.setVisible(true);
|
||||||
demoButton.setVisible(false); // Hide the "Demo" button
|
demoButton.setVisible(false); // Hide the "Demo" button
|
||||||
hideButton.setVisible(true); // Show the "Hide" button
|
hideButton.setVisible(true); // Show the "Hide" button
|
||||||
handPointerLeft.setVisible(false);
|
|
||||||
handPointerRight.setVisible(false);
|
|
||||||
handPointeSlide.setVisible(false);
|
|
||||||
animatedLetter.setVisible(true);
|
animatedLetter.setVisible(true);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -223,30 +222,30 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
|
|
||||||
let textX, textY;
|
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;
|
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantLeftAudio = this.sound.add('slantLeft');
|
const audioOneAudio = this.sound.add('audioOne');
|
||||||
slantLeftAudio.play();
|
audioOneAudio.play();
|
||||||
firstLayer.setDepth(1);
|
firstLayer.setDepth(1);
|
||||||
firstLayer.setAlpha(0.5);
|
firstLayer.setAlpha(0.5);
|
||||||
firstLayer.setInteractive({ draggable: true });
|
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;
|
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. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantRightAudio = this.sound.add('slantRight');
|
const audioTwoAudio = this.sound.add('audioTwo');
|
||||||
secondTextLayer.setVisible(false);
|
secondTextLayer.setVisible(false);
|
||||||
secondLayer.setDepth(1);
|
secondLayer.setDepth(1);
|
||||||
secondLayer.setAlpha(0.5);
|
secondLayer.setAlpha(0.5);
|
||||||
secondLayer.setInteractive({ draggable: true });
|
secondLayer.setInteractive({ draggable: true });
|
||||||
secondLayer.setVisible(false);
|
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;
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
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);
|
thirdTextLayer.setVisible(false);
|
||||||
thirdLayer.setDepth(1.1);
|
thirdLayer.setDepth(1.1);
|
||||||
// thirdLayer.setScale(1.15);
|
// 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);
|
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
|
||||||
|
|
||||||
if (distance >= 100) {
|
if (distance >= 100) {
|
||||||
|
|
||||||
firstTextLayer.setVisible(false);
|
firstTextLayer.setVisible(false);
|
||||||
secondTextLayer.setVisible(true);
|
secondTextLayer.setVisible(true);
|
||||||
slantRightAudio.play();
|
audioTwoAudio.play();
|
||||||
secondLayer.setVisible(true);
|
secondLayer.setVisible(true);
|
||||||
firstLayer.setAlpha(1);
|
firstLayer.setAlpha(1);
|
||||||
secondLayer.setAlpha(0.5);
|
secondLayer.setAlpha(0.5);
|
||||||
|
|
@ -297,7 +297,7 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
if (distance >= 100) {
|
if (distance >= 100) {
|
||||||
secondTextLayer.setVisible(false);
|
secondTextLayer.setVisible(false);
|
||||||
thirdTextLayer.setVisible(true);
|
thirdTextLayer.setVisible(true);
|
||||||
slideAudio.play();
|
audioThreeAudio.play();
|
||||||
thirdLayer.setVisible(true);
|
thirdLayer.setVisible(true);
|
||||||
secondLayer.setAlpha(1);
|
secondLayer.setAlpha(1);
|
||||||
thirdLayer.setAlpha(0.5);
|
thirdLayer.setAlpha(0.5);
|
||||||
|
|
@ -325,8 +325,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
|
|
||||||
|
|
||||||
graphics = this.add.graphics();
|
graphics = this.add.graphics();
|
||||||
|
graphics.setMask(mask);
|
||||||
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||||
|
|
||||||
this.input.on('pointerdown', function (pointer) {
|
this.input.on('pointerdown', function (pointer) {
|
||||||
isDrawing = true;
|
isDrawing = true;
|
||||||
graphics.moveTo(pointer.x, pointer.y);
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
|
@ -343,80 +343,6 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
graphics.lineTo(pointer.x, pointer.y);
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
graphics.strokePath();
|
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
|
// Start Position 626 317
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -32,67 +32,221 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
update: update
|
update: update
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
// backgroundImage.png
|
||||||
const game = new Phaser.Game(config);
|
const game = new Phaser.Game(config);
|
||||||
const customWidth = window.innerWidth;
|
const customWidth = window.innerWidth;
|
||||||
const customHeight = window.innerHeight;
|
const customHeight = window.innerHeight;
|
||||||
let firstLayer, secondLayer, thirdLayer;
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
let graphics;
|
let graphics;
|
||||||
let isDrawing = false;
|
let isDrawing = false;
|
||||||
|
|
||||||
|
if(isMobile){
|
||||||
|
cloudeSize = 200;
|
||||||
|
cloudHeight = 340;
|
||||||
|
canvasScale = 0.14
|
||||||
|
canvasHeight = 35;
|
||||||
|
letterHeight = 58;
|
||||||
|
letterScale = 0.85;
|
||||||
|
backgroundScale = 0.8;
|
||||||
|
sunScale = 0.1;
|
||||||
|
sunScalePlus = 0.15;
|
||||||
|
sunWidth = 70;
|
||||||
|
sunHeight = 70;
|
||||||
|
parrotScale = 0.35;
|
||||||
|
parrotScalePlus = 0.38;
|
||||||
|
parrotWidth = 135;
|
||||||
|
parrotHeight = 170;
|
||||||
|
animatedAHeight = 32;
|
||||||
|
} else{
|
||||||
|
cloudeSize = 500;
|
||||||
|
cloudHeight = 250;
|
||||||
|
canvasScale = 0.195;
|
||||||
|
canvasHeight = 20;
|
||||||
|
letterHeight = 50;
|
||||||
|
letterScale = 1;
|
||||||
|
backgroundScale = 1;
|
||||||
|
sunScale = 0.2;
|
||||||
|
sunScalePlus = 0.25;
|
||||||
|
sunWidth = 200;
|
||||||
|
sunHeight = 100;
|
||||||
|
parrotScale = 0.4;
|
||||||
|
parrotScalePlus = 0.44;
|
||||||
|
parrotWidth = 200;
|
||||||
|
parrotHeight = 245;
|
||||||
|
animatedAHeight = 20;
|
||||||
|
}
|
||||||
// let hideButton;
|
// let hideButton;
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
|
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
|
||||||
this.load.svg('letterB', '/assets/capital-letter/b.svg');
|
this.load.svg('letterB', '/assets/capital-letter/b.svg');
|
||||||
this.load.svg('layer1', '/assets/capital-letter/b_l1.svg');
|
this.load.svg('layer1', '/assets/capital-letter/b_l1.svg');
|
||||||
this.load.svg('layer2', '/assets/capital-letter/b_l2.svg');
|
this.load.svg('layer2', '/assets/capital-letter/b_l2.svg');
|
||||||
this.load.svg('layer3', '/assets/capital-letter/b_l3.svg');
|
this.load.svg('layer3', '/assets/capital-letter/b_l3.svg');
|
||||||
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
|
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||||
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
|
this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
|
||||||
this.load.audio('slide', '/assets/audio/slide.mp3');
|
|
||||||
this.load.image('topLogo', '/assets/top_logo.png');
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
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.svg('handPointer', '/assets/svg/hand.svg');
|
||||||
|
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');
|
||||||
}
|
}
|
||||||
|
|
||||||
function create() {
|
function create() {
|
||||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
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', });
|
this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
|
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
|
||||||
|
|
||||||
|
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
|
||||||
|
cloud.setDepth(-1.8);
|
||||||
|
const scrollSpeed = 0.5;
|
||||||
|
this.time.addEvent({
|
||||||
|
loop: true,
|
||||||
|
callback: () => {
|
||||||
|
cloud.tilePositionX += scrollSpeed;
|
||||||
|
},
|
||||||
|
delay: 16, // Adjust the delay for the desired scrolling speed
|
||||||
|
});
|
||||||
|
|
||||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterB');
|
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||||
|
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
|
||||||
|
|
||||||
|
|
||||||
|
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||||
|
const duration = 3000; // Duration of the animation in milliseconds
|
||||||
|
|
||||||
|
// Create a scaling tween
|
||||||
|
this.tweens.add({
|
||||||
|
targets: sun,
|
||||||
|
scaleX: scaleFactor,
|
||||||
|
scaleY: scaleFactor,
|
||||||
|
duration: duration,
|
||||||
|
ease: 'Linear',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
|
||||||
|
const parrotduration = 2500;
|
||||||
|
this.tweens.add({
|
||||||
|
targets: parrot,
|
||||||
|
scaleX: parrotscaleFactor + 0.004,
|
||||||
|
scaleY: parrotscaleFactor,
|
||||||
|
duration: parrotduration,
|
||||||
|
ease: 'Redial',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||||
|
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||||
|
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);
|
||||||
|
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
|
||||||
firstScreen.setVisible(false);
|
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',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
hideButton.setInteractive().on('pointerdown', () => {
|
||||||
|
isDemoButtonClicked = false;
|
||||||
|
firstScreen.setVisible(false);
|
||||||
|
hideButton.setVisible(false); // Hide the "Hide" button
|
||||||
|
demoButton.setVisible(true); // Show the "Demo" button
|
||||||
|
graphics.setVisible(true);
|
||||||
|
animatedLetter.setVisible(false);
|
||||||
|
});
|
||||||
|
hideButton.setVisible(false);
|
||||||
|
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
|
||||||
|
font: '900 24px quicksand',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
demoButton.setInteractive().on('pointerdown', () => {
|
||||||
|
graphics.setVisible(false);
|
||||||
|
firstScreen.setVisible(true);
|
||||||
|
demoButton.setVisible(false); // Hide the "Demo" button
|
||||||
|
hideButton.setVisible(true); // Show the "Hide" button
|
||||||
|
animatedLetter.setVisible(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
const baseFontSize = 20;
|
const baseFontSize = 20;
|
||||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : B', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
|
||||||
|
|
||||||
|
// Play the video
|
||||||
|
animatedLetter.play();
|
||||||
|
animatedLetter.setVisible(false);
|
||||||
|
|
||||||
|
// You can set additional properties for the video, such as loop and mute:
|
||||||
|
animatedLetter.setLoop(true); // Loop the video
|
||||||
|
animatedLetter.setMute(false); // Unmute the video
|
||||||
|
animatedLetter.on('complete', function () {
|
||||||
|
// Video playback is complete
|
||||||
|
// You can add your code here for what to do when the video finishes.
|
||||||
|
});
|
||||||
|
|
||||||
let textX, textY;
|
let textX, textY;
|
||||||
|
|
||||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
|
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantLeftAudio = this.sound.add('slantLeft');
|
const audioOneAudio = this.sound.add('audioOne');
|
||||||
slantLeftAudio.play();
|
audioOneAudio.play();
|
||||||
firstLayer.setDepth(1);
|
firstLayer.setDepth(1);
|
||||||
firstLayer.setAlpha(0.5);
|
firstLayer.setAlpha(0.5);
|
||||||
firstLayer.setInteractive({ draggable: true });
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
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 Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantRightAudio = this.sound.add('slantRight');
|
const audioTwoAudio = this.sound.add('audioTwo');
|
||||||
secondTextLayer.setVisible(false);
|
secondTextLayer.setVisible(false);
|
||||||
secondLayer.setDepth(1);
|
secondLayer.setDepth(1);
|
||||||
secondLayer.setAlpha(0.5);
|
secondLayer.setAlpha(0.5);
|
||||||
secondLayer.setInteractive({ draggable: true });
|
secondLayer.setInteractive({ draggable: true });
|
||||||
secondLayer.setVisible(false);
|
secondLayer.setVisible(false);
|
||||||
|
|
||||||
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
thirdLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||||
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
const thirdTextLayer = this.add.text(textX, textY, '3. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slideAudio = this.sound.add('slide');
|
const audioTHreeAudio = this.sound.add('audioTwo');
|
||||||
thirdTextLayer.setVisible(false);
|
thirdTextLayer.setVisible(false);
|
||||||
thirdLayer.setDepth(1.1);
|
thirdLayer.setDepth(1.1);
|
||||||
// thirdLayer.setScale(1.15);
|
// thirdLayer.setScale(1.15);
|
||||||
|
|
@ -100,47 +254,80 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
thirdLayer.setInteractive({ draggable: true });
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
thirdLayer.setVisible(false);
|
thirdLayer.setVisible(false);
|
||||||
|
|
||||||
firstLayer.on('drag', (pointer) => {
|
// Add these variables to keep track of start points
|
||||||
if (pointer.isDown) {
|
let firstDragStartPoint = { x: 0, y: 0 };
|
||||||
firstTextLayer.setVisible(false);
|
let secondDragStartPoint = { x: 0, y: 0 };
|
||||||
secondTextLayer.setVisible(true);
|
let thirdDragStartPoint = { x: 0, y: 0 };
|
||||||
slantRightAudio.play();
|
|
||||||
secondLayer.setVisible(true);
|
|
||||||
firstLayer.setAlpha(1);
|
|
||||||
secondLayer.setAlpha(0.5);
|
|
||||||
thirdLayer.setAlpha(0.5);
|
|
||||||
} else {
|
|
||||||
firstLayer.setAlpha(0.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
secondLayer.on('drag', (pointer) => {
|
// ...
|
||||||
if (pointer.isDown) {
|
|
||||||
secondTextLayer.setVisible(false);
|
|
||||||
thirdTextLayer.setVisible(true);
|
|
||||||
slideAudio.play();
|
|
||||||
thirdLayer.setVisible(true);
|
|
||||||
secondLayer.setAlpha(1);
|
|
||||||
thirdLayer.setAlpha(0.5);
|
|
||||||
} else {
|
|
||||||
secondLayer.setAlpha(0.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
thirdLayer.on('drag', (pointer) => {
|
// Add this code for firstLayer
|
||||||
if (pointer.isDown) {
|
firstLayer.on('dragstart', (pointer) => {
|
||||||
thirdLayer.setAlpha(1);
|
firstDragStartPoint.x = pointer.x;
|
||||||
thirdTextLayer.setVisible(false);
|
firstDragStartPoint.y = pointer.y;
|
||||||
// const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
|
});
|
||||||
// succesImage.setAlpha(0.2);
|
|
||||||
// this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
|
firstLayer.on('drag', (pointer) => {
|
||||||
|
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();
|
||||||
|
secondLayer.setVisible(true);
|
||||||
|
firstLayer.setAlpha(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
} else {
|
} else {
|
||||||
thirdLayer.setAlpha(0.5);
|
firstLayer.setAlpha(0.5);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Repeat the above code for secondLayer and thirdLayer
|
||||||
|
|
||||||
|
// Add this code for secondLayer
|
||||||
|
secondLayer.on('dragstart', (pointer) => {
|
||||||
|
secondDragStartPoint.x = pointer.x;
|
||||||
|
secondDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
secondLayer.on('drag', (pointer) => {
|
||||||
|
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
|
||||||
|
|
||||||
|
if (distance >= 100) {
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
thirdTextLayer.setVisible(true);
|
||||||
|
audioTHreeAudio.play();
|
||||||
|
thirdLayer.setVisible(true);
|
||||||
|
secondLayer.setAlpha(1);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add this code for thirdLayer
|
||||||
|
thirdLayer.on('dragstart', (pointer) => {
|
||||||
|
thirdDragStartPoint.x = pointer.x;
|
||||||
|
thirdDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
thirdLayer.on('drag', (pointer) => {
|
||||||
|
const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
|
||||||
|
|
||||||
|
if (distance >= 100) {
|
||||||
|
thirdLayer.setAlpha(1);
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
} else {
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
graphics = this.add.graphics();
|
graphics = this.add.graphics();
|
||||||
graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
|
graphics.setMask(mask);
|
||||||
|
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||||
this.input.on('pointerdown', function (pointer) {
|
this.input.on('pointerdown', function (pointer) {
|
||||||
isDrawing = true;
|
isDrawing = true;
|
||||||
graphics.moveTo(pointer.x, pointer.y);
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
|
@ -157,58 +344,13 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
graphics.lineTo(pointer.x, pointer.y);
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
graphics.strokePath();
|
graphics.strokePath();
|
||||||
});
|
});
|
||||||
const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
|
|
||||||
const startHeightLeft = customHeight /2 - 140;
|
|
||||||
const endHeightLeft = customHeight / 2 + 140;
|
|
||||||
const startWidthLeft = customWidth / 2 + 10;
|
|
||||||
const endWidthLeft = customWidth / 2 + 10;
|
|
||||||
handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
|
|
||||||
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
|
|
||||||
});
|
|
||||||
|
|
||||||
handPointerLeft.setVisible(false);
|
|
||||||
|
|
||||||
|
|
||||||
// Start Position 626 317
|
// Start Position 626 317
|
||||||
let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
|
|
||||||
hideButton.setInteractive().on('pointerdown', () => {
|
|
||||||
isDemoButtonClicked = false;
|
|
||||||
firstScreen.setVisible(false);
|
|
||||||
hideButton.setVisible(false); // Hide the "Hide" button
|
|
||||||
demoButton.setVisible(true); // Show the "Demo" button
|
|
||||||
graphics.setVisible(true);
|
|
||||||
handPointerLeft.setVisible(false);
|
|
||||||
});
|
|
||||||
hideButton.setVisible(false);
|
|
||||||
|
|
||||||
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
|
|
||||||
demoButton.setInteractive().on('pointerdown', () => {
|
|
||||||
graphics.setVisible(false);
|
|
||||||
firstScreen.setVisible(true);
|
|
||||||
demoButton.setVisible(false); // Hide the "Demo" button
|
|
||||||
hideButton.setVisible(true); // Show the "Hide" button
|
|
||||||
handPointerLeft.setVisible(true);
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
}
|
||||||
// function showLayersWithFadeIn() {
|
|
||||||
|
|
||||||
// }
|
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
// Update any game logic if needed
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -32,82 +32,234 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
update: update
|
update: update
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
// backgroundImage.png
|
||||||
const game = new Phaser.Game(config);
|
const game = new Phaser.Game(config);
|
||||||
const customWidth = window.innerWidth;
|
const customWidth = window.innerWidth;
|
||||||
const customHeight = window.innerHeight;
|
const customHeight = window.innerHeight;
|
||||||
let firstLayer, secondLayer, thirdLayer;
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
let graphics;
|
let graphics;
|
||||||
let isDrawing = false;
|
let isDrawing = false;
|
||||||
|
|
||||||
|
if(isMobile){
|
||||||
|
cloudeSize = 200;
|
||||||
|
cloudHeight = 340;
|
||||||
|
canvasScale = 0.14
|
||||||
|
canvasHeight = 35;
|
||||||
|
letterHeight = 90;
|
||||||
|
letterScale = 1;
|
||||||
|
backgroundScale = 0.8;
|
||||||
|
sunScale = 0.1;
|
||||||
|
sunScalePlus = 0.15;
|
||||||
|
sunWidth = 70;
|
||||||
|
sunHeight = 70;
|
||||||
|
parrotScale = 0.35;
|
||||||
|
parrotScalePlus = 0.38;
|
||||||
|
parrotWidth = 135;
|
||||||
|
parrotHeight = 170;
|
||||||
|
animatedAHeight = 32;
|
||||||
|
} else{
|
||||||
|
cloudeSize = 500;
|
||||||
|
cloudHeight = 250;
|
||||||
|
canvasScale = 0.195;
|
||||||
|
canvasHeight = 20;
|
||||||
|
letterHeight = 50;
|
||||||
|
letterScale = 1;
|
||||||
|
backgroundScale = 1;
|
||||||
|
sunScale = 0.2;
|
||||||
|
sunScalePlus = 0.25;
|
||||||
|
sunWidth = 200;
|
||||||
|
sunHeight = 100;
|
||||||
|
parrotScale = 0.4;
|
||||||
|
parrotScalePlus = 0.44;
|
||||||
|
parrotWidth = 200;
|
||||||
|
parrotHeight = 245;
|
||||||
|
animatedAHeight = 20;
|
||||||
|
}
|
||||||
|
// let hideButton;
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
this.load.svg('letterC', '/assets/capital-letter/c_l1.svg');
|
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
|
||||||
this.load.svg('layer1', '/assets/capital-letter/c_l1.svg');
|
this.load.svg('letterC', '/assets/capital-letter/c.svg');
|
||||||
|
this.load.svg('layer1', '/assets/capital-letter/c.svg');
|
||||||
this.load.audio('hookAround', '/assets/audio/hook-around.mp3');
|
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||||
this.load.image('topLogo', '/assets/top_logo.png');
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
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/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');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function create() {
|
function create() {
|
||||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
|
this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterC');
|
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
|
||||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
|
||||||
const baseFontSize = 20;
|
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
|
||||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
cloud.setDepth(-1.8);
|
||||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
const scrollSpeed = 0.5;
|
||||||
|
this.time.addEvent({
|
||||||
|
loop: true,
|
||||||
|
callback: () => {
|
||||||
|
cloud.tilePositionX += scrollSpeed;
|
||||||
|
},
|
||||||
|
delay: 16, // Adjust the delay for the desired scrolling speed
|
||||||
|
});
|
||||||
|
|
||||||
this.time.delayedCall(2000, () => {
|
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||||
this.tweens.add({
|
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
|
||||||
targets: firstScreen,
|
|
||||||
alpha: 0,
|
|
||||||
scaleX: 0.5,
|
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||||
scaleY: 0.5,
|
const duration = 3000; // Duration of the animation in milliseconds
|
||||||
duration: 1000,
|
|
||||||
onComplete: () => {
|
// Create a scaling tween
|
||||||
firstScreen.setVisible(false);
|
this.tweens.add({
|
||||||
firstScreen.setScale(1);
|
targets: sun,
|
||||||
showLayersWithFadeIn.call(this);
|
scaleX: scaleFactor,
|
||||||
|
scaleY: scaleFactor,
|
||||||
|
duration: duration,
|
||||||
|
ease: 'Linear',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
|
||||||
|
const parrotduration = 2500;
|
||||||
|
this.tweens.add({
|
||||||
|
targets: parrot,
|
||||||
|
scaleX: parrotscaleFactor + 0.004,
|
||||||
|
scaleY: parrotscaleFactor,
|
||||||
|
duration: parrotduration,
|
||||||
|
ease: 'Redial',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||||
|
this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||||
|
const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').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',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}, [], this);
|
hideButton.setInteractive().on('pointerdown', () => {
|
||||||
}
|
isDemoButtonClicked = false;
|
||||||
function showLayersWithFadeIn() {
|
firstScreen.setVisible(false);
|
||||||
this.tweens.add({
|
hideButton.setVisible(false); // Hide the "Hide" button
|
||||||
targets: [firstLayer, secondLayer, thirdLayer],
|
demoButton.setVisible(true); // Show the "Demo" button
|
||||||
alpha: 1,
|
graphics.setVisible(true);
|
||||||
duration: 1000, // Duration of the tween in milliseconds
|
animatedLetter.setVisible(false);
|
||||||
delay: 500, // Delay before the fade-in starts
|
|
||||||
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
|
|
||||||
});
|
});
|
||||||
|
hideButton.setVisible(false);
|
||||||
let textX, textY;
|
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
|
||||||
|
font: '900 24px quicksand',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
demoButton.setInteractive().on('pointerdown', () => {
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
graphics.setVisible(false);
|
||||||
|
firstScreen.setVisible(true);
|
||||||
|
demoButton.setVisible(false); // Hide the "Demo" button
|
||||||
|
hideButton.setVisible(true); // Show the "Hide" button
|
||||||
|
animatedLetter.setVisible(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
|
const baseFontSize = 20;
|
||||||
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : C', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
|
||||||
|
|
||||||
|
// Play the video
|
||||||
|
animatedLetter.play();
|
||||||
|
animatedLetter.setVisible(false);
|
||||||
|
|
||||||
|
// You can set additional properties for the video, such as loop and mute:
|
||||||
|
animatedLetter.setLoop(true); // Loop the video
|
||||||
|
animatedLetter.setMute(false); // Unmute the video
|
||||||
|
animatedLetter.on('complete', function () {
|
||||||
|
// Video playback is complete
|
||||||
|
// You can add your code here for what to do when the video finishes.
|
||||||
|
});
|
||||||
|
|
||||||
|
let textX, textY;
|
||||||
|
|
||||||
|
firstLayer = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||||||
|
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around', { font: '700 40px quicksand', fill: '#05b3a4'});
|
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantLeftAudio = this.sound.add('hookAround');
|
const audioOneAudio = this.sound.add('audioOne');
|
||||||
slantLeftAudio.play();
|
audioOneAudio.play();
|
||||||
firstLayer.setDepth(1);
|
firstLayer.setDepth(1);
|
||||||
firstLayer.setAlpha(0.5);
|
firstLayer.setAlpha(0.5);
|
||||||
firstLayer.setInteractive({ draggable: true });
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
|
|
||||||
firstLayer.on('drag', (pointer) => {
|
|
||||||
if (pointer.isDown) {
|
|
||||||
firstTextLayer.setVisible(false);
|
|
||||||
firstLayer.setAlpha(1);
|
|
||||||
} else {
|
|
||||||
firstLayer.setAlpha(0.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
graphics = this.add.graphics();
|
|
||||||
graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
|
|
||||||
|
|
||||||
|
// Add these variables to keep track of start points
|
||||||
|
let firstDragStartPoint = { x: 0, y: 0 };
|
||||||
|
|
||||||
|
// ...
|
||||||
|
|
||||||
|
// Add this code for firstLayer
|
||||||
|
firstLayer.on('dragstart', (pointer) => {
|
||||||
|
firstDragStartPoint.x = pointer.x;
|
||||||
|
firstDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
firstLayer.on('drag', (pointer) => {
|
||||||
|
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
|
||||||
|
|
||||||
|
if (distance >= 50) {
|
||||||
|
|
||||||
|
firstTextLayer.setVisible(false);
|
||||||
|
firstLayer.setAlpha(1);
|
||||||
|
} else {
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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) {
|
this.input.on('pointerdown', function (pointer) {
|
||||||
isDrawing = true;
|
isDrawing = true;
|
||||||
graphics.moveTo(pointer.x, pointer.y);
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
|
@ -123,9 +275,12 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
graphics.lineTo(pointer.x, pointer.y);
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
graphics.strokePath();
|
graphics.strokePath();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
// Update any game logic if needed
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -32,76 +32,210 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
update: update
|
update: update
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
// backgroundImage.png
|
||||||
const game = new Phaser.Game(config);
|
const game = new Phaser.Game(config);
|
||||||
const customWidth = window.innerWidth;
|
const customWidth = window.innerWidth;
|
||||||
const customHeight = window.innerHeight;
|
const customHeight = window.innerHeight;
|
||||||
let firstLayer, secondLayer, thirdLayer;
|
let firstLayer, secondLayer;
|
||||||
let graphics;
|
let graphics;
|
||||||
let isDrawing = false;
|
let isDrawing = false;
|
||||||
|
|
||||||
|
if(isMobile){
|
||||||
|
cloudeSize = 200;
|
||||||
|
cloudHeight = 340;
|
||||||
|
canvasScale = 0.14
|
||||||
|
canvasHeight = 35;
|
||||||
|
letterHeight = 58;
|
||||||
|
letterScale = 0.85;
|
||||||
|
backgroundScale = 0.8;
|
||||||
|
sunScale = 0.1;
|
||||||
|
sunScalePlus = 0.15;
|
||||||
|
sunWidth = 70;
|
||||||
|
sunHeight = 70;
|
||||||
|
parrotScale = 0.35;
|
||||||
|
parrotScalePlus = 0.38;
|
||||||
|
parrotWidth = 135;
|
||||||
|
parrotHeight = 170;
|
||||||
|
animatedAHeight = 32;
|
||||||
|
} else{
|
||||||
|
cloudeSize = 500;
|
||||||
|
cloudHeight = 250;
|
||||||
|
canvasScale = 0.195;
|
||||||
|
canvasHeight = 20;
|
||||||
|
letterHeight = 50;
|
||||||
|
letterScale = 1;
|
||||||
|
backgroundScale = 1;
|
||||||
|
sunScale = 0.2;
|
||||||
|
sunScalePlus = 0.25;
|
||||||
|
sunWidth = 200;
|
||||||
|
sunHeight = 100;
|
||||||
|
parrotScale = 0.4;
|
||||||
|
parrotScalePlus = 0.44;
|
||||||
|
parrotWidth = 200;
|
||||||
|
parrotHeight = 245;
|
||||||
|
animatedAHeight = 20;
|
||||||
|
}
|
||||||
|
// let hideButton;
|
||||||
|
|
||||||
function preload() {
|
function preload() {
|
||||||
this.load.svg('letterD', '/assets/capital-letter/d.svg');
|
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
|
||||||
|
this.load.svg('letterB', '/assets/capital-letter/d.svg');
|
||||||
this.load.svg('layer1', '/assets/capital-letter/d_l1.svg');
|
this.load.svg('layer1', '/assets/capital-letter/d_l1.svg');
|
||||||
this.load.svg('layer2', '/assets/capital-letter/d_l2.svg');
|
this.load.svg('layer2', '/assets/capital-letter/d_l2.svg');
|
||||||
|
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||||
this.load.audio('tallDown', '/assets/audio/tall-down.mp3');
|
this.load.audio('audioTwo', '/assets/audio/slide-around.mp3');
|
||||||
this.load.audio('slideAround', '/assets/audio/slide-around.mp3');
|
|
||||||
this.load.image('topLogo', '/assets/top_logo.png');
|
this.load.image('topLogo', '/assets/top_logo.png');
|
||||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
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/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');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
function create() {
|
function create() {
|
||||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
|
this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterD');
|
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
|
||||||
|
|
||||||
|
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
|
||||||
|
cloud.setDepth(-1.8);
|
||||||
|
const scrollSpeed = 0.5;
|
||||||
|
this.time.addEvent({
|
||||||
|
loop: true,
|
||||||
|
callback: () => {
|
||||||
|
cloud.tilePositionX += scrollSpeed;
|
||||||
|
},
|
||||||
|
delay: 16, // Adjust the delay for the desired scrolling speed
|
||||||
|
});
|
||||||
|
|
||||||
|
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||||
|
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
|
||||||
|
|
||||||
|
|
||||||
|
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||||
|
const duration = 3000; // Duration of the animation in milliseconds
|
||||||
|
|
||||||
|
// Create a scaling tween
|
||||||
|
this.tweens.add({
|
||||||
|
targets: sun,
|
||||||
|
scaleX: scaleFactor,
|
||||||
|
scaleY: scaleFactor,
|
||||||
|
duration: duration,
|
||||||
|
ease: 'Linear',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
|
||||||
|
const parrotduration = 2500;
|
||||||
|
this.tweens.add({
|
||||||
|
targets: parrot,
|
||||||
|
scaleX: parrotscaleFactor + 0.004,
|
||||||
|
scaleY: parrotscaleFactor,
|
||||||
|
duration: parrotduration,
|
||||||
|
ease: 'Redial',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||||
|
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||||
|
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').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',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
hideButton.setInteractive().on('pointerdown', () => {
|
||||||
|
isDemoButtonClicked = false;
|
||||||
|
firstScreen.setVisible(false);
|
||||||
|
hideButton.setVisible(false); // Hide the "Hide" button
|
||||||
|
demoButton.setVisible(true); // Show the "Demo" button
|
||||||
|
graphics.setVisible(true);
|
||||||
|
animatedLetter.setVisible(false);
|
||||||
|
});
|
||||||
|
hideButton.setVisible(false);
|
||||||
|
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
|
||||||
|
font: '900 24px quicksand',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
demoButton.setInteractive().on('pointerdown', () => {
|
||||||
|
graphics.setVisible(false);
|
||||||
|
firstScreen.setVisible(true);
|
||||||
|
demoButton.setVisible(false); // Hide the "Demo" button
|
||||||
|
hideButton.setVisible(true); // Show the "Hide" button
|
||||||
|
animatedLetter.setVisible(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
const baseFontSize = 20;
|
const baseFontSize = 20;
|
||||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
|
||||||
|
|
||||||
this.time.delayedCall(2000, () => {
|
// Play the video
|
||||||
this.tweens.add({
|
animatedLetter.play();
|
||||||
targets: firstScreen,
|
animatedLetter.setVisible(false);
|
||||||
alpha: 0,
|
|
||||||
scaleX: 0.5,
|
// You can set additional properties for the video, such as loop and mute:
|
||||||
scaleY: 0.5,
|
animatedLetter.setLoop(true); // Loop the video
|
||||||
duration: 1000,
|
animatedLetter.setMute(false); // Unmute the video
|
||||||
onComplete: () => {
|
animatedLetter.on('complete', function () {
|
||||||
firstScreen.setVisible(false);
|
// Video playback is complete
|
||||||
firstScreen.setScale(1);
|
// You can add your code here for what to do when the video finishes.
|
||||||
showLayersWithFadeIn.call(this);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}, [], this);
|
|
||||||
}
|
|
||||||
function showLayersWithFadeIn() {
|
|
||||||
this.tweens.add({
|
|
||||||
targets: [firstLayer, secondLayer, thirdLayer],
|
|
||||||
alpha: 1,
|
|
||||||
duration: 1000, // Duration of the tween in milliseconds
|
|
||||||
delay: 500, // Delay before the fade-in starts
|
|
||||||
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
|
|
||||||
});
|
});
|
||||||
|
|
||||||
let textX, textY;
|
|
||||||
|
|
||||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
let textX, textY;
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
|
||||||
|
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||||||
|
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||||
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down', { font: '700 40px quicksand', fill: '#05b3a4'});
|
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantLeftAudio = this.sound.add('tallDown');
|
const audioOneAudio = this.sound.add('audioOne');
|
||||||
slantLeftAudio.play();
|
audioOneAudio.play();
|
||||||
firstLayer.setDepth(1);
|
firstLayer.setDepth(1);
|
||||||
firstLayer.setAlpha(0.5);
|
firstLayer.setAlpha(0.5);
|
||||||
firstLayer.setInteractive({ draggable: true });
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
|
||||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||||
const secondTextLayer = this.add.text(textX, textY, '2. Slide Around', { font: '700 40px quicksand', fill: '#05b3a4'});
|
const secondTextLayer = this.add.text(textX, textY, '2. Slide Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||||
const slantRightAudio = this.sound.add('slideAround');
|
const audioTwoAudio = this.sound.add('audioTwo');
|
||||||
secondTextLayer.setVisible(false);
|
secondTextLayer.setVisible(false);
|
||||||
secondLayer.setDepth(1);
|
secondLayer.setDepth(1);
|
||||||
secondLayer.setAlpha(0.5);
|
secondLayer.setAlpha(0.5);
|
||||||
|
|
@ -109,35 +243,61 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
secondLayer.setVisible(false);
|
secondLayer.setVisible(false);
|
||||||
|
|
||||||
|
|
||||||
firstLayer.on('drag', (pointer) => {
|
// Add these variables to keep track of start points
|
||||||
if (pointer.isDown) {
|
let firstDragStartPoint = { x: 0, y: 0 };
|
||||||
firstTextLayer.setVisible(false);
|
let secondDragStartPoint = { x: 0, y: 0 };
|
||||||
secondTextLayer.setVisible(true);
|
|
||||||
slantRightAudio.play();
|
|
||||||
secondLayer.setVisible(true);
|
|
||||||
firstLayer.setAlpha(1);
|
|
||||||
secondLayer.setAlpha(0.5);
|
|
||||||
} else {
|
|
||||||
firstLayer.setAlpha(0.5);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
secondLayer.on('drag', (pointer) => {
|
// ...
|
||||||
if (pointer.isDown) {
|
|
||||||
secondTextLayer.setVisible(false);
|
// Add this code for firstLayer
|
||||||
secondLayer.setAlpha(1);
|
firstLayer.on('dragstart', (pointer) => {
|
||||||
|
firstDragStartPoint.x = pointer.x;
|
||||||
|
firstDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
firstLayer.on('drag', (pointer) => {
|
||||||
|
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();
|
||||||
|
secondLayer.setVisible(true);
|
||||||
|
firstLayer.setAlpha(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
} else {
|
} else {
|
||||||
secondLayer.setAlpha(0.5);
|
firstLayer.setAlpha(0.5);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
``
|
||||||
|
// Repeat the above code for secondLayer and thirdLayer
|
||||||
|
|
||||||
|
// Add this code for secondLayer
|
||||||
|
secondLayer.on('dragstart', (pointer) => {
|
||||||
|
secondDragStartPoint.x = pointer.x;
|
||||||
|
secondDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
secondLayer.on('drag', (pointer) => {
|
||||||
|
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
|
||||||
|
|
||||||
|
if (distance >=100) {
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
secondLayer.setAlpha(1);
|
||||||
|
} else {
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
graphics = this.add.graphics();
|
graphics = this.add.graphics();
|
||||||
graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
|
graphics.setMask(mask);
|
||||||
|
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||||
this.input.on('pointerdown', function (pointer) {
|
this.input.on('pointerdown', function (pointer) {
|
||||||
isDrawing = true;
|
isDrawing = true;
|
||||||
graphics.moveTo(pointer.x, pointer.y);
|
graphics.moveTo(pointer.x, pointer.y);
|
||||||
|
console.log("Start Position", pointer.x, pointer.y)
|
||||||
});
|
});
|
||||||
|
|
||||||
this.input.on('pointerup', function () {
|
this.input.on('pointerup', function () {
|
||||||
|
|
@ -152,7 +312,8 @@ import Layout from "../../layouts/Layout.astro";
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function update() {
|
function update() {
|
||||||
// Update any game logic if needed
|
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -0,0 +1,355 @@
|
||||||
|
---
|
||||||
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
---
|
||||||
|
<Layout title="Guided Letter Tracing Game">
|
||||||
|
<main>
|
||||||
|
<div>
|
||||||
|
</div>
|
||||||
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||||
|
</main>
|
||||||
|
</Layout>
|
||||||
|
<script is:inline>
|
||||||
|
const isMobile = window.innerWidth <= 768;
|
||||||
|
const drawingZone = {
|
||||||
|
x: isMobile ? 0 : window.innerWidth / 4,
|
||||||
|
y: window.innerHeight / 4,
|
||||||
|
width: isMobile ? window.innerWidth : window.innerWidth / 2,
|
||||||
|
height: window.innerHeight / 2,
|
||||||
|
};
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
type: Phaser.AUTO,
|
||||||
|
width: window.innerWidth,
|
||||||
|
height: window.innerHeight,
|
||||||
|
backgroundColor: 0xFFFFFF,
|
||||||
|
scale: {
|
||||||
|
mode: Phaser.Scale.FIT,
|
||||||
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||||
|
},
|
||||||
|
scene: {
|
||||||
|
preload: preload,
|
||||||
|
create: create,
|
||||||
|
update: update
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// backgroundImage.png
|
||||||
|
const game = new Phaser.Game(config);
|
||||||
|
const customWidth = window.innerWidth;
|
||||||
|
const customHeight = window.innerHeight;
|
||||||
|
let firstLayer, secondLayer, thirdLayer;
|
||||||
|
let graphics;
|
||||||
|
let isDrawing = false;
|
||||||
|
|
||||||
|
if(isMobile){
|
||||||
|
cloudeSize = 200;
|
||||||
|
cloudHeight = 340;
|
||||||
|
canvasScale = 0.14
|
||||||
|
canvasHeight = 35;
|
||||||
|
letterHeight = 60;
|
||||||
|
letterScale = 0.85;
|
||||||
|
backgroundScale = 0.8;
|
||||||
|
sunScale = 0.1;
|
||||||
|
sunScalePlus = 0.15;
|
||||||
|
sunWidth = 70;
|
||||||
|
sunHeight = 70;
|
||||||
|
parrotScale = 0.35;
|
||||||
|
parrotScalePlus = 0.38;
|
||||||
|
parrotWidth = 135;
|
||||||
|
parrotHeight = 170;
|
||||||
|
animatedAHeight = 32;
|
||||||
|
} else{
|
||||||
|
cloudeSize = 500;
|
||||||
|
cloudHeight = 250;
|
||||||
|
canvasScale = 0.195;
|
||||||
|
canvasHeight = 20;
|
||||||
|
letterHeight = 50;
|
||||||
|
letterScale = 1;
|
||||||
|
backgroundScale = 1;
|
||||||
|
sunScale = 0.2;
|
||||||
|
sunScalePlus = 0.25;
|
||||||
|
sunWidth = 200;
|
||||||
|
sunHeight = 100;
|
||||||
|
parrotScale = 0.4;
|
||||||
|
parrotScalePlus = 0.44;
|
||||||
|
parrotWidth = 200;
|
||||||
|
parrotHeight = 245;
|
||||||
|
animatedAHeight = 20;
|
||||||
|
}
|
||||||
|
function preload() {
|
||||||
|
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
|
||||||
|
this.load.svg('letterE', '/assets/capital-letter/e.svg');
|
||||||
|
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.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/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');
|
||||||
|
}
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
|
||||||
|
this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||||
|
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
|
||||||
|
|
||||||
|
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
|
||||||
|
cloud.setDepth(-1.8);
|
||||||
|
const scrollSpeed = 0.5;
|
||||||
|
this.time.addEvent({
|
||||||
|
loop: true,
|
||||||
|
callback: () => {
|
||||||
|
cloud.tilePositionX += scrollSpeed;
|
||||||
|
},
|
||||||
|
delay: 16, // Adjust the delay for the desired scrolling speed
|
||||||
|
});
|
||||||
|
|
||||||
|
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||||
|
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
|
||||||
|
|
||||||
|
|
||||||
|
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||||
|
const duration = 3000; // Duration of the animation in milliseconds
|
||||||
|
|
||||||
|
// Create a scaling tween
|
||||||
|
this.tweens.add({
|
||||||
|
targets: sun,
|
||||||
|
scaleX: scaleFactor,
|
||||||
|
scaleY: scaleFactor,
|
||||||
|
duration: duration,
|
||||||
|
ease: 'Linear',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
|
||||||
|
const parrotduration = 2500;
|
||||||
|
this.tweens.add({
|
||||||
|
targets: parrot,
|
||||||
|
scaleX: parrotscaleFactor + 0.004,
|
||||||
|
scaleY: parrotscaleFactor,
|
||||||
|
duration: parrotduration,
|
||||||
|
ease: 'Redial',
|
||||||
|
yoyo: true, // Makes the animation play in reverse
|
||||||
|
repeat: -1 // Repeat indefinitely
|
||||||
|
});
|
||||||
|
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||||
|
this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||||
|
const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').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',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
hideButton.setInteractive().on('pointerdown', () => {
|
||||||
|
isDemoButtonClicked = false;
|
||||||
|
firstScreen.setVisible(false);
|
||||||
|
hideButton.setVisible(false); // Hide the "Hide" button
|
||||||
|
demoButton.setVisible(true); // Show the "Demo" button
|
||||||
|
graphics.setVisible(true);
|
||||||
|
animatedLetter.setVisible(false);
|
||||||
|
});
|
||||||
|
hideButton.setVisible(false);
|
||||||
|
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
|
||||||
|
font: '900 24px quicksand',
|
||||||
|
fill: '#05b3a4',
|
||||||
|
backgroundColor: '#7c4c23',
|
||||||
|
padding: { x: 20, y: 10 },
|
||||||
|
borderRadius: '15px', // Border radius
|
||||||
|
shadow: {
|
||||||
|
offsetX: 2, // X offset for the shadow
|
||||||
|
offsetY: 2, // Y offset for the shadow
|
||||||
|
color: '#000', // Shadow color
|
||||||
|
blur: 5, // Shadow blur
|
||||||
|
fill: true // Apply shadow to fill (background color)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
demoButton.setInteractive().on('pointerdown', () => {
|
||||||
|
graphics.setVisible(false);
|
||||||
|
firstScreen.setVisible(true);
|
||||||
|
demoButton.setVisible(false); // Hide the "Demo" button
|
||||||
|
hideButton.setVisible(true); // Show the "Hide" button
|
||||||
|
animatedLetter.setVisible(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||||
|
const baseFontSize = 20;
|
||||||
|
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||||
|
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : E', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||||
|
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
|
||||||
|
|
||||||
|
// Play the video
|
||||||
|
animatedLetter.play();
|
||||||
|
animatedLetter.setVisible(false);
|
||||||
|
|
||||||
|
// You can set additional properties for the video, such as loop and mute:
|
||||||
|
animatedLetter.setLoop(true); // Loop the video
|
||||||
|
animatedLetter.setMute(false); // Unmute the video
|
||||||
|
animatedLetter.on('complete', function () {
|
||||||
|
// Video playback is complete
|
||||||
|
// You can add your code here for what to do when the video finishes.
|
||||||
|
});
|
||||||
|
|
||||||
|
let textX, textY;
|
||||||
|
|
||||||
|
firstLayer = this.add.image(customWidth / 2 - 20, 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 audioOneAudio = this.sound.add('audioOne');
|
||||||
|
audioOneAudio.play();
|
||||||
|
firstLayer.setDepth(1);
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
firstLayer.setInteractive({ draggable: true });
|
||||||
|
|
||||||
|
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 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 - 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');
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
thirdLayer.setDepth(1.1);
|
||||||
|
// thirdLayer.setScale(1.15);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setInteractive({ draggable: true });
|
||||||
|
thirdLayer.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 };
|
||||||
|
|
||||||
|
// ...
|
||||||
|
|
||||||
|
// Add this code for firstLayer
|
||||||
|
firstLayer.on('dragstart', (pointer) => {
|
||||||
|
firstDragStartPoint.x = pointer.x;
|
||||||
|
firstDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
firstLayer.on('drag', (pointer) => {
|
||||||
|
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();
|
||||||
|
secondLayer.setVisible(true);
|
||||||
|
firstLayer.setAlpha(1);
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
firstLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Repeat the above code for secondLayer and thirdLayer
|
||||||
|
|
||||||
|
// Add this code for secondLayer
|
||||||
|
secondLayer.on('dragstart', (pointer) => {
|
||||||
|
secondDragStartPoint.x = pointer.x;
|
||||||
|
secondDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
secondLayer.on('drag', (pointer) => {
|
||||||
|
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
|
||||||
|
|
||||||
|
if (distance >= 100) {
|
||||||
|
secondTextLayer.setVisible(false);
|
||||||
|
thirdTextLayer.setVisible(true);
|
||||||
|
audioThreeAudio.play();
|
||||||
|
thirdLayer.setVisible(true);
|
||||||
|
secondLayer.setAlpha(1);
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
} else {
|
||||||
|
secondLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Add this code for thirdLayer
|
||||||
|
thirdLayer.on('dragstart', (pointer) => {
|
||||||
|
thirdDragStartPoint.x = pointer.x;
|
||||||
|
thirdDragStartPoint.y = pointer.y;
|
||||||
|
});
|
||||||
|
|
||||||
|
thirdLayer.on('drag', (pointer) => {
|
||||||
|
const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
|
||||||
|
|
||||||
|
if (distance >= 100) {
|
||||||
|
thirdLayer.setAlpha(1);
|
||||||
|
thirdTextLayer.setVisible(false);
|
||||||
|
} else {
|
||||||
|
thirdLayer.setAlpha(0.5);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
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);
|
||||||
|
console.log("Start Position", pointer.x, pointer.y)
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointerup', function () {
|
||||||
|
isDrawing = false;
|
||||||
|
});
|
||||||
|
|
||||||
|
this.input.on('pointermove', function (pointer) {
|
||||||
|
if (!isDrawing) return;
|
||||||
|
|
||||||
|
graphics.lineTo(pointer.x, pointer.y);
|
||||||
|
graphics.strokePath();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Start Position 626 317
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue