test animation
parent
55544e35c4
commit
c4edb94593
|
|
@ -0,0 +1 @@
|
|||
<svg height="101px" width="101px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 502.019 502.019" xml:space="preserve" fill="#05b3a4" stroke="#05b3a4"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <path style="fill:#f1ffff;" d="M229.948,103.316c-5.832-13.268-19.063-29.615-49.624-16.18l-26.931,11.839L127.73,40.598 C112.274,5.439,73.904,2.839,54.426,21.427C40.324,34.886,33.911,56.34,43.187,77.441l91.016,208.341 c-22.169-16.79-64.508-16.601-83.459,2.916l0.494-0.748c-20.129,20.73-16.758,50.112,13.786,75.783l162.997,128.286 l233.508-102.652l1.27-20.347c3.306-52.939-6.108-105.899-27.454-154.456l-17.675-40.207c-0.916-2.084-1.919-4.12-3.004-6.104 c-12.326-22.537-39.916-31.826-63.473-21.583l-17.547,7.63l-19.83-45.109c-8.679-19.743-31.814-28.723-51.494-19.901 L229.948,103.316z"></path> <path d="M444.501,210.539l-17.676-40.206c-1.028-2.34-2.168-4.656-3.385-6.878c-7.161-13.093-18.911-22.95-33.088-27.756 c-14.133-4.792-29.455-4.151-43.146,1.801l-8.412,3.658l-15.823-35.992c-5.29-12.033-14.965-21.264-27.242-25.992 c-12.219-4.706-25.509-4.363-37.435,0.963l-23.937,10.37c-4.167-6.298-9.306-11.049-15.351-14.177 c-11.874-6.145-26.241-5.589-42.706,1.65l-17.777,7.815l-21.639-49.223c-8.288-18.853-23.643-31.785-42.127-35.48 c-17.351-3.467-35.005,1.43-47.234,13.101c-18.429,17.587-23.724,43.993-13.5,67.251l80.667,184.65 c-24.236-5.899-52.415-1.223-68.77,13.384c-0.664,0.417-1.288,0.919-1.857,1.504c-10.81,11.134-16.141,24.582-15.416,38.889 c0.911,18.004,11.266,35.818,29.943,51.516c0.082,0.069,0.165,0.137,0.249,0.203l162.998,128.287 c1.795,1.412,3.979,2.142,6.186,2.142c1.362,0,2.732-0.278,4.023-0.846l233.508-102.652c3.425-1.505,5.723-4.797,5.956-8.531 l1.271-20.347C476.171,315.354,466.393,260.336,444.501,210.539z M352.489,222.009c1.647,3.747,5.313,5.978,9.159,5.978 c1.344,0,2.711-0.272,4.02-0.848c5.056-2.223,7.353-8.123,5.13-13.179l-23.956-54.492l8.339-3.627 c19.022-8.271,40.822-0.872,50.714,17.214c0.942,1.721,1.824,3.513,2.621,5.326l17.676,40.207 c20.612,46.888,29.819,98.691,26.628,149.809l-0.891,14.267l-222.438,97.785L71.339,355.976 c-14.24-12.003-22.096-24.836-22.718-37.116c-0.407-8.047,2.353-15.514,8.208-22.226c0.381-0.293,0.745-0.616,1.09-0.971 c14.6-15.038,50.97-16.116,69.865-2.182l40.575,38.97c1.938,1.862,4.434,2.788,6.926,2.788c2.627,0,5.25-1.029,7.213-3.073 c3.826-3.983,3.698-10.313-0.285-14.139l-39.644-38.076L52.342,73.416c-8.261-18.79-0.772-35.438,8.989-44.755 c7.402-7.066,18.705-10.114,29.506-7.957c12.177,2.434,22.027,10.928,27.738,23.917l68.24,155.229 c1.646,3.747,5.313,5.978,9.159,5.978c1.344,0,2.711-0.272,4.02-0.848c5.056-2.223,7.353-8.123,5.13-13.179l-38.553-87.698 l17.777-7.815c10.657-4.686,19.225-5.425,25.465-2.196c4.429,2.292,8.123,6.749,10.979,13.245c0,0.001,0.001,0.002,0.001,0.002 l40.244,91.546c1.647,3.747,5.313,5.978,9.159,5.978c1.344,0,2.711-0.272,4.02-0.848c5.056-2.223,7.353-8.123,5.13-13.179 l-36.198-82.342l23.15-10.029c0.038-0.017,0.076-0.034,0.115-0.051c7.039-3.156,14.897-3.361,22.127-0.577 c7.267,2.799,12.992,8.26,16.121,15.377L352.489,222.009z"></path> <g> <path d="M398.019,391.021c-3.849,0-7.518-2.235-9.163-5.986c-2.218-5.058,0.084-10.956,5.142-13.174l11.595-5.085 c5.056-2.217,10.955,0.082,13.175,5.141c2.218,5.058-0.084,10.956-5.142,13.174l-11.595,5.085 C400.725,390.749,399.361,391.021,398.019,391.021z"></path> </g> <g> <path d="M239.019,461.021c-3.849,0-7.518-2.235-9.163-5.986c-2.218-5.058,0.084-10.956,5.142-13.174l123.826-54.31 c5.055-2.218,10.955,0.083,13.175,5.141c2.218,5.058-0.084,10.956-5.142,13.174l-123.826,54.31 C241.725,460.749,240.361,461.021,239.019,461.021z"></path> </g> </g> </g> </g></svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
|
|
@ -39,13 +39,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let isDrawing = false;
|
||||
|
||||
// let hideButton;
|
||||
|
||||
function preload() {
|
||||
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||
this.load.svg('layer3', '/assets/letter/a_l3.svg');
|
||||
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');
|
||||
|
|
@ -57,35 +57,30 @@ import Layout from "../../layouts/Layout.astro";
|
|||
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', });
|
||||
|
||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||
firstScreen.setVisible(false);
|
||||
|
||||
let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Hide", { font: '24px quicksand', fill: '#05b3a4' });
|
||||
hideButton.setInteractive().on('pointerdown', () => {
|
||||
isDemoButtonClicked = false;
|
||||
firstScreen.setVisible(false);
|
||||
hideButton.setVisible(false); // Hide the "Hide" button
|
||||
demoButton.setVisible(true); // Show the "Demo" button
|
||||
});
|
||||
hideButton.setVisible(false);
|
||||
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Demo", { font: '24px quicksand', fill: '#05b3a4' });
|
||||
demoButton.setInteractive().on('pointerdown', () => {
|
||||
firstScreen.setVisible(true);
|
||||
demoButton.setVisible(false); // Hide the "Demo" button
|
||||
hideButton.setVisible(true); // Show the "Hide" button
|
||||
});
|
||||
|
||||
|
||||
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 to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
|
||||
this.time.delayedCall(2000, () => {
|
||||
this.tweens.add({
|
||||
targets: firstScreen,
|
||||
alpha: 0,
|
||||
scaleX: 0.5,
|
||||
scaleY: 0.5,
|
||||
duration: 1000,
|
||||
onComplete: () => {
|
||||
firstScreen.setVisible(false);
|
||||
firstScreen.setScale(1);
|
||||
showLayersWithFadeIn.call(this);
|
||||
}
|
||||
});
|
||||
}, [], this);
|
||||
}
|
||||
function showLayersWithFadeIn() {
|
||||
this.tweens.add({
|
||||
targets: [firstLayer, secondLayer, thirdLayer],
|
||||
alpha: 1,
|
||||
duration: 1000, // Duration of the tween in milliseconds
|
||||
delay: 500, // Delay before the fade-in starts
|
||||
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
|
||||
});
|
||||
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);
|
||||
|
||||
let textX, textY;
|
||||
|
||||
|
|
@ -176,7 +171,11 @@ import Layout from "../../layouts/Layout.astro";
|
|||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
});
|
||||
|
||||
}
|
||||
// function showLayersWithFadeIn() {
|
||||
|
||||
// }
|
||||
|
||||
function update() {
|
||||
// Update any game logic if needed
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
---
|
||||
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>
|
||||
|
|
@ -1,9 +1,31 @@
|
|||
---
|
||||
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: 800,
|
||||
height: 600,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: 0xFFFFFF,
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
},
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
|
|
@ -12,38 +34,160 @@ const config = {
|
|||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
let graphics;
|
||||
let isDrawing = false;
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
let firstLayer, secondLayer, thirdLayer;
|
||||
let isDragging = false;
|
||||
let lineStartPosition = {x:0 , y:0};
|
||||
let draggingLine;
|
||||
|
||||
function preload() {
|
||||
// Preload any assets if needed
|
||||
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||
this.load.svg('layer1', '/assets/letter/a_l1.svg');
|
||||
this.load.svg('layer2', '/assets/letter/a_l2.svg');
|
||||
this.load.svg('layer3', '/assets/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');
|
||||
}
|
||||
|
||||
|
||||
function create() {
|
||||
graphics = this.add.graphics();
|
||||
graphics.lineStyle(20, 0x05b3a4, 1); // Set line style (width, color, alpha)
|
||||
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', });
|
||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
|
||||
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 to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
isDrawing = true;
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
this.time.delayedCall(2000, () => {
|
||||
this.tweens.add({
|
||||
targets: firstScreen,
|
||||
alpha: 0,
|
||||
scaleX: 0.5,
|
||||
scaleY: 0.5,
|
||||
duration: 1000,
|
||||
onComplete: () => {
|
||||
firstScreen.setVisible(false);
|
||||
firstScreen.setScale(1);
|
||||
showLayersWithFadeIn.call(this);
|
||||
}
|
||||
});
|
||||
}, [], this);
|
||||
|
||||
draggingLine = this.add.graphics();
|
||||
draggingLine.lineStyle(10, 0x05b3a4).setDepth(1.5); //o\\ 5 is the line width, 0xff0000 is the color (red)
|
||||
}
|
||||
function showLayersWithFadeIn() {
|
||||
this.tweens.add({
|
||||
targets: [firstLayer, secondLayer, thirdLayer],
|
||||
alpha: 1,
|
||||
duration: 1000, // Duration of the tween in milliseconds
|
||||
delay: 500, // Delay before the fade-in starts
|
||||
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
|
||||
});
|
||||
let textX, textY;
|
||||
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||
textX = isMobile ? customWidth / 3 : 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, 'layer2');
|
||||
textX = isMobile ? customWidth / 3 : 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, '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);
|
||||
|
||||
firstLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
this.input.on('pointerup', function () {
|
||||
isDrawing = false;
|
||||
secondLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
secondTextLayer.setVisible(false);
|
||||
thirdTextLayer.setVisible(true);
|
||||
slideAudio.play();
|
||||
thirdLayer.setVisible(true);
|
||||
secondLayer.setAlpha(1);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
} else {
|
||||
secondLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (!isDrawing) return;
|
||||
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
thirdLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
thirdLayer.setAlpha(1);
|
||||
thirdTextLayer.setVisible(false);
|
||||
// const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
|
||||
// succesImage.setAlpha(0.2);
|
||||
// this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
|
||||
} else {
|
||||
thirdLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
this.input.on('pointerdown', dragStart);
|
||||
this.input.on('pointerup', dragEnd);
|
||||
this.input.on('pointermove', drag);
|
||||
}
|
||||
|
||||
function dragStart(pointer) {
|
||||
if (pointer.isDown) {
|
||||
isDragging = true;
|
||||
lineStartPosition.x = pointer.x;
|
||||
lineStartPosition.y = pointer.y;
|
||||
}
|
||||
}
|
||||
|
||||
function drag(pointer) {
|
||||
if (isDragging) {
|
||||
// draggingLine.clear();
|
||||
draggingLine.beginPath();
|
||||
draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
|
||||
draggingLine.lineTo(pointer.x, pointer.y);
|
||||
draggingLine.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
function dragEnd() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
function update() {
|
||||
// You can add any game logic or updates here
|
||||
// Update any game logic if needed
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -37,9 +37,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let isDrawing = false;
|
||||
|
||||
let isDragging = false;
|
||||
let lineStartPosition = {x:0 , y:0};
|
||||
let draggingLine;
|
||||
|
||||
function preload() {
|
||||
this.load.svg('letterA', '/assets/letter/a.svg');
|
||||
|
|
@ -77,6 +77,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
});
|
||||
}, [], this);
|
||||
|
||||
draggingLine = this.add.graphics();
|
||||
draggingLine.lineStyle(10, 0x05b3a4).setDepth(1.5); //o\\ 5 is the line width, 0xff0000 is the color (red)
|
||||
}
|
||||
function showLayersWithFadeIn() {
|
||||
this.tweens.add({
|
||||
|
|
@ -86,7 +89,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
delay: 500, // Delay before the fade-in starts
|
||||
ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
|
||||
});
|
||||
|
||||
let textX, textY;
|
||||
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||
|
|
@ -158,24 +160,31 @@ import Layout from "../../layouts/Layout.astro";
|
|||
thirdLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
graphics = this.add.graphics();
|
||||
graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||
this.input.on('pointerdown', dragStart);
|
||||
this.input.on('pointerup', dragEnd);
|
||||
this.input.on('pointermove', drag);
|
||||
}
|
||||
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
isDrawing = true;
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
});
|
||||
function dragStart(pointer) {
|
||||
if (pointer.isDown) {
|
||||
isDragging = true;
|
||||
lineStartPosition.x = pointer.x;
|
||||
lineStartPosition.y = pointer.y;
|
||||
}
|
||||
}
|
||||
|
||||
this.input.on('pointerup', function () {
|
||||
isDrawing = false;
|
||||
});
|
||||
function drag(pointer) {
|
||||
if (isDragging) {
|
||||
// draggingLine.clear();
|
||||
draggingLine.beginPath();
|
||||
draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
|
||||
draggingLine.lineTo(pointer.x, pointer.y);
|
||||
draggingLine.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (!isDrawing) return;
|
||||
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
});
|
||||
function dragEnd() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue