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

pull/5/head
Dev 1 2023-10-06 18:20:59 +05:30
parent 2e1fef6390
commit 1178b1bd29
3 changed files with 94 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/svg/button-icon.svg
View File

@ -1 +1 @@
<svg fill="#0000FF" width="40px" height="40px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M790.706 338.824v112.94H395.412c-31.06 0-56.47 25.3-56.47 56.471v744.509c17.73-6.325 36.592-10.391 56.47-10.391h1129.412c19.877 0 38.738 4.066 56.47 10.39V508.236c0-31.171-25.412-56.47-56.47-56.47h-395.295V338.824h395.295c93.402 0 169.411 76.009 169.411 169.411v1242.353c0 93.403-76.01 169.412-169.411 169.412H395.412C302.009 1920 226 1843.99 226 1750.588V508.235c0-93.402 76.01-169.411 169.412-169.411h395.294Zm734.118 1016.47H395.412c-31.06 0-56.47 25.299-56.47 56.47v338.824c0 31.172 25.41 56.47 56.47 56.47h1129.412c31.058 0 56.47-25.298 56.47-56.47v-338.823c0-31.172-25.412-56.47-56.47-56.47ZM1016.622-.023v880.151l246.212-246.325 79.85 79.85-382.532 382.644-382.645-382.644 79.85-79.85L903.68 880.128V-.022h112.941ZM564.824 1468.235c-62.344 0-112.942 50.71-112.942 112.941s50.598 112.942 112.942 112.942c62.343 0 112.94-50.71 112.94-112.942 0-62.23-50.597-112.94-112.94-112.94Z" fill-rule="evenodd"></path> </g></svg> <svg width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#eceaea" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ff0000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 698 B

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

@ -47,8 +47,8 @@ import Layout from '../../layouts/Layout.astro';
.catch(error => { .catch(error => {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const customWidth = window.innerWidth;
const displayH = window.innerHeight; const customHeight = window.innerHeight;
let graphics; let graphics;
let isDrawing = false; let isDrawing = false;
let selectedColor = '#f00f0f'; // Default color let selectedColor = '#f00f0f'; // Default color
@ -79,13 +79,13 @@ import Layout from '../../layouts/Layout.astro';
}); });
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',}; const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
if(!isMobile){ if(!isMobile){
this.add.text(displayW / 10, 20, "Drawing", textStyle); this.add.text(customWidth / 10, 20, "Drawing", textStyle);
this.add.image(displayW / 2 * 1.6 - 0.5, 50, 'topLogo'); this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
} else { } else {
this.add.text(displayW / 30, 0, "Drawing", textStyle); this.add.text(customWidth / 30, 0, "Drawing", textStyle);
this.add.image(displayW / 2 * 1.6 - 0.5, 25, 'topLogo'); 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){ if(isMobile){
outlineImage.setDepth(1).setScale(0.5); outlineImage.setDepth(1).setScale(0.5);
} else{ } else{
@ -95,7 +95,7 @@ import Layout from '../../layouts/Layout.astro';
graphics = this.add.graphics(); graphics = this.add.graphics();
const colorContainer = document.createElement('div'); const colorContainer = document.createElement('div');
colorContainer.style.position = 'absolute'; colorContainer.style.position = 'absolute';
colorContainer.style.top = '10%'; colorContainer.style.top = '13%';
colorContainer.style.left = '10px'; colorContainer.style.left = '10px';
colorContainer.style.display = 'flex'; colorContainer.style.display = 'flex';
colorContainer.style.marginBottom = '15px'; colorContainer.style.marginBottom = '15px';
@ -165,8 +165,8 @@ import Layout from '../../layouts/Layout.astro';
button.style.width = `${buttonSize}px`; button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`; button.style.height = `${buttonSize}px`;
} else { } else {
button.style.width = `40px`; button.style.width = `45px`;
button.style.height = `40px`; button.style.height = `45px`;
} }
button.style.boxShadow = '5px 10px 30px #7c4c2390'; button.style.boxShadow = '5px 10px 30px #7c4c2390';
@ -211,12 +211,15 @@ import Layout from '../../layouts/Layout.astro';
const buttonsContainer = document.createElement('div'); const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute'; buttonsContainer.style.position = 'absolute';
buttonsContainer.style.display = 'flex'; buttonsContainer.style.display = 'flex';
buttonsContainer.style.flexDirection = 'row';
buttonsContainer.style.top = '0%'; buttonsContainer.style.top = '0%';
buttonsContainer.style.marginTop = '30px';
if(!isMobile){ if(!isMobile){
// buttonsContainer.style.position = 'fixed'; // buttonsContainer.style.position = 'fixed';
buttonsContainer.style.top = '25%'; buttonsContainer.style.top = '25%';
buttonsContainer.style.flexDirection = 'column'; buttonsContainer.style.flexDirection = 'column';
buttonsContainer.style.marginLeft = '60px'; buttonsContainer.style.marginLeft = '60px';
buttonsContainer.style.marginTop = '0%';
} }
buttonsContainer.style.left = '20px'; buttonsContainer.style.left = '20px';
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge // 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.width = 'fit-content';
clearButton.style.marginRight = '10px'; clearButton.style.marginRight = '10px';
if(isMobile){ if(isMobile){
clearButton.style.padding = '1px 4px'; clearButton.style.padding = '2px 8px';
buttonsContainer.style.top = '17%'; buttonsContainer.style.top = '17%';
} else { } else {
clearButton.style.padding = '5px 10px'; clearButton.style.padding = '5px 10px';
@ -252,7 +255,7 @@ import Layout from '../../layouts/Layout.astro';
// eraserButton.style.marginTop = '0px'; // eraserButton.style.marginTop = '0px';
eraserButton.style.marginBottom = '0px'; eraserButton.style.marginBottom = '0px';
if(isMobile){ if(isMobile){
eraserButton.style.padding = '1px 1px'; eraserButton.style.padding = '4px 4px';
} else { } else {
eraserButton.style.padding = '5px 5px'; eraserButton.style.padding = '5px 5px';
eraserButton.style.marginTop = '15px'; eraserButton.style.marginTop = '15px';
@ -318,7 +321,7 @@ import Layout from '../../layouts/Layout.astro';
isDrawing = false; isDrawing = false;
}); });
customCursor = this.add.graphics(); customCursor = this.add.graphics();
customCursor.setDepth(2)
// Disable the default cursor // Disable the default cursor
this.input.setDefaultCursor('none'); this.input.setDefaultCursor('none');
const borderThickness = 0; const borderThickness = 0;
@ -326,29 +329,40 @@ import Layout from '../../layouts/Layout.astro';
const borderGraphics = this.add.graphics(); const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor); borderGraphics.lineStyle(borderThickness, borderColor);
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
function continueDrawing(x, y) { function continueDrawing(x, y) {
// Check if the pointer coordinates are within the drawing zone // Check if the pointer coordinates are within the drawing zone
if ( if (
x >= drawingZone.x && x >= drawingZone.x &&
x <= drawingZone.x + drawingZone.width && x <= drawingZone.x + drawingZone.width &&
y >= drawingZone.y && y >= drawingZone.y &&
y <= drawingZone.y + drawingZone.height y <= drawingZone.y + drawingZone.height
) { ) {
// The pointer is within the drawing zone, so continue drawing // The pointer is within the drawing zone, so continue drawing
graphics.lineTo(x, y); graphics.lineTo(x, y);
graphics.strokePath(); graphics.strokePath();
} }
}; };
// Add a "Save Snapshot" button // Add a "Save Snapshot" button
snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons'); if(isMobile){
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10); snapWidth = 50;
snapshotButton.setInteractive(); snapHeight = 70;
snapshotButton.on('pointerdown', () => { } else {
captureSnapshot(this); 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) { function captureSnapshot(drawingZone) {
snapshotButton.setVisible(false);
customCursor.setVisible(false);
drawingZone.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
snapshotButton.setVisible(true);
customCursor.setVisible(true);
image.style.width = '160px'; image.style.width = '160px';
image.style.height = '120px'; image.style.height = '120px';
image.style.paddingLeft = '2px'; image.style.paddingLeft = '2px';
@ -434,8 +448,8 @@ import Layout from '../../layouts/Layout.astro';
// }; // };
// const drawingZone = new Phaser.Game(config); // const drawingZone = new Phaser.Game(config);
// const displayW = window.innerWidth; // const customWidth = window.innerWidth;
// const displayH = window.innerHeight; // const customHeight = window.innerHeight;
// let graphics; // let graphics;
// let outlineImage; // let outlineImage;
@ -448,7 +462,7 @@ import Layout from '../../layouts/Layout.astro';
// } // }
// function create() { // function create() {
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline'); // outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
// graphics = this.add.graphics(); // graphics = this.add.graphics();
@ -553,8 +567,8 @@ import Layout from '../../layouts/Layout.astro';
// }; // };
// const game = new Phaser.Game(config); // const game = new Phaser.Game(config);
// const displayW = window.innerWidth; // const customWidth = window.innerWidth;
// const displayH = window.innerHeight; // const customHeight = window.innerHeight;
// let graphics; // let graphics;
// let outlineImage; // let outlineImage;
@ -567,7 +581,7 @@ import Layout from '../../layouts/Layout.astro';
// } // }
// function create() { // function create() {
// outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline'); // outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
// graphics = this.add.graphics(); // 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 game = new Phaser.Game(config);
const customWidth = window.innerWidth; const customWidth = window.innerWidth;
const customHeight = window.innerHeight; const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer; let firstLayer, secondLayer, thirdLayer, fourthLayer;
let graphics; let graphics;
let isDrawing = false; 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('layer1', '/assets/capital-letter/e_l1.svg');
this.load.svg('layer2', '/assets/capital-letter/e_l2.svg'); this.load.svg('layer2', '/assets/capital-letter/e_l2.svg');
this.load.svg('layer3', '/assets/capital-letter/e_l3.svg'); this.load.svg('layer3', '/assets/capital-letter/e_l3.svg');
this.load.audio('audioOne', '/assets/audio/slant-left.mp3'); this.load.svg('layer4', '/assets/capital-letter/e_l4.svg');
this.load.audio('audioTwo', '/assets/audio/slant-right.mp3'); 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.audio('audioThree', '/assets/audio/slide.mp3');
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('succesImage', '/assets/svg/tick.svg'); 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); secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75; 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'); const audioTwoAudio = this.sound.add('audioTwo');
secondTextLayer.setVisible(false); secondTextLayer.setVisible(false);
secondLayer.setDepth(1); 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); thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
textX = isMobile ? customWidth / 3 : customWidth * 0.75; textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'}); 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); thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1); thirdLayer.setDepth(1.1);
// thirdLayer.setScale(1.15); // thirdLayer.setScale(1.15);
@ -253,12 +254,22 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setInteractive({ draggable: true }); thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false); 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 // Add these variables to keep track of start points
let firstDragStartPoint = { x: 0, y: 0 }; let firstDragStartPoint = { x: 0, y: 0 };
let secondDragStartPoint = { x: 0, y: 0 }; let secondDragStartPoint = { x: 0, y: 0 };
let thirdDragStartPoint = { x: 0, y: 0 }; let thirdDragStartPoint = { x: 0, y: 0 };
let fourthDragStartPoint = { x: 0, y: 0 };
// ...
// Add this code for firstLayer // Add this code for firstLayer
firstLayer.on('dragstart', (pointer) => { 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); const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
if (distance >= 100) { if (distance >= 100) {
firstTextLayer.setVisible(false); firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true); secondTextLayer.setVisible(true);
audioTwoAudio.play(); audioTwoAudio.play();
@ -278,6 +288,7 @@ import Layout from "../../layouts/Layout.astro";
firstLayer.setAlpha(1); firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5); secondLayer.setAlpha(0.5);
thirdLayer.setAlpha(0.5); thirdLayer.setAlpha(0.5);
fourthLayer.setAlpha(0.5);
} else { } else {
firstLayer.setAlpha(0.5); firstLayer.setAlpha(0.5);
} }
@ -301,6 +312,7 @@ import Layout from "../../layouts/Layout.astro";
thirdLayer.setVisible(true); thirdLayer.setVisible(true);
secondLayer.setAlpha(1); secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5); thirdLayer.setAlpha(0.5);
fourthLayer.setAlpha(0.5);
} else { } else {
secondLayer.setAlpha(0.5); secondLayer.setAlpha(0.5);
} }
@ -318,11 +330,31 @@ import Layout from "../../layouts/Layout.astro";
if (distance >= 100) { if (distance >= 100) {
thirdLayer.setAlpha(1); thirdLayer.setAlpha(1);
thirdTextLayer.setVisible(false); thirdTextLayer.setVisible(false);
fourthTextLayer.setVisible(true);
fourthLayer.setVisible(true);
fourthLayer.setAlpha(0.5);
audioFourthAudio.play();
} else { } else {
thirdLayer.setAlpha(0.5); 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 = this.add.graphics();
graphics.setMask(mask); graphics.setMask(mask);