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

change drawing v2, drag v2, drag v3

Browse Source
This commit is contained in:
dev sp
2024-01-23 13:24:00 +00:00
parent a3ad792a96
commit a65cee3ba9
7 changed files with 1447 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/pages/drag/v2.astro
View File

@@ -86,9 +86,6 @@ import Layout from '../../layouts/Layout.astro';
// Format the date and time as a string
formattedDateTime = currentDate.toLocaleString();
// Log the formatted date and time to the console
// // console.log("Page loaded on: " + formattedDateTime);
};
function generateShortUniqueID(length) {14
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
@@ -233,11 +230,6 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png');
// this.load.image("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
@@ -301,7 +293,6 @@ import Layout from '../../layouts/Layout.astro';
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
// Base font size for your text
const baseFontSize = 30;
// Calculate responsive font size based on screen width
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
@@ -310,16 +301,21 @@ import Layout from '../../layouts/Layout.astro';
// this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
// this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
// Left Image Name
this.add.text(displayW / 14 - 15, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 409, data.left_image2_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 579, data.left_image3_name).setTint(0x7c4c23);
this.add.text(displayW / 14 - 15, 750, data.left_image4_name).setTint(0x7c4c23);
let customWidth = window.innerWidth;
let customHeight = window.innerHeight;
let nameTextSize;
let namePosition;
if(isMobile){nameTextSize = `10px`; namePosition = 30}else{nameTextSize = `15px`; namePosition = 0}
this.add.text(customWidth / 20, 240, data.left_image1_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 20, 409, data.left_image2_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 20, 579, data.left_image3_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 20, 750, data.left_image4_name, {font : nameTextSize, fill: `#7c4c23`});
//Right Image Name
this.add.text(displayW * 0.9-80, 240, data.right_image1_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 409, data.right_image2_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 579, data.right_image3_name).setTint(0x7c4c23);
this.add.text(displayW * 0.9-80, 750, data.right_image4_name).setTint(0x7c4c23);
this.add.text(customWidth / 1.3 - namePosition, 240, data.right_image1_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 1.3 - namePosition, 409, data.right_image2_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 1.3 - namePosition, 579, data.right_image3_name, {font: nameTextSize, fill: `#7c4c23`});
this.add.text(customWidth / 1.3 - namePosition, 750, data.right_image4_name, {font: nameTextSize, fill: `#7c4c23`});
})
.catch(error => {
console.error('Error fetching initial data:', error);
@@ -375,16 +371,16 @@ import Layout from '../../layouts/Layout.astro';
submitUserData();
})
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
this.add.image(displayW * 0.9-32, 170, "target1"),
this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 340, "target2"),
this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 510, "target3"),
this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
this.add.image(displayW * 0.9-32, 680, "target4"),
this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
// this.add.image(displayW / 6, 30, "topMatch").setScale();
// this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
// this.add.image(displayW * 0.9-32, 170, "target1"),
// this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
// this.add.image(displayW * 0.9-32, 340, "target2"),
// this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
// this.add.image(displayW * 0.9-32, 510, "target3"),
// this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
// this.add.image(displayW * 0.9-32, 680, "target4"),
// this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [
{
x: displayW / 15 - 15,
@@ -416,15 +412,16 @@ import Layout from '../../layouts/Layout.astro';
const targetZoneBorders = [];
targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
const targetBorder = this.add.image(targetZone.x = displayW / 1.25, targetZone.y, targetZone.name).setAlpha(1).setScale(1);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(1);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setAlpha(0)
newBlock.setScale(1.3);
newBlock.x = dragX;
newBlock.y = dragY;
@@ -533,11 +530,11 @@ import Layout from '../../layouts/Layout.astro';
</script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
* {
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
/* body {
margin: 0;
background: #020202;