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

cc

pull/5/head
Dev 1 2023-10-09 21:17:57 +05:30
parent 31f0b411f5
commit df9a03515e
6 changed files with 50 additions and 368 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/assets/beanie.astro Normal file
View File

@ -0,0 +1,10 @@
<main>
<div>
<model-viewer src="/assets/new_beanie.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="poster.webp" shadow-intensity="1" autoplay>
<div class="progress-bar hide" slot="progress-bar">
<div class="update-bar"></div>
</div>
</model-viewer>
</div>
</main>
<script is:inline type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>

BIN
public/assets/beanieImage.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 100 KiB

BIN
public/assets/canvas3.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 240 KiB

BIN
public/assets/new_beanie.glb Executable file
View File

Binary file not shown.

13
src/pages/guided-tracing/A.astro
View File

@ -71,9 +71,9 @@ import Layout from "../../layouts/Layout.astro";
sunWidth = 200;
sunHeight = 100;
parrotScale = 0.4;
parrotScalePlus = 0.44;
parrotScalePlus = 0.50;
parrotWidth = 200;
parrotHeight = 245;
parrotHeight = 255;
animatedAHeight = 20;
animatedAScale = 0.73;
}
@ -93,7 +93,8 @@ import Layout from "../../layouts/Layout.astro";
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('parrot', '/assets/parrot.png');
// this.load.image('parrot', '/assets/parrot.png');
this.load.image('parrot', '/assets/beanieImage.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
@ -218,8 +219,7 @@ import Layout from "../../layouts/Layout.astro";
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.
// add function after end video;
});
let textX, textY;
@ -345,9 +345,6 @@ import Layout from "../../layouts/Layout.astro";
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
// Start Position 626 317
}
function update() {

395
src/pages/guided-tracing/tt.astro
View File

@ -9,372 +9,47 @@ import Layout from "../../layouts/Layout.astro";
</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.23
canvasHeight = 154;
letterHeight = 70;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.27;
canvasHeight = 160;
letterHeight = 50;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
}
// let hideButton;
// Define the sprite sheet properties
const frameWidth = 32; // Adjust based on your sprite sheet
const frameHeight = 32; // Adjust based on your sprite sheet
const numFrames = 8; // Adjust based on the number of frames in your sprite sheet
const frameRate = 10; // Adjust the speed of the animation
// Preload function to load assets
function preload() {
this.load.video('animatedA', '/assets/animated-letter/a.mp4');
this.load.svg('letterA', '/assets/capital-letter/a.svg');
this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
this.load.audio('slide', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
// this.load.image('backgroundImage', '/assets/backgroundImage2.png');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas2.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.spritesheet('playerWalk', '/assets/beanieImage.png', {
frameWidth: frameWidth,
frameHeight: frameHeight
});
}
// bgMobile.png
function create() {
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
// 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 sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
// Create function to set up the game
function create() {
// Create an animation using the loaded sprite sheet
this.anims.create({
key: 'walk',
frames: this.anims.generateFrameNumbers('playerWalk', { start: 0, end: numFrames }),
frameRate: frameRate,
repeat: -1
});
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, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2);
this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
firstScreen.setVisible(false);
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
hideButton.setInteractive().on('pointerdown', () => {
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
// demoButton.style.borderRadius = "25px";
// demoButton.style.set('borderRadius', '15px');
demoButton.setInteractive().on('pointerdown', () => {
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
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 : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + 20, 'animatedA').setDepth(2).setScale(0.82);
// 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, customHeight / 2 + letterHeight, 'layer1');
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
const slantRightAudio = this.sound.add('slantRight');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const slideAudio = this.sound.add('slide');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15);
thirdLayer.setAlpha(0.5);
thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false);
// Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 };
let thirdDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
firstDragStartPoint.x = pointer.x;
firstDragStartPoint.y = pointer.y;
});
firstLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
slantRightAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
thirdLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
});
// Repeat the above code for secondLayer and thirdLayer
// Add this code for secondLayer
secondLayer.on('dragstart', (pointer) => {
secondDragStartPoint.x = pointer.x;
secondDragStartPoint.y = pointer.y;
});
secondLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
secondTextLayer.setVisible(false);
thirdTextLayer.setVisible(true);
slideAudio.play();
thirdLayer.setVisible(true);
secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5);
} else {
secondLayer.setAlpha(0.5);
}
});
// Add this code for thirdLayer
thirdLayer.on('dragstart', (pointer) => {
thirdDragStartPoint.x = pointer.x;
thirdDragStartPoint.y = pointer.y;
});
thirdLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
thirdLayer.setAlpha(1);
thirdTextLayer.setVisible(false);
} else {
thirdLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
graphics.moveTo(pointer.x, pointer.y);
console.log("Start Position", pointer.x, pointer.y)
});
this.input.on('pointerup', function () {
isDrawing = false;
});
this.input.on('pointermove', function (pointer) {
if (!isDrawing) return;
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
});
const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightLeft = customHeight /2 - 100; // Starting y position
const endHeightLeft = customHeight / 2 + 170; // Ending y position
const startWidthLeft = customWidth / 2 + 22;
const endWidthLeft = customWidth / 2 - 70;
// handPointer.setOrigin(0.5, 0.5);
handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerLeft,
x: {
getStart: () => startWidthLeft,
getEnd: () => endWidthLeft,
}, // End x position
y: {
getStart: () => startHeightLeft,
getEnd: () => endHeightLeft,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightRight = customHeight /2 - 100; // Starting y position
const endHeightRight = customHeight / 2 + 170; // Ending y position
const startWidthRight = customWidth / 2 + 20;
const endWidthRight = customWidth / 2 + 107;
// handPointer.setOrigin(0.5, 0.5);
handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointerRight,
x: {
getStart: () => startWidthRight,
getEnd: () => endWidthRight,
}, // End x position
y: {
getStart: () => startHeightRight,
getEnd: () => endHeightRight,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
const startHeightSlide = customHeight / 2 + 70; // Starting y position
const endHeightSlide = customHeight / 2 + 70; // Ending y position
const startWidthSlide = customWidth / 2 - 60;
const endWidthSlide = customWidth / 2 + 55;
// handPointer.setOrigin(0.5, 0.5);
handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
// Define the bounce animation
this.tweens.add({
targets: handPointeSlide,
x: {
getStart: () => startWidthSlide,
getEnd: () => endWidthSlide,
}, // End x position
y: {
getStart: () => startHeightSlide,
getEnd: () => endHeightSlide,
},
duration: 3000, // Duration of each bounce
ease: 'Sine.easeInOut',
yoyo: false,
repeat: -1 // -1 means it will repeat indefinitely
});
handPointerLeft.setVisible(false);
handPointerRight.setVisible(false);
handPointeSlide.setVisible(false);
// Start Position 626 317
}
function update() {
// Create a sprite and play the animation
const player = this.add.sprite(100, 100, 'playerWalk');
player.play('walk');
}
// Load the Phaser game
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload,
create
}
};
const game = new Phaser.Game(config);
</script>