file name small to capital
This commit is contained in:
@@ -1,148 +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;
|
||||
let graphics;
|
||||
let isDrawing = false;
|
||||
let ellipseCenter;
|
||||
let ellipseRadiusX = 74;
|
||||
let ellipseRadiusY = 100;
|
||||
let angle = 0;
|
||||
let rotationSpeed = 0.02; // Adjust rotation speed as needed
|
||||
let rotatingObject;
|
||||
// let hideButton;
|
||||
|
||||
function preload() {
|
||||
this.load.svg('letterO', '/assets/capital-letter/o.svg');
|
||||
this.load.svg('layer1', '/assets/capital-letter/o.svg');
|
||||
this.load.audio('hookAroundClose', '/assets/audio/hook-arround-close.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, 'letterO');
|
||||
firstScreen.setVisible(false);
|
||||
|
||||
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;
|
||||
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close', { font: '700 40px quicksand', fill: '#05b3a4'});
|
||||
const hookAroundClose = this.sound.add('hookAroundClose');
|
||||
hookAroundClose.play();
|
||||
firstLayer.setDepth(1);
|
||||
firstLayer.setAlpha(0.5);
|
||||
firstLayer.setInteractive({ draggable: true });
|
||||
|
||||
|
||||
|
||||
firstLayer.on('drag', (pointer) => {
|
||||
if (pointer.isDown) {
|
||||
firstTextLayer.setVisible(false);
|
||||
firstLayer.setAlpha(1);
|
||||
} else {
|
||||
firstLayer.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);
|
||||
// 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();
|
||||
});
|
||||
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
|
||||
|
||||
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);
|
||||
hideButton.setVisible(false);
|
||||
rotatingObject.setVisible(false);
|
||||
});
|
||||
hideButton.setVisible(false);
|
||||
rotatingObject.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
|
||||
rotatingObject.setVisible(true);
|
||||
});
|
||||
}
|
||||
|
||||
function update() {
|
||||
angle -= rotationSpeed;
|
||||
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>
|
||||
Reference in New Issue
Block a user