kar/phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

little changes in drag game and guided letter tracing game

Browse Source
This commit is contained in:
Dev 1
2023-10-06 18:20:59 +05:30
parent 2e1fef6390
commit 1178b1bd29
3 changed files with 94 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
src/pages/drawing/index.astro
View File

@@ -47,8 +47,8 @@ import Layout from '../../layouts/Layout.astro';
.catch(error => {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
const displayH = window.innerHeight;
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let graphics;
let isDrawing = false;
let selectedColor = '#f00f0f'; // Default color
@@ -79,13 +79,13 @@ import Layout from '../../layouts/Layout.astro';
});
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){
this.add.text(displayW / 10, 20, "Drawing", textStyle);
this.add.image(displayW / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Drawing", textStyle);
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
} else {
this.add.text(displayW / 30, 0, "Drawing", textStyle);
this.add.image(displayW / 2 * 1.6 - 0.5, 25, 'topLogo');
this.add.text(customWidth / 30, 0, "Drawing", textStyle);
this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
}
const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
if(isMobile){
outlineImage.setDepth(1).setScale(0.5);
} else{
@@ -95,7 +95,7 @@ import Layout from '../../layouts/Layout.astro';
graphics = this.add.graphics();
const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute';
colorContainer.style.top = '10%';
colorContainer.style.top = '13%';
colorContainer.style.left = '10px';
colorContainer.style.display = 'flex';
colorContainer.style.marginBottom = '15px';
@@ -165,8 +165,8 @@ import Layout from '../../layouts/Layout.astro';
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
} else {
button.style.width = `40px`;
button.style.height = `40px`;
button.style.width = `45px`;
button.style.height = `45px`;
}
button.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -211,12 +211,15 @@ import Layout from '../../layouts/Layout.astro';
const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute';
buttonsContainer.style.display = 'flex';
buttonsContainer.style.flexDirection = 'row';
buttonsContainer.style.top = '0%';
buttonsContainer.style.marginTop = '30px';
if(!isMobile){
// buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '25%';
buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px';
buttonsContainer.style.marginTop = '0%';
}
buttonsContainer.style.left = '20px';
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
@@ -229,7 +232,7 @@ import Layout from '../../layouts/Layout.astro';
clearButton.style.width = 'fit-content';
clearButton.style.marginRight = '10px';
if(isMobile){
clearButton.style.padding = '1px 4px';
clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%';
} else {
clearButton.style.padding = '5px 10px';
@@ -252,7 +255,7 @@ import Layout from '../../layouts/Layout.astro';
// eraserButton.style.marginTop = '0px';
eraserButton.style.marginBottom = '0px';
if(isMobile){
eraserButton.style.padding = '1px 1px';
eraserButton.style.padding = '4px 4px';
} else {
eraserButton.style.padding = '5px 5px';
eraserButton.style.marginTop = '15px';
@@ -318,7 +321,7 @@ import Layout from '../../layouts/Layout.astro';
isDrawing = false;
});
customCursor = this.add.graphics();
customCursor.setDepth(2)
// Disable the default cursor
this.input.setDefaultCursor('none');
const borderThickness = 0;
@@ -326,29 +329,40 @@ import Layout from '../../layouts/Layout.astro';
const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor);
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
function continueDrawing(x, y) {
// Check if the pointer coordinates are within the drawing zone
if (
x >= drawingZone.x &&
x <= drawingZone.x + drawingZone.width &&
y >= drawingZone.y &&
y <= drawingZone.y + drawingZone.height
) {
// The pointer is within the drawing zone, so continue drawing
graphics.lineTo(x, y);
graphics.strokePath();
}
};
// Add a "Save Snapshot" button
snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons');
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {
captureSnapshot(this);
});
function continueDrawing(x, y) {
// Check if the pointer coordinates are within the drawing zone
if (
x >= drawingZone.x &&
x <= drawingZone.x + drawingZone.width &&
y >= drawingZone.y &&
y <= drawingZone.y + drawingZone.height
) {
// The pointer is within the drawing zone, so continue drawing
graphics.lineTo(x, y);
graphics.strokePath();
}
};
// Add a "Save Snapshot" button
if(isMobile){
snapWidth = 50;
snapHeight = 70;
} else {
snapWidth = 200;
snapHeight = 70;
}
snapshotButton = this.add.image(window.innerWidth - snapWidth, window.innerHeight - snapHeight, 'buttonIcons');
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {
captureSnapshot(this);
});
}
function captureSnapshot(drawingZone) {
snapshotButton.setVisible(false);
customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => {
snapshotButton.setVisible(true);
customCursor.setVisible(true);
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
@@ -434,8 +448,8 @@ import Layout from '../../layouts/Layout.astro';
// };
// const drawingZone = new Phaser.Game(config);
// const displayW = window.innerWidth;
// const displayH = window.innerHeight;
// const customWidth = window.innerWidth;
// const customHeight = window.innerHeight;
// let graphics;
// let outlineImage;
@@ -448,7 +462,7 @@ import Layout from '../../layouts/Layout.astro';
// }
// function create() {
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
// outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
// graphics = this.add.graphics();
@@ -553,8 +567,8 @@ import Layout from '../../layouts/Layout.astro';
// };
// const game = new Phaser.Game(config);
// const displayW = window.innerWidth;
// const displayH = window.innerHeight;
// const customWidth = window.innerWidth;
// const customHeight = window.innerHeight;
// let graphics;
// let outlineImage;
@@ -567,7 +581,7 @@ import Layout from '../../layouts/Layout.astro';
// }
// function create() {
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline');
// outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
// graphics = this.add.graphics();

48
src/pages/guided-tracing/e.astro
View File

@@ -36,7 +36,7 @@ import Layout from "../../layouts/Layout.astro";
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics;
let isDrawing = false;
@@ -81,8 +81,9 @@ import Layout from "../../layouts/Layout.astro";
this.load.svg('layer1', '/assets/capital-letter/e_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/e_l2.svg');
this.load.svg('layer3', '/assets/capital-letter/e_l3.svg');
this.load.audio('audioOne', '/assets/audio/slant-left.mp3');
this.load.audio('audioTwo', '/assets/audio/slant-right.mp3');
this.load.svg('layer4', '/assets/capital-letter/e_l4.svg');
this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
this.load.audio('audioTwo', '/assets/audio/slide.mp3');
this.load.audio('audioThree', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg');
@@ -234,7 +235,7 @@ import Layout from "../../layouts/Layout.astro";
secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
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);
@@ -245,7 +246,7 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer = this.add.image(customWidth / 2 - 20, 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('audioThree');
const audioThreeAudio = this.sound.add('audioTwo');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15);
@@ -253,12 +254,22 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false);
fourthLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const fourthTextLayer = this.add.text(textX, textY, '4. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
const audioFourthAudio = this.sound.add('audioTwo');
fourthTextLayer.setVisible(false);
fourthLayer.setDepth(1.1);
// fourthLayer.setScale(1.15);
fourthLayer.setAlpha(0.5);
fourthLayer.setInteractive({ draggable: true });
fourthLayer.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 };
// ...
let fourthDragStartPoint = { x: 0, y: 0 };
// Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => {
@@ -270,7 +281,6 @@ import Layout from "../../layouts/Layout.astro";
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();
@@ -278,6 +288,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
thirdLayer.setAlpha(0.5);
fourthLayer.setAlpha(0.5);
} else {
firstLayer.setAlpha(0.5);
}
@@ -301,6 +312,7 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setVisible(true);
secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5);
fourthLayer.setAlpha(0.5);
} else {
secondLayer.setAlpha(0.5);
}
@@ -318,11 +330,31 @@ import Layout from "../../layouts/Layout.astro";
if (distance >= 100) {
thirdLayer.setAlpha(1);
thirdTextLayer.setVisible(false);
fourthTextLayer.setVisible(true);
fourthLayer.setVisible(true);
fourthLayer.setAlpha(0.5);
audioFourthAudio.play();
} else {
thirdLayer.setAlpha(0.5);
}
});
fourthLayer.on('dragstart', (pointer) => {
fourthDragStartPoint.x = pointer.x;
fourthDragStartPoint.y = pointer.y;
});
fourthLayer.on('drag', (pointer) => {
const distance = Phaser.Math.Distance.Between(fourthDragStartPoint.x, fourthDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) {
fourthLayer.setAlpha(1);
fourthTextLayer.setVisible(false);
} else {
fourthLayer.setAlpha(0.5);
}
});
graphics = this.add.graphics();
graphics.setMask(mask);