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

complete all letters and numbers button new position and add start button

pull/5/head
Dev 1 2023-10-18 13:43:58 +05:30
parent 167f8723cf
commit dc2a3f8482
26 changed files with 1155 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/pages/small-letter/a.astro
View File

@ -52,8 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedAHeight = 32; animatedAHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -66,8 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedAHeight = 20; animatedAHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -189,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
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 : a', { 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); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -206,11 +216,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 6 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -291,6 +301,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

37
src/pages/small-letter/b.astro
View File

@ -53,7 +53,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedBHeight = 32; animatedBHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -66,8 +72,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedBHeight = 20; animatedBHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -85,7 +96,6 @@ import Layout from "../../layouts/Layout.astro";
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('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'); this.load.image('canvasStand', '/assets/stand2.png');
@ -189,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
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 : b', { 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 + animatedBHeight, 'animatedB').setDepth(2).setScale(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -210,7 +220,7 @@ import Layout from "../../layouts/Layout.astro";
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -291,6 +301,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

37
src/pages/small-letter/c.astro
View File

@ -53,7 +53,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.6;
animatedCHeight = 32; animatedCHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -67,7 +73,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedCHeight = 20; animatedCHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -187,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
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 : c', { 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 : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -204,11 +216,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 7 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -258,6 +270,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

33
src/pages/small-letter/d.astro
View File

@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideScale = 0.6 animatedVideScale = 0.6
animatedDHeight = 32; animatedDHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideScale = 0.9; animatedVideScale = 0.7;
animatedDHeight = 20; animatedDHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -293,6 +303,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

45
src/pages/small-letter/e.astro
View File

@ -46,28 +46,40 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 30; letterHeight = 30;
letterScale = 1; letterScale = 1.2;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.57;
animatedEHeight = 32; animatedEHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterHeight = 20; letterHeight = 20;
letterScale = 1; letterScale = 1.3;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedEHeight = 20; animatedEHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -93,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
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 : b", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); // 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); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@ -188,8 +200,8 @@ import Layout from "../../layouts/Layout.astro";
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 : b', { 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 : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -206,11 +218,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 6 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -291,6 +303,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

39
src/pages/small-letter/f.astro
View File

@ -52,8 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.57;
animatedFHeight = 32; animatedFHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -66,8 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.65;
animatedFHeight = 20; animatedFHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -189,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
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 : f', { 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 : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -206,11 +216,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 6 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -291,6 +301,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

37
src/pages/small-letter/g.astro
View File

@ -53,8 +53,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.63; animatedVideoScale = 0.62;
animatedGHeight = 32; animatedGHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7; animatedVideoScale = 0.65;
animatedGHeight = 20; animatedGHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -208,8 +218,8 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 6 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.play(); audioOneAudio.play();
@ -293,6 +303,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

34
src/pages/small-letter/h.astro
View File

@ -53,8 +53,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.63; animatedVideoScale = 0.58;
animatedHHeight = 32; animatedHHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7; animatedVideoScale = 0.6;
animatedHHeight = 20; animatedHHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -87,7 +97,6 @@ import Layout from "../../layouts/Layout.astro";
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('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'); this.load.image('canvasStand', '/assets/stand2.png');
@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

40
src/pages/small-letter/i.astro
View File

@ -46,7 +46,7 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterIeight = 50; letterIeight = 50;
letterScale = 1; letterScale = 1.2;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
@ -55,13 +55,18 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.5; animatedVideoScale = 0.5;
animatedIHeight = 32; animatedIHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterIeight = 30; letterIeight = 30;
letterScale = 1; letterScale = 1.3;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
@ -69,7 +74,12 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.55; animatedVideoScale = 0.55;
animatedIHeight = 20; animatedIHeight = 10;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -208,11 +218,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 5.5 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

42
src/pages/small-letter/j.astro
View File

@ -53,15 +53,20 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.5; animatedVideoScale = 0.6;
animatedJHeight = 32; animatedJHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterJeight = 0; letterJeight = - 10;
letterScale = 1; letterScale = 1.1;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.7; animatedVideoScale = 0.7;
animatedJHeight = 20; animatedJHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -87,7 +97,6 @@ import Layout from "../../layouts/Layout.astro";
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('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'); this.load.image('canvasStand', '/assets/stand2.png');
@ -95,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
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 : i", { font: '700 40px quicksand', fill: '#05b3a4', }); this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9); // 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); const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
@ -190,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
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 : i', { 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 : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
@ -212,7 +221,7 @@ import Layout from "../../layouts/Layout.astro";
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

36
src/pages/small-letter/k.astro
View File

@ -58,7 +58,12 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedKHeight = 35; animatedKHeight = 35;
animatedKScale = 0.65; animatedKScale = 0.6;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -73,7 +78,12 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 100; sunHeight = 100;
animatedKHeight = 20; animatedKHeight = 20;
animatedKScale = 0.8; animatedKScale = 0.75;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedK', '/assets/animated-letter/small_k.mp4'); this.load.video('animatedK', '/assets/animated-letter/small_k.mp4');
@ -210,10 +220,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 20, 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.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -325,6 +335,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

300
src/pages/small-letter/l.astro Normal file
View File

@ -0,0 +1,300 @@
---
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 = 55;
letterScale = 0.85;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animatedVideoScale = 0.6;
animatedLHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 30;
letterScale = 1;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animatedVideoScale = 0.7;
animatedLHeight = 0;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
}
// let hideButton;
function preload() {
this.load.video('animatedL', '/assets/animated-letter/small_l.mp4');
this.load.svg('letterL', '/assets/small-letter/ls.svg');
this.load.svg('layer1', '/assets/small-letter/ls.svg');
this.load.audio('audioOne', '/assets/audio/tall-down.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('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 : l", { 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 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 backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterL').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedL').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(helpButtonWidth, helpButtonHeight, "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(helpButtonWidth, helpButtonHeight, "Demo", {
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 : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
// 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 + 50, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ 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 });
// 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) {
isDrawing = true;
graphics.moveTo(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();
});
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
}
function update() {
}
</script>

52
src/pages/small-letter/m.astro
View File

@ -50,30 +50,38 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 50; letterHeight = 50;
letterScale = 1; letterScale = 1.1;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedMHeight = 35; animatedMHeight = 35;
animatedMScale = 0.5; animatedMScale = 0.5;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterHeight = 40; letterHeight = 40;
letterScale = 1.2; letterScale = 1.3;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedMHeight = 20; animatedMHeight = 20;
animatedMScale = 0.66; animatedMScale = 0.6;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedM', '/assets/animated-letter/small_m.mp4'); this.load.video('animatedM', '/assets/animated-letter/small_m.mp4');
@ -90,8 +98,6 @@ import Layout from "../../layouts/Layout.astro";
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('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'); this.load.image('canvasStand', '/assets/stand2.png');
@ -129,7 +135,7 @@ import Layout from "../../layouts/Layout.astro";
}); });
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 + 20, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
@ -207,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 5 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 + 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale); 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. Roll Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Roll Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -227,7 +233,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer.setInteractive({ draggable: true }); secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false); secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale); 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. Roll Down', { font: '700 40px quicksand', fill: '#05b3a4'}); const thirdTextLayer = this.add.text(textX, textY, '3. Roll Down', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioThreeAudio = this.sound.add('audioTwo'); const audioThreeAudio = this.sound.add('audioTwo');
@ -324,6 +330,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

42
src/pages/small-letter/n.astro
View File

@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.63; animatedVideoScale = 0.63;
animatedNHeight = 32; animatedNHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.7; animatedVideoScale = 0.7;
animatedNHeight = 20; animatedNHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -127,8 +137,8 @@ import Layout from "../../layouts/Layout.astro";
}); });
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 + 45, customHeight / 2 + letterNeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 60, customHeight / 2 + letterNeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'letterN').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 60, customHeight / 2 + letterNeight, 'letterN').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterNeight, 'animatedN').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterNeight, 'animatedN').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 60, customHeight / 2 + letterNeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 5 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 + 45, customHeight / 2 + letterNeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 60, customHeight / 2 + letterNeight, '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. Roll Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Roll Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -293,6 +303,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

34
src/pages/small-letter/o.astro
View File

@ -52,8 +52,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.61;
animatedOHeight = 32; animatedOHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -66,8 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7;
animatedOHeight = 20; animatedOHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -187,7 +197,7 @@ import Layout from "../../layouts/Layout.astro";
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 : o', { 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 : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(0.73); const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
// Play the video // Play the video
animatedLetter.play(); animatedLetter.play();
@ -258,6 +268,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

50
src/pages/small-letter/p.astro
View File

@ -45,16 +45,20 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterPeight = 20; letterPeight = 10;
letterScale = 0.8; letterScale = 0.9;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.58;
animatedPHeight = 40;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
animatedVideoScale = 0.63; startButtonHeight = customHeight / 1.1;
animatedPHeight = 32; startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -67,9 +71,13 @@ import Layout from "../../layouts/Layout.astro";
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.63;
animatedVideoScale = 0.7;
animatedPHeight = 20; animatedPHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -87,7 +95,6 @@ import Layout from "../../layouts/Layout.astro";
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('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'); this.load.image('canvasStand', '/assets/stand2.png');
@ -127,8 +134,8 @@ import Layout from "../../layouts/Layout.astro";
}); });
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 + 20, customHeight / 2 + letterPeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 30, customHeight / 2 + letterPeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'letterP').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterPeight, 'letterP').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterPeight, 'animatedP').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterPeight, 'animatedP').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -207,17 +214,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 + 20, customHeight / 2 + letterPeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterPeight, '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. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -254,7 +261,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -293,6 +299,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

54
src/pages/small-letter/q.astro
View File

@ -45,16 +45,21 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterQeight = 20; letterQeight = 0;
letterScale = 0.8; letterScale = 0.9;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.63; animatedVideoScale = 0.6;
animatedQHeight = 32; animatedQHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7; animatedVideoScale = 0.65;
animatedQHeight = 20; animatedQHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -87,7 +97,6 @@ import Layout from "../../layouts/Layout.astro";
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('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'); this.load.image('canvasStand', '/assets/stand2.png');
@ -127,8 +136,8 @@ import Layout from "../../layouts/Layout.astro";
}); });
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 + letterQeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 - 45, customHeight / 2 + letterQeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'letterQ').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 - 45, customHeight / 2 + letterQeight, 'letterQ').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'animatedQ').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'animatedQ').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -205,19 +214,19 @@ import Layout from "../../layouts/Layout.astro";
// You can add your code here for what to do when the video finishes. // You can add your code here for what to do when the video finishes.
}); });
let textX, textY; let textX, textY; - 35
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 45, customHeight / 2 + letterQeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 6.5 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 + letterQeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 - 45, customHeight / 2 + letterQeight, '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. Down Hook',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Down Hook',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -254,7 +263,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -293,6 +301,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

48
src/pages/small-letter/r.astro
View File

@ -46,30 +46,40 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterReight = 20; letterReight = 20;
letterScale = 1; letterScale = 1.2;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedVideoScale = 0.63; animatedVideoScale = 0.5;
animatedRHeight = 32; animatedRHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterReight = -10; letterReight = -10;
letterScale = 1; letterScale = 1.2;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedVideoScale = 0.7; animatedVideoScale = 0.6;
animatedRHeight = 20; animatedRHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -127,8 +137,8 @@ import Layout from "../../layouts/Layout.astro";
}); });
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 + 30, customHeight / 2 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 + 40, customHeight / 2 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'animatedR').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'animatedR').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterReight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 5 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 + 30, customHeight / 2 + letterReight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 + 40, customHeight / 2 + letterReight, '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. Roll',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Roll',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -293,6 +303,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

38
src/pages/small-letter/s.astro
View File

@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterHeight = 40; letterHeight = 35;
letterScale = 1.3; letterScale = 1.3;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
@ -55,12 +55,17 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.6; animatedVideoScale = 0.6;
animatedSHeight = 32; animatedSHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterHeight = 30; letterHeight = 20;
letterScale = 1.5; letterScale = 1.5;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.73; animatedVideoScale = 0.73;
animatedSHeight = 20; animatedSHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
@ -206,10 +216,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 13 : customWidth * 0.75; textX = isMobile ? customWidth / 13 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -239,8 +249,6 @@ textY = isMobile ? customHeight / 5 : customHeight / 2.4;
} }
}); });
graphics = this.add.graphics(); graphics = this.add.graphics();
graphics.setMask(mask); 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)
@ -259,6 +267,24 @@ textY = isMobile ? customHeight / 5 : customHeight / 2.4;
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }

47
src/pages/small-letter/t.astro
View File

@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterReight = 50; letterTeight = 60;
letterScale = 1.3; letterScale = 1.3;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
@ -55,12 +55,17 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.63; animatedVideoScale = 0.63;
animatedTHeight = 32; animatedTHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterReight = 45; letterTeight = 35;
letterScale = 1.3; letterScale = 1.3;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.7; animatedVideoScale = 0.7;
animatedTHeight = 20; animatedTHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -127,9 +137,9 @@ import Layout from "../../layouts/Layout.astro";
}); });
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 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2, customHeight / 2 + letterTeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'letterR').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'animatedT').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterTeight, 'animatedT').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
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 audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 + letterReight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, '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. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -293,6 +302,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

31
src/pages/small-letter/u.astro
View File

@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.63; animatedVideoScale = 0.63;
animatedUHeight = 32; animatedUHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.7; animatedVideoScale = 0.7;
animatedUHeight = 20; animatedUHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
textY = isMobile ? customHeight / 6 : customHeight / 2; textY = isMobile ? customHeight / 6 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Small Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Small Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -293,6 +302,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

39
src/pages/small-letter/v.astro
View File

@ -46,7 +46,7 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterVHeight = 35; letterVHeight = 35;
letterScale = 1.3; letterScale = 1.5;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
@ -55,13 +55,18 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.63; animatedVideoScale = 0.63;
animatedVHeight = 32; animatedVHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterVHeight = 20; letterVHeight = 20;
letterScale = 1.3; letterScale = 1.5;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.7; animatedVideoScale = 0.7;
animatedVHeight = 20; animatedVHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -207,11 +217,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 + 30 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -253,7 +263,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -292,6 +301,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

35
src/pages/small-letter/w.astro
View File

@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.6; animatedVideoScale = 0.6;
animatedWHeight = 32; animatedWHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedVideoScale = 0.73; animatedVideoScale = 0.73;
animatedWHeight = 20; animatedWHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedW', '/assets/animated-letter/small_w.mp4'); this.load.video('animatedW', '/assets/animated-letter/small_w.mp4');
@ -207,11 +217,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 + 40: customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -357,8 +367,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
// Start Position 626 317
} }

39
src/pages/small-letter/x.astro
View File

@ -46,7 +46,7 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterXHeight = 35; letterXHeight = 35;
letterScale = 1.3; letterScale = 1.5;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
sunScalePlus = 0.15; sunScalePlus = 0.15;
@ -55,21 +55,31 @@ import Layout from "../../layouts/Layout.astro";
animatedXideoScale = 0.63; animatedXideoScale = 0.63;
animatedXHeight = 32; animatedXHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterXHeight = 20; letterXHeight = 20;
letterScale = 1.3; letterScale = 1.5;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
sunScalePlus = 0.25; sunScalePlus = 0.25;
sunWidth = 200; sunWidth = 200;
sunHeight = 100; sunHeight = 100;
animatedXideoScale = 0.7; animatedXideoScale = 0.6;
animatedXHeight = 20; animatedXHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -209,10 +219,10 @@ import Layout from "../../layouts/Layout.astro";
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -293,6 +302,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

48
src/pages/small-letter/y.astro
View File

@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
cloudHeight = 340; cloudHeight = 340;
canvasScale = 0.14 canvasScale = 0.14
canvasHeight = 35; canvasHeight = 35;
letterYHeight = - 10; letterYHeight = - 20;
letterScale = 1; letterScale = 1;
backgroundScale = 0.8; backgroundScale = 0.8;
sunScale = 0.1; sunScale = 0.1;
@ -53,14 +53,19 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 70; sunWidth = 70;
sunHeight = 70; sunHeight = 70;
animatedYideoScale = 0.63; animatedYideoScale = 0.6;
animatedYHeight = 32; animatedYHeight = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
canvasScale = 0.195; canvasScale = 0.195;
canvasHeight = 20; canvasHeight = 20;
letterYHeight = - 30; letterYHeight = - 40;
letterScale = 1.2; letterScale = 1.2;
backgroundScale = 1; backgroundScale = 1;
sunScale = 0.2; sunScale = 0.2;
@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
animatedYideoScale = 0.7; animatedYideoScale = 0.7;
animatedYHeight = 20; animatedYHeight = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
// let hideButton; // let hideButton;
@ -127,8 +137,8 @@ import Layout from "../../layouts/Layout.astro";
}); });
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 + letterYHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale); this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'letterY').setDepth(2).setScale(letterScale); const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'letterY').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterYHeight, 'animatedY').setDepth(2); canvasStand // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterYHeight, 'animatedY').setDepth(2); canvasStand
firstScreen.setVisible(false); firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale); // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 + letterYHeight, 'layer2').setScale(letterScale); secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, '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 Tail',{ font: '700 40px quicksand', fill: '#05b3a4'}); const secondTextLayer = this.add.text(textX, textY, '2. Slant Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioTwoAudio = this.sound.add('audioTwo'); const audioTwoAudio = this.sound.add('audioTwo');
@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
}); });
``
// Repeat the above code for secondLayer and thirdLayer // Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer // Add this code for secondLayer
@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {

36
src/pages/small-letter/z.astro
View File

@ -58,7 +58,12 @@ import Layout from "../../layouts/Layout.astro";
sunHeight = 70; sunHeight = 70;
animatedZHeight = 35; animatedZHeight = 35;
animatedZScale = 0.5; animatedZScale = 0.6;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
startButtonHeight = customHeight / 1.1;
startButtonWidth = customWidth / 2 - 100;
} else{ } else{
cloudeSize = 500; cloudeSize = 500;
cloudHeight = 250; cloudHeight = 250;
@ -74,6 +79,11 @@ import Layout from "../../layouts/Layout.astro";
animatedZHeight = 20; animatedZHeight = 20;
animatedZScale = 0.66; animatedZScale = 0.66;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
startButtonHeight = customHeight / 2 - 20;
startButtonWidth = customWidth / 1.32;
} }
function preload() { function preload() {
this.load.video('animatedZ', '/assets/animated-letter/small_z.mp4'); this.load.video('animatedZ', '/assets/animated-letter/small_z.mp4');
@ -208,11 +218,11 @@ import Layout from "../../layouts/Layout.astro";
let textX, textY; let textX, textY;
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale); firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; textX = isMobile ? customWidth / 4 + 40 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4; textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'}); const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
const audioOneAudio = this.sound.add('audioOne'); const audioOneAudio = this.sound.add('audioOne');
audioOneAudio.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 });
@ -324,6 +334,24 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y); graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath(); graphics.strokePath();
}); });
let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
font: '900 24px Quicksand',
fill: '#05b3a4',
backgroundColor : '#7c4c23',
padding: {x: 20, y: 10},
shadow: {
offsetX : 2,
offsetY : 2,
color: '#000',
blur: 5,
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
firstTextLayer.setVisible(true);
})
} }
function update() { function update() {