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

game name from get parameter

Browse Source
This commit is contained in:
Suvodip
2024-10-18 16:59:03 +05:30
parent 9ebf6f5d60
commit ff80faaf7d
7 changed files with 175 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/drag/v4.astro
View File

@@ -573,7 +573,7 @@ import Layout from '../../layouts/Layout.astro';
// console.log(match)
if(match !== undefined){
scoreTotal++;
// console.log("Score Total", scoreTotal)
console.log("Score Total", scoreTotal)
}
if(counter === 8){
// console.log(counter)

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

@@ -254,8 +254,8 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('galleryIcons', '/assets/svg/gallery-icon.svg');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg');
this.load.image('colorButton', '/assets/color_button.png');
}

252
src/pages/guided-tracing/0.astro
View File

@@ -9,8 +9,10 @@ import Layout from "../../layouts/Layout.astro";
</main>
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
@@ -22,7 +24,7 @@ import Layout from "../../layouts/Layout.astro";
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xFFFFFF,
backgroundColor: 0xebedea,
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
@@ -44,10 +46,65 @@ import Layout from "../../layouts/Layout.astro";
let animatedLetter;
let scoreTotal = 0;
// const urls = window.location.href;
// const gameNames = urls.split('/');
// const gameTypes = gameNames[3].split('?id=');
// console.log(gameTypes[0]);
let topLogoWidth;
let muteIconWidth;
let galleryIconWidth;
let resetIconWidth;
let tickIconWidth;
let cancelIconWidth;
var assetsList = {}
var snapshotButton;
let submitButton;
let demoButtonButton;
let shortUniqueID;
let noticeWidth;
let noticeHeight;
let muteIcon;
let retryButton;
let maxScore;
let cancelIcon;
if(isMobile){
topLogoWidth = 4.5;
muteIconWidth = 1.65;
resetIconWidth = 1.40;
tickIconWidth = 1.21;
cancelIconWidth = 1.08;
galleryIconWidth = 2;
}else if(isTab){
topLogoWidth = 4.5;
muteIconWidth = 1.6;
resetIconWidth = 1.43;
tickIconWidth = 1.29;
cancelIconWidth = 1.18;
galleryIconWidth = 1.81;
}else{
topLogoWidth = 6;
muteIconWidth = 1.3;
resetIconWidth = 1.26;
tickIconWidth = 1.222;
cancelIconWidth = 1.185;
galleryIconWidth = 1.345;
}
if(isMobile){
submitWidth = 250;
submitHeight = 110;
noticeWidth = 100;
noticeHeight = 0;
downloadWidth = 67;
downloadHeight = 200;
learningWidth = 200;
learningHeight = 400
}else {
submitWidth = 380;
submitHeight = 95;
noticeWidth = 0;
noticeHeight = 0;
downloadWidth = 180;
downloadHeight = 70;
learningWidth = 450;
learningHeight = 400
}
if(isMobile){
@@ -56,13 +113,13 @@ import Layout from "../../layouts/Layout.astro";
canvasScale = 0.14
canvasHeight = 35;
letterHeight = 30;
letterScale = 1.1;
letterScale = 1.8;
backgroundScale = 0.8;
sunScale = 0.1;
sunScalePlus = 0.15;
sunWidth = 70;
sunHeight = 70;
animated0videoScale = 0.6;
animated0videoScale = 1;
animated0Height = 32;
helpButtonHeight = customHeight / 1.1;
helpButtonWidth = customWidth / 2 + 10;
@@ -73,20 +130,19 @@ import Layout from "../../layouts/Layout.astro";
submitHeight = customHeight / 1.1;
noticeWidth = window.innerWidth * 0.5 - 100;
noticeHeight = window.innerHeight * 0.38;
} else{
cloudeSize = 500;
cloudHeight = 250;
canvasScale = 0.195;
canvasHeight = 20;
letterHeight = 10;
letterScale = 1.2;
letterScale = 1.8;
backgroundScale = 1;
sunScale = 0.2;
sunScalePlus = 0.25;
sunWidth = 200;
sunHeight = 100;
animated0videoScale = 0.70;
animated0videoScale = 1;
animated0Height = 20;
helpButtonHeight = customHeight / 2 + 40;
helpButtonWidth = customWidth / 1.32;
@@ -119,17 +175,32 @@ import Layout from "../../layouts/Layout.astro";
this.load.svg('succesImage', '/assets/svg/tick.svg');
this.load.svg('hintImage', '/assets/svg/hint.svg');
this.load.svg('handPointer', '/assets/svg/hand.svg');
this.load.image('backgroundImage', '/assets/bg6.png');
this.load.image('cloud', '/assets/cloud.png');
this.load.image('canvas', '/assets/canvas4.png');
this.load.image('sun', '/assets/sun.png');
this.load.image('bgMobile', '/assets/bgMobile.png');
this.load.image('canvasStand', '/assets/stand2.png');
this.load.image("tickIcon", '/assets/svg/tick2.svg');
this.load.image("muteIcon", '/assets/svg/mute.svg');
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.svg('helpIcons', '/assets/svg/help_icon.svg');
}
function create() {
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
this.add.image(customWidth / topLogoWidth, 30, "topLogo");
muteIcon = this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
demoButton = this.add.image(customWidth / galleryIconWidth, 30, "helpIcons");
submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
cancelIcon = this.add.image(customWidth / cancelIconWidth, 30, "cancelIcon");
const borderBottom = this.add.graphics();
const x = 0; const y = 54;
const lineWidth = window.innerWidth;
borderBottom.lineStyle(1, 0x0348A8);
borderBottom.setAlpha(0.2);
borderBottom.beginPath();
borderBottom.moveTo(x, y);
borderBottom.lineTo(x + lineWidth, y);
borderBottom.strokePath();
submitButton = this.add.text(submitWidth, submitHeight, "Submit", {
font: '900 24px Quicksand',
fill: '#05b3a4',
@@ -149,103 +220,39 @@ import Layout from "../../layouts/Layout.astro";
// console.log('Clicked');
submitUserData(this);
})
this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
// this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
cloud.setDepth(-1.8);
const scrollSpeed = 0.5;
this.time.addEvent({
loop: true,
callback: () => {
cloud.tilePositionX += scrollSpeed;
},
delay: 16, // Adjust the delay for the desired scrolling speed
});
const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
const duration = 3000; // Duration of the animation in milliseconds
// Create a scaling tween
this.tweens.add({
targets: sun,
scaleX: scaleFactor,
scaleY: scaleFactor,
duration: duration,
ease: 'Linear',
yoyo: true, // Makes the animation play in reverse
repeat: -1 // Repeat indefinitely
});
const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const number0 = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
// const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated0').setDepth(2); canvasStand
firstScreen.setVisible(false);
// this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
// Set up a mask for the drawing area based on the canvas dimensions
const maskGraphics = this.make.graphics()
maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
const mask = maskGraphics.createGeometryMask();
let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
hideButton.setInteractive().on('pointerdown', () => {
animatedLetter.stop();
isDemoButtonClicked = false;
firstScreen.setVisible(false);
hideButton.setVisible(false); // Hide the "Hide" button
demoButton.setVisible(true); // Show the "Demo" button
graphics.setVisible(true);
animatedLetter.setVisible(false);
});
hideButton.setVisible(false);
let demoButton = this.add.text(helpButtonWidth, helpButtonHeight, "Demo", {
font: '900 24px quicksand',
fill: '#05b3a4',
backgroundColor: '#7c4c23',
padding: { x: 20, y: 10 },
borderRadius: '15px', // Border radius
shadow: {
offsetX: 2, // X offset for the shadow
offsetY: 2, // Y offset for the shadow
color: '#000', // Shadow color
blur: 5, // Shadow blur
fill: true // Apply shadow to fill (background color)
}
});
demoButton.setInteractive().on('pointerdown', () => {
animatedLetter.setCurrentTime(0);
animatedLetter.play(true);
graphics.setVisible(false);
firstScreen.setVisible(true);
demoButton.setVisible(false); // Hide the "Demo" button
hideButton.setVisible(true); // Show the "Hide" button
animatedLetter.setVisible(true);
// animatedLetter.setVisible(true);
if(animatedLetter.visible){
animatedLetter.setVisible(false);
graphics.setVisible(true);
} else{
graphics.setVisible(false);
animatedLetter.setVisible(true);
}
// animatedLetter.visible ? animatedLetter.setVisible(false): animatedLetter.setVisible(true);
});
// const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// const baseFontSize = 16;
// const responsiveFontSize = (window.innerWidth / 550) * baseFontSize;
let responsiveFontSize = isMobile ? 16 : 32;
this.add.text(window.innerWidth / 2, 80, 'Number: 0', {fill: '#60C6CB', font: `900 ${responsiveFontSize}px quicksand`}).setOrigin(0.5);
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
const baseFontSize = 24;
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
const descrptText = this.add.text(window.innerWidth/2, 125, 'Let`s learn how to write number : 0', { font: `900 ${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
animatedLetter.setLoop(true);
// Play the video
@@ -261,11 +268,13 @@ import Layout from "../../layouts/Layout.astro";
});
let textX, textY;
let stepTextSize = isMobile ? 12 : 16;
firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
textX = isMobile ? customWidth / 4 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2.4;
const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
const firstTextLayer = this.add.text(window.innerWidth / 2, window.innerHeight / 1.2, '1. Hook Around Close',{ font: `600 ${stepTextSize}px quicksand`, fill: '#000000'}).setOrigin(0.5);
const audioOneAudio = this.sound.add('audioOne');
// audioOneAudio.play();
firstLayer.setDepth(1);
@@ -288,7 +297,7 @@ import Layout from "../../layouts/Layout.astro";
if (distance >= 0) {
firstTextLayer.setVisible(false);
// firstTextLayer.setVisible(false);
firstLayer.setAlpha(1);
} else {
firstLayer.setAlpha(0.5);
@@ -298,7 +307,7 @@ import Layout from "../../layouts/Layout.astro";
graphics = this.add.graphics();
graphics.setMask(mask);
// graphics.setMask(mask);
graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
this.input.on('pointerdown', function (pointer) {
isDrawing = true;
@@ -328,22 +337,21 @@ import Layout from "../../layouts/Layout.astro";
fill: true
}
})
firstTextLayer.setVisible(false);
startButton.setInteractive().on('pointerdown', () => {
audioOneAudio.play();
// gmStartTime();
gamestart = new Date();
gameStartTime = gamestart.toLocaleString();
// console.log("Page loaded on: " + gameStartTime);
firstTextLayer.setVisible(true);
animatedLetter.setVisible(false);
firstScreen.setVisible(false);
graphics.setVisible(true);
hideButton.setVisible(false);
demoButton.setVisible(true);
startButton.setVisible(false);
submitButton.setVisible(true);
})
audioOneAudio.play();
// startButton.setInteractive().on('pointerdown', () => {
// audioOneAudio.play();
// // gmStartTime();
// gamestart = new Date();
// gameStartTime = gamestart.toLocaleString();
// // console.log("Page loaded on: " + gameStartTime);
// firstTextLayer.setVisible(true);
// animatedLetter.setVisible(false);
// firstScreen.setVisible(false);
// graphics.setVisible(true);
// demoButton.setVisible(true);
// startButton.setVisible(false);
// submitButton.setVisible(true);
// })
}