complete letter G
parent
2235ef022d
commit
fc17a3246f
|
|
@ -102,39 +102,9 @@ import Layout from "../../layouts/Layout.astro";
|
|||
this.load.image('sun', '/assets/sun.png');
|
||||
this.load.image('bgMobile', '/assets/bgMobile.png');
|
||||
this.load.image('canvasStand', '/assets/stand2.png');
|
||||
// this.load.image('customCursor', '/assets/pencile.png');
|
||||
// this.load.image('eye', '/assets/pencile.png');
|
||||
this.load.image('customCursor', '/assets/pencile.png');
|
||||
|
||||
|
||||
}
|
||||
|
||||
function create() {
|
||||
this.input.setDefaultCursor('none');
|
||||
|
||||
// Set the initial position of the custom cursor
|
||||
const initialCursorX = customWidth / 2 - 8;
|
||||
const initialCursorY = customHeight / 2 - 100;
|
||||
|
||||
// Create a sprite for the custom cursor at the initial position
|
||||
customCursor = this.add.sprite(initialCursorX, initialCursorY, 'customCursor');
|
||||
// customCursor.setOrigin(0.5, 0.5);
|
||||
customCursor.setOrigin(0.0, 0.98).setDepth(2.1).setScale(0.18);
|
||||
|
||||
// Set the custom cursor to follow the pointer
|
||||
this.input.on('pointermove', (pointer) => {
|
||||
customCursor.x = pointer.x;
|
||||
customCursor.y = pointer.y;
|
||||
});
|
||||
|
||||
// Hide cursor on click
|
||||
this.input.on('pointerdown', () => {
|
||||
customCursor.setVisible(true);
|
||||
});
|
||||
|
||||
this.input.on('pointerup', () => {
|
||||
customCursor.setVisible(true);
|
||||
});
|
||||
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 cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
|
||||
|
|
@ -376,9 +346,6 @@ import Layout from "../../layouts/Layout.astro";
|
|||
}
|
||||
|
||||
function update() {
|
||||
this.input.x = 100; // X coordinate
|
||||
this.input.y = 200;
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -52,10 +52,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
sunScalePlus = 0.15;
|
||||
sunWidth = 70;
|
||||
sunHeight = 70;
|
||||
parrotScale = 0.35;
|
||||
parrotScalePlus = 0.38;
|
||||
parrotWidth = 135;
|
||||
parrotHeight = 170;
|
||||
beanieScale = 0.35;
|
||||
beanieScalePlus = 0.38;
|
||||
beanieWidth = 135;
|
||||
beanieHeight = 170;
|
||||
animatedAHeight = 32;
|
||||
} else{
|
||||
cloudeSize = 500;
|
||||
|
|
@ -69,10 +69,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
sunScalePlus = 0.25;
|
||||
sunWidth = 200;
|
||||
sunHeight = 100;
|
||||
parrotScale = 0.4;
|
||||
parrotScalePlus = 0.44;
|
||||
parrotWidth = 200;
|
||||
parrotHeight = 245;
|
||||
beanieScale = 0.4;
|
||||
beanieScalePlus = 0.44;
|
||||
beanieWidth = 200;
|
||||
beanieHeight = 245;
|
||||
animatedAHeight = 20;
|
||||
}
|
||||
// let hideButton;
|
||||
|
|
@ -89,7 +89,7 @@ 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('beanie', '/assets/beanieImage.png');
|
||||
this.load.image('sun', '/assets/sun.png');
|
||||
this.load.image('bgMobile', '/assets/bgMobile.png');
|
||||
this.load.image('canvasStand', '/assets/stand2.png');
|
||||
|
|
@ -112,7 +112,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
|
||||
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
|
||||
|
||||
|
||||
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||
|
|
@ -128,19 +128,19 @@ import Layout from "../../layouts/Layout.astro";
|
|||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
});
|
||||
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
|
||||
const parrotduration = 2500;
|
||||
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
|
||||
const beanieduration = 2500;
|
||||
this.tweens.add({
|
||||
targets: parrot,
|
||||
scaleX: parrotscaleFactor + 0.004,
|
||||
scaleY: parrotscaleFactor,
|
||||
duration: parrotduration,
|
||||
targets: beanie,
|
||||
scaleX: beaniescaleFactor + 0.004,
|
||||
scaleY: beaniescaleFactor,
|
||||
duration: beanieduration,
|
||||
ease: 'Redial',
|
||||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
});
|
||||
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||
this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||
const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale);
|
||||
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2); canvasStand
|
||||
firstScreen.setVisible(false);
|
||||
|
|
@ -220,7 +220,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
|
||||
let textX, textY;
|
||||
|
||||
firstLayer = this.add.image(customWidth / 2 + 90, 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;
|
||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||
|
|
|
|||
|
|
@ -52,10 +52,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
sunScalePlus = 0.15;
|
||||
sunWidth = 70;
|
||||
sunHeight = 70;
|
||||
parrotScale = 0.35;
|
||||
parrotScalePlus = 0.38;
|
||||
parrotWidth = 135;
|
||||
parrotHeight = 170;
|
||||
beanieScale = 0.35;
|
||||
beanieScalePlus = 0.38;
|
||||
beanieWidth = 135;
|
||||
beanieHeight = 170;
|
||||
animatedAHeight = 32;
|
||||
} else{
|
||||
cloudeSize = 500;
|
||||
|
|
@ -69,10 +69,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
sunScalePlus = 0.25;
|
||||
sunWidth = 200;
|
||||
sunHeight = 100;
|
||||
parrotScale = 0.4;
|
||||
parrotScalePlus = 0.44;
|
||||
parrotWidth = 200;
|
||||
parrotHeight = 245;
|
||||
beanieScale = 0.4;
|
||||
beanieScalePlus = 0.44;
|
||||
beanieWidth = 200;
|
||||
beanieHeight = 245;
|
||||
animatedAHeight = 20;
|
||||
}
|
||||
// let hideButton;
|
||||
|
|
@ -91,7 +91,7 @@ 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('beanie', '/assets/beanieImage.png');
|
||||
this.load.image('sun', '/assets/sun.png');
|
||||
this.load.image('bgMobile', '/assets/bgMobile.png');
|
||||
this.load.image('canvasStand', '/assets/stand2.png');
|
||||
|
|
@ -114,7 +114,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
|
||||
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
|
||||
|
||||
|
||||
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||
|
|
@ -130,13 +130,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
});
|
||||
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
|
||||
const parrotduration = 2500;
|
||||
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
|
||||
const beanieduration = 2500;
|
||||
this.tweens.add({
|
||||
targets: parrot,
|
||||
scaleX: parrotscaleFactor + 0.004,
|
||||
scaleY: parrotscaleFactor,
|
||||
duration: parrotduration,
|
||||
targets: beanie,
|
||||
scaleX: beaniescaleFactor + 0.004,
|
||||
scaleY: beaniescaleFactor,
|
||||
duration: beanieduration,
|
||||
ease: 'Redial',
|
||||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
|
|
|
|||
|
|
@ -52,10 +52,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
sunScalePlus = 0.15;
|
||||
sunWidth = 70;
|
||||
sunHeight = 70;
|
||||
parrotScale = 0.35;
|
||||
parrotScalePlus = 0.38;
|
||||
parrotWidth = 135;
|
||||
parrotHeight = 170;
|
||||
beanieScale = 0.35;
|
||||
beanieScalePlus = 0.38;
|
||||
beanieWidth = 135;
|
||||
beanieHeight = 170;
|
||||
animatedAHeight = 32;
|
||||
} else{
|
||||
cloudeSize = 500;
|
||||
|
|
@ -69,10 +69,10 @@ import Layout from "../../layouts/Layout.astro";
|
|||
sunScalePlus = 0.25;
|
||||
sunWidth = 200;
|
||||
sunHeight = 100;
|
||||
parrotScale = 0.4;
|
||||
parrotScalePlus = 0.44;
|
||||
parrotWidth = 200;
|
||||
parrotHeight = 245;
|
||||
beanieScale = 0.4;
|
||||
beanieScalePlus = 0.44;
|
||||
beanieWidth = 200;
|
||||
beanieHeight = 245;
|
||||
animatedAHeight = 20;
|
||||
}
|
||||
function preload() {
|
||||
|
|
@ -92,7 +92,7 @@ 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('beanie', '/assets/beanieImage.png');
|
||||
this.load.image('sun', '/assets/sun.png');
|
||||
this.load.image('bgMobile', '/assets/bgMobile.png');
|
||||
this.load.image('canvasStand', '/assets/stand2.png');
|
||||
|
|
@ -115,7 +115,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
});
|
||||
|
||||
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
|
||||
const parrot = this.add.sprite(customWidth / 2 - parrotWidth, customHeight / 2 - parrotHeight, 'parrot').setScale(parrotScale).setDepth(1.9);
|
||||
const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
|
||||
|
||||
|
||||
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
|
||||
|
|
@ -131,13 +131,13 @@ import Layout from "../../layouts/Layout.astro";
|
|||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
});
|
||||
const parrotscaleFactor = parrotScalePlus; // Scale factor (2 means double the size)
|
||||
const parrotduration = 2500;
|
||||
const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
|
||||
const beanieduration = 2500;
|
||||
this.tweens.add({
|
||||
targets: parrot,
|
||||
scaleX: parrotscaleFactor + 0.004,
|
||||
scaleY: parrotscaleFactor,
|
||||
duration: parrotduration,
|
||||
targets: beanie,
|
||||
scaleX: beaniescaleFactor + 0.004,
|
||||
scaleY: beaniescaleFactor,
|
||||
duration: beanieduration,
|
||||
ease: 'Redial',
|
||||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
|
|
@ -226,7 +226,7 @@ import Layout from "../../layouts/Layout.astro";
|
|||
firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||
const 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);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,347 @@
|
|||
---
|
||||
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;
|
||||
// let x = 100;
|
||||
|
||||
// // Use x
|
||||
// console.log(x);
|
||||
|
||||
if(isMobile){
|
||||
cloudeSize = 200;
|
||||
cloudHeight = 340;
|
||||
canvasScale = 0.14
|
||||
canvasHeight = 35;
|
||||
letterHeight = 70;
|
||||
letterScale = 1;
|
||||
backgroundScale = 0.8;
|
||||
sunScale = 0.1;
|
||||
sunScalePlus = 0.15;
|
||||
sunWidth = 70;
|
||||
sunHeight = 70;
|
||||
beanieScale = 0.35;
|
||||
beanieScalePlus = 0.365;
|
||||
beanieWidth = 135;
|
||||
beanieHeight = 170;
|
||||
animatedFHeight = 35;
|
||||
animatedFScale = 0.65;
|
||||
} else{
|
||||
cloudeSize = 500;
|
||||
cloudHeight = 250;
|
||||
canvasScale = 0.195;
|
||||
canvasHeight = 20;
|
||||
letterHeight = 50;
|
||||
letterScale = 1;
|
||||
backgroundScale = 1;
|
||||
sunScale = 0.2;
|
||||
sunScalePlus = 0.25;
|
||||
sunWidth = 200;
|
||||
sunHeight = 100;
|
||||
beanieScale = 0.4;
|
||||
beanieScalePlus = 0.45;
|
||||
beanieWidth = 200;
|
||||
beanieHeight = 255;
|
||||
animatedFHeight = 20;
|
||||
animatedFScale = 0.73;
|
||||
}
|
||||
function preload() {
|
||||
this.load.video('animatedF', '/assets/animated-letter/capital_f.mp4');
|
||||
this.load.svg('letterA', '/assets/capital-letter/f.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/f_l1.svg');
|
||||
this.load.svg('layer2', '/assets/capital-letter/f_l2.svg');
|
||||
this.load.svg('layer3', '/assets/capital-letter/f_l3.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
this.load.image('backgroundImage', '/assets/bg6.png');
|
||||
this.load.image('cloud', '/assets/cloud.png');
|
||||
this.load.image('canvas', '/assets/canvas4.png');
|
||||
// this.load.image('beanie', '/assets/beanie.png');
|
||||
this.load.image('beanie', '/assets/beanieImage.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 : F", { font: '700 40px quicksand', fill: '#05b3a4', });
|
||||
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 beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).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 beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
|
||||
const beanieduration = 2500;
|
||||
this.tweens.add({
|
||||
targets: beanie,
|
||||
scaleX: beaniescaleFactor + 0.004,
|
||||
scaleY: beaniescaleFactor,
|
||||
duration: beanieduration,
|
||||
ease: 'Redial',
|
||||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
});
|
||||
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
|
||||
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedF').setDepth(2); canvasStand
|
||||
firstScreen.setVisible(false);
|
||||
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
|
||||
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
|
||||
// Set up a mask for the drawing area based on the canvas dimensions
|
||||
const maskGraphics = this.make.graphics()
|
||||
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
|
||||
const mask = maskGraphics.createGeometryMask();
|
||||
|
||||
|
||||
|
||||
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
|
||||
font: '900 24px quicksand',
|
||||
fill: '#05b3a4',
|
||||
backgroundColor: '#7c4c23',
|
||||
padding: { x: 20, y: 10 },
|
||||
borderRadius: '15px', // Border radius
|
||||
shadow: {
|
||||
offsetX: 2, // X offset for the shadow
|
||||
offsetY: 2, // Y offset for the shadow
|
||||
color: '#000', // Shadow color
|
||||
blur: 5, // Shadow blur
|
||||
fill: true // Apply shadow to fill (background color)
|
||||
}
|
||||
});
|
||||
hideButton.setInteractive().on('pointerdown', () => {
|
||||
isDemoButtonClicked = false;
|
||||
firstScreen.setVisible(false);
|
||||
hideButton.setVisible(false); // Hide the "Hide" button
|
||||
demoButton.setVisible(true); // Show the "Demo" button
|
||||
graphics.setVisible(true);
|
||||
animatedLetter.setVisible(false);
|
||||
});
|
||||
hideButton.setVisible(false);
|
||||
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
|
||||
font: '900 24px quicksand',
|
||||
fill: '#05b3a4',
|
||||
backgroundColor: '#7c4c23',
|
||||
padding: { x: 20, y: 10 },
|
||||
borderRadius: '15px', // Border radius
|
||||
shadow: {
|
||||
offsetX: 2, // X offset for the shadow
|
||||
offsetY: 2, // Y offset for the shadow
|
||||
color: '#000', // Shadow color
|
||||
blur: 5, // Shadow blur
|
||||
fill: true // Apply shadow to fill (background color)
|
||||
}
|
||||
});
|
||||
|
||||
demoButton.setInteractive().on('pointerdown', () => {
|
||||
graphics.setVisible(false);
|
||||
firstScreen.setVisible(true);
|
||||
demoButton.setVisible(false); // Hide the "Demo" button
|
||||
hideButton.setVisible(true); // Show the "Hide" button
|
||||
animatedLetter.setVisible(true);
|
||||
});
|
||||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : 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(animatedFScale);
|
||||
|
||||
// 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 () {
|
||||
// add function after end video;
|
||||
});
|
||||
|
||||
let textX, textY;
|
||||
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||
const firstTextLayer = this.add.text(textX, textY, '1. 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 });
|
||||
|
||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
|
||||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||
const audioTwoAudio = this.sound.add('audioTwo');
|
||||
secondTextLayer.setVisible(false);
|
||||
secondLayer.setDepth(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
secondLayer.setInteractive({ draggable: true });
|
||||
secondLayer.setVisible(false);
|
||||
|
||||
thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
|
||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||
const audioThreeAudio = this.sound.add('audioTwo');
|
||||
thirdTextLayer.setVisible(false);
|
||||
thirdLayer.setDepth(1.1);
|
||||
// thirdLayer.setScale(1.15);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
thirdLayer.setInteractive({ draggable: true });
|
||||
thirdLayer.setVisible(false);
|
||||
|
||||
// Add these variables to keep track of start points
|
||||
let firstDragStartPoint = { x: 0, y: 0 };
|
||||
let secondDragStartPoint = { x: 0, y: 0 };
|
||||
let thirdDragStartPoint = { x: 0, y: 0 };
|
||||
|
||||
// Add this code for firstLayer
|
||||
firstLayer.on('dragstart', (pointer) => {
|
||||
firstDragStartPoint.x = pointer.x;
|
||||
firstDragStartPoint.y = pointer.y;
|
||||
});
|
||||
|
||||
firstLayer.on('drag', (pointer) => {
|
||||
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
|
||||
|
||||
if (distance >= 100) {
|
||||
|
||||
firstTextLayer.setVisible(false);
|
||||
secondTextLayer.setVisible(true);
|
||||
audioTwoAudio.play();
|
||||
secondLayer.setVisible(true);
|
||||
firstLayer.setAlpha(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
} else {
|
||||
firstLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
secondLayer.on('dragstart', (pointer) => {
|
||||
secondDragStartPoint.x = pointer.x;
|
||||
secondDragStartPoint.y = pointer.y;
|
||||
});
|
||||
|
||||
secondLayer.on('drag', (pointer) => {
|
||||
const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
|
||||
|
||||
if (distance >= 100) {
|
||||
secondTextLayer.setVisible(false);
|
||||
thirdTextLayer.setVisible(true);
|
||||
audioThreeAudio.play();
|
||||
thirdLayer.setVisible(true);
|
||||
secondLayer.setAlpha(1);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
} else {
|
||||
secondLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
|
||||
// Add this code for thirdLayer
|
||||
thirdLayer.on('dragstart', (pointer) => {
|
||||
thirdDragStartPoint.x = pointer.x;
|
||||
thirdDragStartPoint.y = pointer.y;
|
||||
});
|
||||
|
||||
thirdLayer.on('drag', (pointer) => {
|
||||
const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
|
||||
|
||||
if (distance >= 100) {
|
||||
thirdLayer.setAlpha(1);
|
||||
thirdTextLayer.setVisible(false);
|
||||
} else {
|
||||
thirdLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
|
||||
graphics = this.add.graphics();
|
||||
graphics.setMask(mask);
|
||||
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
isDrawing = true;
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
// console.log("Start Position", pointer.x, pointer.y)
|
||||
});
|
||||
|
||||
this.input.on('pointerup', function () {
|
||||
isDrawing = false;
|
||||
});
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (!isDrawing) return;
|
||||
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
});
|
||||
}
|
||||
|
||||
function update() {
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,318 @@
|
|||
---
|
||||
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;
|
||||
let graphics;
|
||||
let isDrawing = false;
|
||||
|
||||
if(isMobile){
|
||||
cloudeSize = 200;
|
||||
cloudHeight = 340;
|
||||
canvasScale = 0.14
|
||||
canvasHeight = 35;
|
||||
letterHeight = 58;
|
||||
letterScale = 0.85;
|
||||
backgroundScale = 0.8;
|
||||
sunScale = 0.1;
|
||||
sunScalePlus = 0.15;
|
||||
sunWidth = 70;
|
||||
sunHeight = 70;
|
||||
beanieScale = 0.35;
|
||||
beanieScalePlus = 0.38;
|
||||
beanieWidth = 135;
|
||||
beanieHeight = 170;
|
||||
animatedGHeight = 32;
|
||||
} else{
|
||||
cloudeSize = 500;
|
||||
cloudHeight = 250;
|
||||
canvasScale = 0.195;
|
||||
canvasHeight = 20;
|
||||
letterHeight = 50;
|
||||
letterScale = 1;
|
||||
backgroundScale = 1;
|
||||
sunScale = 0.2;
|
||||
sunScalePlus = 0.25;
|
||||
sunWidth = 200;
|
||||
sunHeight = 100;
|
||||
beanieScale = 0.4;
|
||||
beanieScalePlus = 0.44;
|
||||
beanieWidth = 200;
|
||||
beanieHeight = 245;
|
||||
animatedGHeight = 20;
|
||||
}
|
||||
// let hideButton;
|
||||
|
||||
function preload() {
|
||||
this.load.video('animatedG', '/assets/animated-letter/capital_g.mp4');
|
||||
this.load.svg('letterG', '/assets/capital-letter/g.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/g_l1.svg');
|
||||
this.load.svg('layer2', '/assets/capital-letter/g_l2.svg');
|
||||
this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
|
||||
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
this.load.svg('succesImage', '/assets/svg/tick.svg');
|
||||
this.load.svg('hintImage', '/assets/svg/hint.svg');
|
||||
this.load.svg('handPointer', '/assets/svg/hand.svg');
|
||||
this.load.image('backgroundImage', '/assets/bg6.png');
|
||||
this.load.image('cloud', '/assets/cloud.png');
|
||||
this.load.image('canvas', '/assets/canvas4.png');
|
||||
this.load.image('beanie', '/assets/beanieImage.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 : D", { 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 beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).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 beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
|
||||
const beanieduration = 2500;
|
||||
this.tweens.add({
|
||||
targets: beanie,
|
||||
scaleX: beaniescaleFactor + 0.004,
|
||||
scaleY: beaniescaleFactor,
|
||||
duration: beanieduration,
|
||||
ease: 'Redial',
|
||||
yoyo: true, // Makes the animation play in reverse
|
||||
repeat: -1 // Repeat indefinitely
|
||||
});
|
||||
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
|
||||
this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
|
||||
const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);
|
||||
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedG').setDepth(2); canvasStand
|
||||
firstScreen.setVisible(false);
|
||||
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
|
||||
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
|
||||
// Set up a mask for the drawing area based on the canvas dimensions
|
||||
const maskGraphics = this.make.graphics()
|
||||
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
|
||||
const mask = maskGraphics.createGeometryMask();
|
||||
|
||||
|
||||
|
||||
let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
|
||||
font: '900 24px quicksand',
|
||||
fill: '#05b3a4',
|
||||
backgroundColor: '#7c4c23',
|
||||
padding: { x: 20, y: 10 },
|
||||
borderRadius: '15px', // Border radius
|
||||
shadow: {
|
||||
offsetX: 2, // X offset for the shadow
|
||||
offsetY: 2, // Y offset for the shadow
|
||||
color: '#000', // Shadow color
|
||||
blur: 5, // Shadow blur
|
||||
fill: true // Apply shadow to fill (background color)
|
||||
}
|
||||
});
|
||||
hideButton.setInteractive().on('pointerdown', () => {
|
||||
isDemoButtonClicked = false;
|
||||
firstScreen.setVisible(false);
|
||||
hideButton.setVisible(false); // Hide the "Hide" button
|
||||
demoButton.setVisible(true); // Show the "Demo" button
|
||||
graphics.setVisible(true);
|
||||
animatedLetter.setVisible(false);
|
||||
});
|
||||
hideButton.setVisible(false);
|
||||
let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
|
||||
font: '900 24px quicksand',
|
||||
fill: '#05b3a4',
|
||||
backgroundColor: '#7c4c23',
|
||||
padding: { x: 20, y: 10 },
|
||||
borderRadius: '15px', // Border radius
|
||||
shadow: {
|
||||
offsetX: 2, // X offset for the shadow
|
||||
offsetY: 2, // Y offset for the shadow
|
||||
color: '#000', // Shadow color
|
||||
blur: 5, // Shadow blur
|
||||
fill: true // Apply shadow to fill (background color)
|
||||
}
|
||||
});
|
||||
|
||||
demoButton.setInteractive().on('pointerdown', () => {
|
||||
graphics.setVisible(false);
|
||||
firstScreen.setVisible(true);
|
||||
demoButton.setVisible(false); // Hide the "Demo" button
|
||||
hideButton.setVisible(true); // Show the "Hide" button
|
||||
animatedLetter.setVisible(true);
|
||||
});
|
||||
|
||||
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
|
||||
const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(0.73);
|
||||
|
||||
// Play the video
|
||||
animatedLetter.play();
|
||||
animatedLetter.setVisible(false);
|
||||
|
||||
// You can set additional properties for the video, such as loop and mute:
|
||||
animatedLetter.setLoop(true); // Loop the video
|
||||
animatedLetter.setMute(false); // Unmute the video
|
||||
animatedLetter.on('complete', function () {
|
||||
// Video playback is complete
|
||||
// You can add your code here for what to do when the video finishes.
|
||||
});
|
||||
|
||||
let textX, textY;
|
||||
|
||||
firstLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
|
||||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||
textY = isMobile ? customHeight / 5 : customHeight / 2;
|
||||
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||
const audioOneAudio = this.sound.add('audioOne');
|
||||
audioOneAudio.play();
|
||||
firstLayer.setDepth(1);
|
||||
firstLayer.setAlpha(0.5);
|
||||
firstLayer.setInteractive({ draggable: true });
|
||||
|
||||
secondLayer = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
|
||||
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
|
||||
const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
|
||||
const audioTwoAudio = this.sound.add('audioTwo');
|
||||
secondTextLayer.setVisible(false);
|
||||
secondLayer.setDepth(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
secondLayer.setInteractive({ draggable: true });
|
||||
secondLayer.setVisible(false);
|
||||
|
||||
|
||||
// Add these variables to keep track of start points
|
||||
let firstDragStartPoint = { x: 0, y: 0 };
|
||||
let secondDragStartPoint = { x: 0, y: 0 };
|
||||
|
||||
// ...
|
||||
|
||||
// Add this code for firstLayer
|
||||
firstLayer.on('dragstart', (pointer) => {
|
||||
firstDragStartPoint.x = pointer.x;
|
||||
firstDragStartPoint.y = pointer.y;
|
||||
});
|
||||
|
||||
firstLayer.on('drag', (pointer) => {
|
||||
const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
|
||||
|
||||
if (distance >= 100) {
|
||||
|
||||
firstTextLayer.setVisible(false);
|
||||
secondTextLayer.setVisible(true);
|
||||
audioTwoAudio.play();
|
||||
secondLayer.setVisible(true);
|
||||
firstLayer.setAlpha(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
} 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);
|
||||
secondLayer.setAlpha(1);
|
||||
} else {
|
||||
secondLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
|
||||
graphics = this.add.graphics();
|
||||
graphics.setMask(mask);
|
||||
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
isDrawing = true;
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
console.log("Start Position", pointer.x, pointer.y)
|
||||
});
|
||||
|
||||
this.input.on('pointerup', function () {
|
||||
isDrawing = false;
|
||||
});
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (!isDrawing) return;
|
||||
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
});
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue