112 lines
3.1 KiB
Plaintext
112 lines
3.1 KiB
Plaintext
---
|
|
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 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,
|
|
}
|
|
};
|
|
|
|
const game = new Phaser.Game(config);
|
|
const customWidth = window.innerWidth;
|
|
const customHeight = window.innerHeight;
|
|
|
|
function preload() {
|
|
// Preload your assets here
|
|
this.load.image('letterA', '/assets/capital-letter/a.svg');
|
|
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
|
// Load other assets as needed
|
|
}
|
|
|
|
function create() {
|
|
const firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
|
const secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
|
const thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
|
const ball = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
|
|
// ball.setVisible(false);
|
|
const startHeight = customHeight /2 - 140; // Starting y position
|
|
const endHeight = 567; // Ending y position
|
|
const startWidth = customWidth / 2 + 20;
|
|
const endWidth = customWidth / 2 - 65;
|
|
|
|
// ball.setOrigin(0.5, 0.5);
|
|
ball.setScale(0.5); // Adjust scale as needed
|
|
|
|
// Define the bounce animation
|
|
this.tweens.add({
|
|
targets: ball,
|
|
x: {
|
|
getStart: () => startWidth,
|
|
getEnd: () => endWidth,
|
|
}, // End x position
|
|
y: {
|
|
getStart: () => startHeight,
|
|
getEnd: () => endHeight,
|
|
},
|
|
duration: 3000, // Duration of each bounce
|
|
ease: 'Sine.easeInOut',
|
|
yoyo: false,
|
|
repeat: -1 // -1 means it will repeat indefinitely
|
|
});
|
|
|
|
// Set initial visibility and alpha values
|
|
firstLayer.setVisible(true);
|
|
secondLayer.setVisible(false);
|
|
thirdLayer.setVisible(false);
|
|
firstLayer.setAlpha(1);
|
|
secondLayer.setAlpha(0.5);
|
|
thirdLayer.setAlpha(0.5);
|
|
|
|
firstLayer.setInteractive({ draggable: true });
|
|
|
|
firstLayer.on('drag', (pointer, dragX, dragY) => {
|
|
// Dragging logic
|
|
|
|
// const pointerX = ( pointer.x = 394);
|
|
// const pointerY = (pointer.y = 139);
|
|
// if(pointerX && pointerY){
|
|
// console.log("Its start Position")
|
|
// }
|
|
if (pointer.isDown) {
|
|
firstLayer.setAlpha(1);
|
|
secondLayer.setAlpha(0.5);
|
|
thirdLayer.setAlpha(0.5);
|
|
|
|
// console.log('its drag start', pointer.x, pointer.y)
|
|
}
|
|
console.log(pointer.x, pointer.y)
|
|
});
|
|
|
|
firstLayer.on('dragend', (pointer) => {
|
|
// Drag end logic
|
|
firstLayer.setAlpha(0.5);
|
|
const pointerX = (pointer.x = 309);
|
|
const pointerY = (pointer.y = 390);
|
|
|
|
if(pointerX && pointerY){
|
|
console.log("Its End Position")
|
|
}
|
|
// console.log(pointer.x, pointer.y)
|
|
|
|
// Add any actions you want to perform when drag ends here 394 139 / 309 390
|
|
});
|
|
}
|
|
|
|
</script> |