change folder name
parent
ce907489f6
commit
43b8725c92
|
|
@ -1,55 +0,0 @@
|
|||
---
|
||||
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>
|
||||
// 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.spritesheet('playerWalk', '/assets/beanieImage.png', {
|
||||
frameWidth: frameWidth,
|
||||
frameHeight: frameHeight
|
||||
});
|
||||
}
|
||||
|
||||
// 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
|
||||
});
|
||||
|
||||
// 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>
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
<main>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
<script is:inline>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor : 0xffffff,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
var graphics;
|
||||
var isDragging = false;
|
||||
var image;
|
||||
|
||||
var game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
// Load the image asset
|
||||
this.load.image('image', '/assets/A.png');
|
||||
}
|
||||
function create() {
|
||||
graphics = this.add.graphics();
|
||||
// Set line style for the dragging line
|
||||
graphics.lineStyle(60, 0x5e17eb); // Blue color, 20px width
|
||||
|
||||
// Add the image to the scene
|
||||
image = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'image');
|
||||
image.setInteractive();
|
||||
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
if (image.getBounds().contains(pointer.x, pointer.y)) {
|
||||
// Start dragging only if the pointer is over the image
|
||||
isDragging = true;
|
||||
|
||||
// Bring the graphics to the front
|
||||
this.children.bringToTop(graphics);
|
||||
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (isDragging) {
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.input.on('pointerup', function () {
|
||||
isDragging = false;
|
||||
graphics.closePath();
|
||||
}, this);
|
||||
}
|
||||
function update() {}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
<Layout title='Drawing Game'>
|
||||
<main>
|
||||
<div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
scene: {
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
var graphics;
|
||||
var isDragging = false;
|
||||
var pathPoints = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 200, y: 100 },
|
||||
{ x: 150, y: 200 }
|
||||
];
|
||||
|
||||
var drawnPoints = [];
|
||||
|
||||
var game = new Phaser.Game(config);
|
||||
|
||||
function create() {
|
||||
graphics = this.add.graphics();
|
||||
|
||||
// Draw the predefined path filled with white color
|
||||
graphics.fillStyle(0xffffff); // White color
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(pathPoints[0].x, pathPoints[0].y);
|
||||
|
||||
for (var i = 1; i < pathPoints.length; i++) {
|
||||
graphics.lineTo(pathPoints[i].x, pathPoints[i].y);
|
||||
}
|
||||
|
||||
graphics.closePath();
|
||||
graphics.fillPath();
|
||||
|
||||
// Add input events to detect dragging
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
isDragging = true;
|
||||
drawnPoints = [];
|
||||
drawnPoints.push({ x: pointer.x, y: pointer.y });
|
||||
});
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (isDragging) {
|
||||
drawnPoints.push({ x: pointer.x, y: pointer.y });
|
||||
}
|
||||
});
|
||||
|
||||
this.input.on('pointerup', function () {
|
||||
isDragging = false;
|
||||
});
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Continuously update the filled area while dragging
|
||||
if (isDragging) {
|
||||
graphics.fillStyle(0xff0000); // Red color
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(drawnPoints[0].x, drawnPoints[0].y);
|
||||
|
||||
for (var i = 1; i < drawnPoints.length; i++) {
|
||||
graphics.lineTo(drawnPoints[i].x, drawnPoints[i].y);
|
||||
}
|
||||
|
||||
graphics.closePath();
|
||||
graphics.fillPath();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,112 +0,0 @@
|
|||
---
|
||||
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,57 +0,0 @@
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
|
||||
<script is:inline>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
let ellipseCenter;
|
||||
let ellipseRadiusX = 74;
|
||||
let ellipseRadiusY = 100;
|
||||
let angle = 0;
|
||||
let rotationSpeed = 0.02; // Adjust rotation speed as needed
|
||||
let rotatingObject;
|
||||
|
||||
function preload(){
|
||||
this.load.image('handPointer', '/assets/svg/hand.svg');
|
||||
this.load.image('letterO', '/assets/capital-letter/o.svg')
|
||||
}
|
||||
function create() {
|
||||
this.add.image(customWidth / 2, customHeight / 2, 'letterO');
|
||||
// Create an ellipse (in this case, a visual representation)
|
||||
// const graphics = this.add.graphics();
|
||||
// graphics.lineStyle(2, 0xffffff);
|
||||
// graphics.strokeEllipse(customWidth / 2, customHeight / 2, ellipseRadiusX * 2, ellipseRadiusY * 2);
|
||||
|
||||
ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
|
||||
rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
|
||||
rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Update the angle for rotation
|
||||
angle -= rotationSpeed;
|
||||
|
||||
// Calculate new position based on the angle and radii
|
||||
const radius = Math.max(ellipseRadiusX, ellipseRadiusY);
|
||||
const x = ellipseCenter.x + radius * Math.cos(angle);
|
||||
const y = ellipseCenter.y + radius * Math.sin(angle);
|
||||
|
||||
rotatingObject.x = x;
|
||||
rotatingObject.y = y;
|
||||
|
||||
// Rotate the object based on the angle (optional)
|
||||
rotatingObject.rotation = angle;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,56 +0,0 @@
|
|||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
|
||||
<script is:inline>
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
let ellipseCenter;
|
||||
let ellipseRadiusX = 74;
|
||||
let ellipseRadiusY = 100;
|
||||
let angle = 0;
|
||||
let rotationSpeed = 0.02; // Adjust rotation speed as needed
|
||||
let rotatingObject;
|
||||
|
||||
function preload(){
|
||||
this.load.image('handPointer', '/assets/svg/hand.svg');
|
||||
this.load.image('letterO', '/assets/capital-letter/o.svg')
|
||||
}
|
||||
function create() {
|
||||
this.add.image(customWidth / 2, customHeight / 2, 'letterO');
|
||||
// Create an ellipse (in this case, a visual representation)
|
||||
// const graphics = this.add.graphics();
|
||||
// graphics.lineStyle(2, 0xffffff);
|
||||
// graphics.strokeEllipse(customWidth / 2, customHeight / 2, ellipseRadiusX * 2, ellipseRadiusY * 2);
|
||||
|
||||
ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
|
||||
rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
|
||||
rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Update the angle for rotation
|
||||
angle -= rotationSpeed;
|
||||
|
||||
// Calculate new position based on the angle and radii
|
||||
const x = ellipseCenter.x + ellipseRadiusX * Math.cos(angle);
|
||||
const y = ellipseCenter.y + ellipseRadiusY * Math.sin(angle);
|
||||
|
||||
rotatingObject.x = x;
|
||||
rotatingObject.y = y;
|
||||
|
||||
// Rotate the object based on the angle (optional)
|
||||
rotatingObject.rotation = angle;
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
class Example extends Phaser.Scene {
|
||||
isKeyDown = false;
|
||||
isMouseDown = false;
|
||||
graphicsPath = [];
|
||||
graphics;
|
||||
snapHistory = [];
|
||||
time = 0;
|
||||
div = document.createElement('div');
|
||||
|
||||
preload() {
|
||||
this.load.image('myImage', 'assets/sprites/phaser1.png');
|
||||
this.load.glsl('shader0', 'assets/shaders/shader0.frag');
|
||||
}
|
||||
|
||||
create() {
|
||||
this.div.innerHTML = 'PRESS SPACE TO TAKE SNAPSHOT<br>';
|
||||
document.body.appendChild(this.div);
|
||||
|
||||
for (let i = 0; i < 5; ++i) {
|
||||
const image = this.add.image(Math.random() * 800, Math.random() * 600, 'myImage');
|
||||
}
|
||||
|
||||
this.graphics = this.add.graphics({ x: 0, y: 0 });
|
||||
|
||||
game.canvas.onmousedown = (e) => {
|
||||
this.isMouseDown = true;
|
||||
this.graphics.clear();
|
||||
this.graphicsPath.length = 0;
|
||||
};
|
||||
game.canvas.onmouseup = (e) => {
|
||||
this.isMouseDown = false;
|
||||
};
|
||||
game.canvas.onmousemove = (e) => {
|
||||
const mouseX = e.clientX - game.canvas.offsetLeft;
|
||||
const mouseY = e.clientY - game.canvas.offsetTop;
|
||||
if (this.isMouseDown) {
|
||||
this.graphicsPath.push({ x: mouseX, y: mouseY });
|
||||
}
|
||||
};
|
||||
window.onkeydown = (e) => {
|
||||
if (e.keyCode === 32 && !this.isKeyDown) {
|
||||
game.renderer.snapshot((image) => {
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
this.snapHistory.push(image);
|
||||
console.log('snap!');
|
||||
document.body.appendChild(image);
|
||||
});
|
||||
this.isKeyDown = true;
|
||||
}
|
||||
};
|
||||
window.onkeyup = (e) => {
|
||||
if (e.keyCode === 32) {
|
||||
this.isKeyDown = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Create a "Save Now" button
|
||||
const saveButton = this.add.text(650, 10, 'Save Now', { fill: '#05b3a4' });
|
||||
saveButton.setInteractive();
|
||||
saveButton.on('pointerdown', () => {
|
||||
// Hide the "Save Now" text
|
||||
saveButton.visible = false;
|
||||
|
||||
// Trigger the snapshot
|
||||
game.renderer.snapshot((image) => {
|
||||
image.style.width = '160px';
|
||||
image.style.height = '120px';
|
||||
image.style.paddingLeft = '2px';
|
||||
this.snapHistory.push(image);
|
||||
console.log('snap!');
|
||||
document.body.appendChild(image);
|
||||
|
||||
// Download the snapshot as an image
|
||||
const link = document.createElement('a');
|
||||
link.href = image.src;
|
||||
link.download = 'snapshot.png';
|
||||
link.click();
|
||||
document.body.removeChild(image); // Remove the image after download
|
||||
|
||||
// Disable snapshot preview
|
||||
this.graphics.clear();
|
||||
this.graphicsPath = [];
|
||||
|
||||
// Show the "Save Now" text again
|
||||
saveButton.visible = true;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
update() {
|
||||
const length = this.graphicsPath.length;
|
||||
|
||||
this.graphics.clear();
|
||||
this.graphics.lineStyle(10.0, 0xffff00, 1.0);
|
||||
this.graphics.beginPath();
|
||||
for (let i = 0; i < length; ++i) {
|
||||
const node = this.graphicsPath[i];
|
||||
|
||||
if (i !== 0) {
|
||||
this.graphics.lineTo(node.x, node.y);
|
||||
} else {
|
||||
this.graphics.moveTo(node.x, node.y);
|
||||
}
|
||||
}
|
||||
this.graphics.strokePath();
|
||||
this.graphics.closePath();
|
||||
|
||||
this.time += 0.01;
|
||||
}
|
||||
}
|
||||
|
||||
const config = {
|
||||
type: Phaser.WEBGL,
|
||||
width: 800,
|
||||
height: 600,
|
||||
backgroundColor: '#2d2d2d',
|
||||
parent: 'phaser-example',
|
||||
scene: Example,
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
</script>
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
---
|
||||
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 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
|
||||
}
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
|
||||
|
||||
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.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')
|
||||
}
|
||||
|
||||
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');
|
||||
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, () => {
|
||||
firstScreen.setVisible(false);
|
||||
showLayers.call(this);
|
||||
}, [], this);
|
||||
|
||||
}
|
||||
|
||||
function showLayers() {
|
||||
let textX, textY;
|
||||
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1').setInteractive({ draggable: true });
|
||||
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
|
||||
textY = isMobile ? customHeight / 5 : customHeight / 2.4;
|
||||
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').setInteractive({ draggable: true });
|
||||
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').setInteractive({ draggable: true });
|
||||
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.setAlpha(0.5);
|
||||
thirdLayer.setInteractive({ draggable: true });
|
||||
thirdLayer.setVisible(false);
|
||||
|
||||
graphics = this.add.graphics();
|
||||
graphics.lineStyle(5, 0xFF0000).setDepth(2); // Set the line style to red
|
||||
|
||||
// Create a variable to track if drawing is in progress
|
||||
let isDrawing = false;
|
||||
|
||||
// Event for starting to draw
|
||||
firstLayer.on('pointerdown', (pointer) => {
|
||||
isDrawing = true;
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
});
|
||||
|
||||
// Event for drawing while dragging
|
||||
firstLayer.on('pointermove', (pointer) => {
|
||||
if (isDrawing) {
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
}
|
||||
});
|
||||
|
||||
// Event for stopping drawing
|
||||
firstLayer.on('pointerup', () => {
|
||||
isDrawing = false;
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Update any game logic if needed
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
---
|
||||
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,
|
||||
};
|
||||
let draggingAllowed = false;
|
||||
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
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() {
|
||||
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.image('succesImage', '/assets/svg/tick.svg');
|
||||
}
|
||||
|
||||
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');
|
||||
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, () => {
|
||||
firstScreen.setVisible(false);
|
||||
showLayers.call(this);
|
||||
}, [], this);
|
||||
this.add.rectangle(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height, 0x000000, 0.2);
|
||||
|
||||
draggingLine = this.add.graphics();
|
||||
draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);
|
||||
|
||||
// draggingLine = this.add.graphics();
|
||||
// draggingLine.lineStyle(10, 0xff0000).setDepth(1.5); //o\\ 5 is the line width, 0xff0000 is the color (red)
|
||||
}
|
||||
|
||||
function showLayers() {
|
||||
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.4;
|
||||
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 && isWithinDrawingZone(pointer)) {
|
||||
firstTextLayer.setVisible(false);
|
||||
secondTextLayer.setVisible(true);
|
||||
slantRightAudio.play();
|
||||
secondLayer.setVisible(true);
|
||||
firstLayer.setAlpha(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
draggingAllowed = true;
|
||||
} else {
|
||||
firstLayer.setAlpha(0.5);
|
||||
draggingAllowed = false;
|
||||
}
|
||||
});
|
||||
|
||||
secondLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown && isWithinDrawingZone(pointer)) {
|
||||
secondTextLayer.setVisible(false);
|
||||
thirdTextLayer.setVisible(true);
|
||||
slideAudio.play();
|
||||
thirdLayer.setVisible(true);
|
||||
secondLayer.setAlpha(1);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
draggingAllowed = true;
|
||||
} else {
|
||||
secondLayer.setAlpha(0.5);
|
||||
draggingAllowed = false;
|
||||
}
|
||||
});
|
||||
|
||||
thirdLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown && isWithinDrawingZone(pointer)) {
|
||||
thirdLayer.setAlpha(1);
|
||||
thirdTextLayer.setVisible(false);
|
||||
draggingAllowed = true;
|
||||
} else {
|
||||
thirdLayer.setAlpha(0.5);
|
||||
draggingAllowed = false;
|
||||
}
|
||||
});
|
||||
|
||||
this.input.on('pointerdown', dragStart);
|
||||
this.input.on('pointerup', dragEnd);
|
||||
this.input.on('pointermove', drag);
|
||||
}
|
||||
|
||||
function dragStart(pointer) {
|
||||
if (pointer.isDown && isWithinDrawingZone(pointer) && draggingAllowed) {
|
||||
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() {
|
||||
// Update any game logic if needed
|
||||
}
|
||||
|
||||
function isWithinDrawingZone(pointer) {
|
||||
return (
|
||||
pointer.x >= drawingZone.x &&
|
||||
pointer.x <= drawingZone.x + drawingZone.width &&
|
||||
pointer.y >= drawingZone.y &&
|
||||
pointer.y <= drawingZone.y + drawingZone.height
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,158 +0,0 @@
|
|||
---
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
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() {
|
||||
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');
|
||||
}
|
||||
|
||||
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');
|
||||
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, () => {
|
||||
firstScreen.setVisible(false);
|
||||
showLayers.call(this);
|
||||
}, [], this);
|
||||
}
|
||||
|
||||
function showLayers() {
|
||||
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.4;
|
||||
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);
|
||||
|
||||
let isDrawing = false;
|
||||
|
||||
firstLayer.on('drag', (pointer) => {
|
||||
isDrawing = true;
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
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);
|
||||
}
|
||||
});
|
||||
firstLayer.on('pointermove', (pointer) => {
|
||||
if (isDrawing) {
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
thirdLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
thirdLayer.setAlpha(1);
|
||||
thirdTextLayer.setVisible(false);
|
||||
this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
|
||||
} else {
|
||||
thirdLayer.setAlpha(0.5);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Update any game logic if needed
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,266 +0,0 @@
|
|||
---
|
||||
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
|
||||
}
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
let firstLayer, secondLayer, thirdLayer;
|
||||
let graphics;
|
||||
let isDrawing = false;
|
||||
// let hideButton;
|
||||
|
||||
function preload() {
|
||||
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');
|
||||
}
|
||||
|
||||
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, "Let`s Do", { 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
|
||||
graphics.setVisible(true);
|
||||
handPointerLeft.setVisible(false);
|
||||
handPointerRight.setVisible(false);
|
||||
handPointeSlide.setVisible(false);
|
||||
});
|
||||
hideButton.setVisible(false);
|
||||
|
||||
let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
|
||||
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(true);
|
||||
handPointerRight.setVisible(true);
|
||||
handPointeSlide.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);
|
||||
|
||||
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.4;
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
graphics = this.add.graphics();
|
||||
graphics.lineStyle(15, 0x05b3a4, 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();
|
||||
});
|
||||
const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
|
||||
const startHeightLeft = customHeight /2 - 140; // Starting y position
|
||||
const endHeightLeft = 567; // Ending y position
|
||||
const startWidthLeft = customWidth / 2 + 20;
|
||||
const endWidthLeft = customWidth / 2 - 65;
|
||||
// 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 - 140; // Starting y position
|
||||
const endHeightRight = 567; // Ending y position
|
||||
const startWidthRight = customWidth / 2 + 20;
|
||||
const endWidthRight = customWidth - 530;
|
||||
// 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 + 17; // Starting y position
|
||||
const endHeightSlide = customHeight / 2 + 17; // 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 showLayersWithFadeIn() {
|
||||
|
||||
// }
|
||||
|
||||
function update() {
|
||||
// Update any game logic if needed
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<script is:inline>
|
||||
function create() {
|
||||
const startX = 100; // X coordinate for the start point
|
||||
const startY = 300; // Y coordinate for the start point
|
||||
const endY = 500; // Y coordinate for the end point
|
||||
|
||||
const ball = this.add.sprite(startX, startY, 'ball');
|
||||
ball.setScale(0.5); // Adjust scale as needed
|
||||
ball.setOrigin(0.5, 0.5);
|
||||
|
||||
// Define the bounce animation
|
||||
this.tweens.add({
|
||||
targets: ball,
|
||||
y: endY, // End point Y coordinate
|
||||
duration: 1000, // Duration of each bounce
|
||||
ease: 'Sine.easeInOut',
|
||||
yoyo: true,
|
||||
repeat: -1 // -1 means it will repeat indefinitely
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
---
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
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() {
|
||||
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() {
|
||||
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.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.4;
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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() {
|
||||
// Update any game logic if needed
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
---
|
||||
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: 800,
|
||||
height: 600,
|
||||
scene: {
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
let predefinedPath;
|
||||
let dragGraphics;
|
||||
let isDragging = false;
|
||||
|
||||
function create() {
|
||||
// Define the predefined path (letter 'A' in this example)
|
||||
predefinedPath = new Phaser.Curves.Path(100, 300);
|
||||
predefinedPath.lineTo(300, 100);
|
||||
predefinedPath.lineTo(500, 300);
|
||||
predefinedPath.moveTo(200, 200);
|
||||
predefinedPath.lineTo(400, 200);
|
||||
|
||||
// Create graphics for the predefined path (letter 'A' in this example)
|
||||
const graphics = this.add.graphics();
|
||||
graphics.lineStyle(2, 0x00ff00); // Green color for the predefined path
|
||||
predefinedPath.draw(graphics);
|
||||
|
||||
dragGraphics = this.add.graphics();
|
||||
this.input.on('pointerdown', startDragging);
|
||||
this.input.on('pointerup', stopDragging);
|
||||
this.input.on('pointermove', dragWithinPath);
|
||||
}
|
||||
|
||||
function calculateSpacedPoints(curve, spacing) {
|
||||
const spacedPoints = [];
|
||||
|
||||
for (let t = 0; t <= 1; t += spacing) {
|
||||
const point = curve.getPoint(t);
|
||||
spacedPoints.push({ x: point.x, y: point.y });
|
||||
}
|
||||
|
||||
return spacedPoints;
|
||||
}
|
||||
function dragWithinPath(pointer) {
|
||||
if (isDragging) {
|
||||
const dragX = pointer.x;
|
||||
const dragY = pointer.y;
|
||||
|
||||
// Check if the dragged point is inside the predefined path
|
||||
const isInsidePath = predefinedPath.contains(dragX, dragY);
|
||||
|
||||
if (isInsidePath) {
|
||||
// Draw a line to represent the dragged path
|
||||
dragGraphics.lineTo(dragX, dragY);
|
||||
dragGraphics.strokePath();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startDragging(pointer) {
|
||||
if (!isDragging && predefinedPath) {
|
||||
const spacing = 0.02; // Adjust this value as needed
|
||||
const distanceThreshold = 10; // Adjust this value as needed
|
||||
let isNearPath = false;
|
||||
|
||||
// Iterate through the curves of the predefined path
|
||||
for (let i = 0; i < predefinedPath.curves.length; i++) {
|
||||
const curve = predefinedPath.curves[i];
|
||||
const spacedPoints = calculateSpacedPoints(curve, spacing);
|
||||
|
||||
// Check if the pointer is within a certain distance to any of the spaced points
|
||||
for (let j = 0; j < spacedPoints.length; j++) {
|
||||
const point = spacedPoints[j];
|
||||
const distance = Phaser.Math.Distance.Between(point.x, point.y, pointer.x, pointer.y);
|
||||
|
||||
if (distance < distanceThreshold) {
|
||||
isNearPath = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNearPath) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNearPath) {
|
||||
isDragging = true;
|
||||
dragGraphics.clear();
|
||||
dragGraphics.lineStyle(4, 0xff0000); // Red color for the dragging path
|
||||
dragGraphics.beginPath();
|
||||
dragGraphics.moveTo(pointer.x, pointer.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopDragging() {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
isDraggingInsidePath = false; // Reset the flag when dragging stops
|
||||
dragGraphics.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
function dragWithinPath(pointer) {
|
||||
if (isDragging) {
|
||||
// TODO: Fill the dragged area within the predefined path with red color
|
||||
// You can add the logic to fill the dragged area within the predefined path with red color here.
|
||||
// The logic will depend on how you want to fill the area.
|
||||
// For simplicity, you can just draw a line as shown below:
|
||||
dragGraphics.lineTo(pointer.x, pointer.y);
|
||||
dragGraphics.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
// TODO: Update any game logic if needed
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -1,193 +0,0 @@
|
|||
---
|
||||
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
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
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() {
|
||||
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() {
|
||||
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.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.4;
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
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() {
|
||||
// Update any game logic if needed
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,146 +0,0 @@
|
|||
---
|
||||
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,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
|
||||
let predefinedPath;
|
||||
let dragGraphics;
|
||||
let isDragging = false;
|
||||
|
||||
function preload() {
|
||||
this.load.svg('layer1', '/assets/a_l1.svg');
|
||||
this.load.svg('layer2', '/assets/a_l2.svg');
|
||||
this.load.svg('layer3', '/assets/a_l3.svg');
|
||||
}
|
||||
function create() {
|
||||
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
|
||||
firstLayer.setDepth(1);
|
||||
firstLayer.setAlpha(0.5);
|
||||
firstLayer.setInteractive();
|
||||
|
||||
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
|
||||
secondLayer.setDepth(1);
|
||||
secondLayer.setAlpha(0.5);
|
||||
secondLayer.setInteractive();
|
||||
|
||||
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
|
||||
thirdLayer.setDepth(1.1);
|
||||
thirdLayer.setScale(1.15);
|
||||
thirdLayer.setAlpha(0.5);
|
||||
thirdLayer.setInteractive();
|
||||
|
||||
dragGraphics = this.add.graphics();
|
||||
this.input.on('pointerdown', startDragging);
|
||||
this.input.on('pointerup', stopDragging);
|
||||
this.input.on('pointermove', dragWithinPath);
|
||||
}
|
||||
|
||||
function calculateSpacedPoints(curve, spacing) {
|
||||
const spacedPoints = [];
|
||||
|
||||
for (let t = 0; t <= 1; t += spacing) {
|
||||
const point = curve.getPoint(t);
|
||||
spacedPoints.push({ x: point.x, y: point.y });
|
||||
}
|
||||
|
||||
return spacedPoints;
|
||||
}
|
||||
function dragWithinPath(pointer) {
|
||||
if (isDragging) {
|
||||
const dragX = pointer.x;
|
||||
const dragY = pointer.y;
|
||||
|
||||
// Check if the dragged point is inside the predefined path
|
||||
const isInsidePath = predefinedPath.contains(dragX, dragY);
|
||||
|
||||
if (isInsidePath) {
|
||||
// Draw a line to represent the dragged path
|
||||
dragGraphics.lineTo(dragX, dragY);
|
||||
dragGraphics.strokePath();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function startDragging(pointer) {
|
||||
if (!isDragging && predefinedPath) {
|
||||
firstLayer.setAlpha(1);
|
||||
let isNearPath = false;
|
||||
|
||||
// Iterate through the curves of the predefined path
|
||||
for (let i = 0; i < predefinedPath.curves.length; i++) {
|
||||
const curve = predefinedPath.curves[i];
|
||||
const spacedPoints = calculateSpacedPoints(curve, spacing);
|
||||
|
||||
// Check if the pointer is within a certain distance to any of the spaced points
|
||||
for (let j = 0; j < spacedPoints.length; j++) {
|
||||
const point = spacedPoints[j];
|
||||
const distance = Phaser.Math.Distance.Between(point.x, point.y, pointer.x, pointer.y);
|
||||
|
||||
if (distance < distanceThreshold) {
|
||||
isNearPath = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNearPath) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (isNearPath) {
|
||||
isDragging = true;
|
||||
dragGraphics.clear();
|
||||
dragGraphics.beginPath();
|
||||
dragGraphics.moveTo(pointer.x, pointer.y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function stopDragging() {
|
||||
if (isDragging) {
|
||||
isDragging = false;
|
||||
isDraggingInsidePath = false; // Reset the flag when dragging stops
|
||||
dragGraphics.closePath();
|
||||
}
|
||||
}
|
||||
|
||||
function dragWithinPath(pointer) {
|
||||
if (isDragging) {
|
||||
// TODO: Fill the dragged area within the predefined path with red color
|
||||
// You can add the logic to fill the dragged area within the predefined path with red color here.
|
||||
// The logic will depend on how you want to fill the area.
|
||||
// For simplicity, you can just draw a line as shown below:
|
||||
dragGraphics.lineTo(pointer.x, pointer.y);
|
||||
dragGraphics.strokePath();
|
||||
}
|
||||
}
|
||||
|
||||
function update() {
|
||||
// TODO: Update any game logic if needed
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
Loading…
Reference in New Issue