reverse drag v3 and v4
dev sp
parent
c229800e73
commit
9fff1e4a29
|
|
@ -86,6 +86,9 @@ 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';
|
||||
|
|
@ -230,6 +233,11 @@ 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,
|
||||
|
|
@ -293,6 +301,7 @@ 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`,
|
||||
|
|
@ -301,21 +310,16 @@ 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
|
||||
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`});
|
||||
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);
|
||||
|
||||
//Right Image Name
|
||||
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`});
|
||||
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);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
|
|
@ -371,16 +375,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,
|
||||
|
|
@ -412,16 +416,15 @@ 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 / 1.25, targetZone.y, targetZone.name).setAlpha(1).setScale(1);
|
||||
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
|
||||
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(1);
|
||||
this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
|
||||
newBlock.on("drag", (pointer, dragX, dragY) => {
|
||||
newBlock.setAlpha(0)
|
||||
newBlock.setScale(1.3);
|
||||
newBlock.x = dragX;
|
||||
newBlock.y = dragY;
|
||||
|
|
|
|||
|
|
@ -64,8 +64,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
buttonHeight = 0;
|
||||
retryButtonWidth = window.innerWidth / 2 - 140;
|
||||
retryButtonHeight = window.innerHeight - 50;
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||
leftTargetZoneW = window.innerWidth * 0.9 - 40;
|
||||
rightTargetZoneW = window.innerWidth / 6;
|
||||
} else {
|
||||
noticeWidth = 100;
|
||||
noticeHeight = 0;
|
||||
|
|
@ -73,23 +73,26 @@ import Layout from '../../layouts/Layout.astro';
|
|||
buttonHeight = 0;
|
||||
retryButtonWidth = window.innerWidth / 2 - 50;
|
||||
retryButtonHeight = window.innerHeight - 70;
|
||||
leftTargetZoneW = window.innerWidth / 6;
|
||||
rightTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||
leftTargetZoneW = window.innerWidth * 0.9 - 172;
|
||||
rightTargetZoneW = window.innerWidth / 6;
|
||||
}
|
||||
let submitButton;
|
||||
let formattedDateTime;
|
||||
let shortUniqueID;
|
||||
let retryButton;
|
||||
let blockMatches;
|
||||
let scoreTotal = 0;
|
||||
let resultView; // scoreTotal resultView
|
||||
let resultView;
|
||||
let scoreTotal = 0; // resultView scoreTotal
|
||||
gameResult = [];
|
||||
window.onload = function() {
|
||||
// Get the current date and time
|
||||
currentDate = new Date();
|
||||
|
||||
// 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';
|
||||
|
|
@ -101,41 +104,62 @@ import Layout from '../../layouts/Layout.astro';
|
|||
return result;
|
||||
};
|
||||
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
|
||||
const leftTargetZones = [
|
||||
{
|
||||
x: window.innerWidth / 4,
|
||||
y: window.innerHeight / 2.5,
|
||||
name: "target1",
|
||||
block: null,
|
||||
},
|
||||
// Add more left target zones as needed
|
||||
];
|
||||
const centerTargetZones = [
|
||||
{
|
||||
x: window.innerWidth / 2,
|
||||
y: window.innerHeight / 2.5,
|
||||
name: "target2",
|
||||
block: null,
|
||||
},
|
||||
// Add more right target zones as needed
|
||||
];
|
||||
|
||||
const rightTargetZones = [
|
||||
{
|
||||
x: window.innerWidth / 1.33,
|
||||
y: window.innerHeight / 2.5,
|
||||
name: "target3",
|
||||
block: null,
|
||||
},
|
||||
// Add more right target zones as needed
|
||||
];
|
||||
|
||||
const targetZones = [...leftTargetZones, ...centerTargetZones, ...rightTargetZones];
|
||||
const targetZones = [
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 170,
|
||||
name: "target1",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 340,
|
||||
name: "target2",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 510,
|
||||
name: "target3",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: rightTargetZoneW,
|
||||
y: 680,
|
||||
name: "target4",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 170,
|
||||
name: "target5",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 340,
|
||||
name: "target6",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 510,
|
||||
name: "target7",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: leftTargetZoneW,
|
||||
y: 680,
|
||||
name: "target8",
|
||||
block: null,
|
||||
},
|
||||
];
|
||||
// console.log(blockMatches.blockName, blockMatches.targetName)
|
||||
var assetsList = {};
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
||||
|
|
@ -153,7 +177,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
assetsList.element6 = assetsURL + image6 + imageCustomWidth;
|
||||
assetsList.element7 = assetsURL + image7 + imageCustomWidth;
|
||||
assetsList.element8 = assetsURL + image8 + imageCustomWidth;
|
||||
// console.log(assetsList.left_image1)
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
|
|
@ -231,7 +254,6 @@ import Layout from '../../layouts/Layout.astro';
|
|||
percentText.destroy();
|
||||
assetText.destroy();
|
||||
});
|
||||
// this.load.image('logo', 'zenvalogo.png');
|
||||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
|
|
@ -275,85 +297,50 @@ import Layout from '../../layouts/Layout.astro';
|
|||
}
|
||||
|
||||
create() {
|
||||
// const borderGraphics = this.add.graphics();
|
||||
// borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
|
||||
// const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
|
||||
// borderGraphics.beginPath();
|
||||
// borderGraphics.moveTo(borderX, 130);
|
||||
// borderGraphics.lineTo(borderX, window.innerHeight - 260);
|
||||
// borderGraphics.strokePath();
|
||||
// borderGraphics.closePath();
|
||||
const borderThickness = 6;
|
||||
const borderGraphicsX = this.add.graphics();
|
||||
const borderThicknessX = 6;
|
||||
borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
|
||||
const borderY = window.innerHeight / 1.5; // Center the border vertically on the screen
|
||||
borderGraphicsX.beginPath();
|
||||
borderGraphicsX.moveTo(0, borderY);
|
||||
borderGraphicsX.lineTo(window.innerWidth, borderY);
|
||||
borderGraphicsX.strokePath();
|
||||
borderGraphicsX.closePath();
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v03/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
console.log(data)
|
||||
blockMatches = [
|
||||
{
|
||||
blockName: "blocks1",
|
||||
targetName: `target${data.match_with1}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks2",
|
||||
targetName: `target${data.match_with2}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks3",
|
||||
targetName: `target${data.match_with3}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks4",
|
||||
targetName: `target${data.match_with4}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks5",
|
||||
targetName: `target${data.match_with5}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks6",
|
||||
targetName: `target${data.match_with6}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks7",
|
||||
targetName: `target${data.match_with7}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks8",
|
||||
targetName: `target${data.match_with8}`,
|
||||
}
|
||||
{
|
||||
blockName: "blocks1",
|
||||
targetName: `target${data.match_with1}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks2",
|
||||
targetName: `target${data.match_with2}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks3",
|
||||
targetName: `target${data.match_with3}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks4",
|
||||
targetName: `target${data.match_with4}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks5",
|
||||
targetName: `target${data.match_with5}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks6",
|
||||
targetName: `target${data.match_with6}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks7",
|
||||
targetName: `target${data.match_with7}`,
|
||||
},
|
||||
{
|
||||
blockName: "blocks8",
|
||||
targetName: `target${data.match_with8}`,
|
||||
}
|
||||
];
|
||||
// console.log(data)
|
||||
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
|
||||
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
|
||||
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
|
||||
}
|
||||
if(isMobile){
|
||||
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
|
||||
} else{
|
||||
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
|
||||
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
|
||||
}
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
// Base font size for your text
|
||||
const baseFontSize = 22;
|
||||
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, 95, data.description, {
|
||||
|
|
@ -419,61 +406,61 @@ import Layout from '../../layouts/Layout.astro';
|
|||
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 2 - 200,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / 2-400,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-100,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / 2-300,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / 2-200,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 2+100,
|
||||
y: window.innerHeight - 250,
|
||||
x: displayW / 2 - 100,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-200,
|
||||
x: displayW / 2,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks5",
|
||||
id: "block5",
|
||||
},
|
||||
{
|
||||
x: displayW / 2-100,
|
||||
x: displayW / 2+100,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks6",
|
||||
id: "block6",
|
||||
},
|
||||
{
|
||||
x: displayW / 2,
|
||||
x: displayW / 2+200,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks7",
|
||||
id: "block7",
|
||||
},
|
||||
{
|
||||
x: displayW / 2+100,
|
||||
x: displayW / 2+300,
|
||||
y: window.innerHeight - 120,
|
||||
textureKey: "blocks8",
|
||||
id: "block8",
|
||||
},
|
||||
];
|
||||
// console.log('test blocks',blocks[0])
|
||||
let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.2;}
|
||||
const droppedBlocks = [];
|
||||
const targetZoneBorders = [];
|
||||
targetZones.forEach((targetZone) => {
|
||||
targetZones.forEach((targetZone, index) => {
|
||||
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
|
||||
const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
|
@ -484,51 +471,42 @@ import Layout from '../../layouts/Layout.astro';
|
|||
newBlock.setScale(1.3);
|
||||
newBlock.x = dragX;
|
||||
newBlock.y = dragY;
|
||||
});
|
||||
|
||||
newBlock.on("dragend", () => {
|
||||
newBlock.setScale(1.0).setDepth(-2);
|
||||
});
|
||||
newBlock.on("dragend", () => {
|
||||
newBlock.setScale(1.0);
|
||||
let droppedOnTargetZone = false;
|
||||
|
||||
targetZones.forEach((targetZone, targetIndex) => {
|
||||
if (
|
||||
Phaser.Geom.Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)
|
||||
) {
|
||||
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
|
||||
const col = counter % 2;
|
||||
const row = Math.floor(counter / 2);
|
||||
newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
|
||||
// Adjust isMatch function based on your requirements
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
// Handle match logic if needed
|
||||
}
|
||||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
return;
|
||||
}
|
||||
if (
|
||||
Phaser.Geom .Intersects.RectangleToRectangle(
|
||||
newBlock.getBounds(),
|
||||
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
||||
)
|
||||
) {
|
||||
if (targetZone.block === null) {
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
}
|
||||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
|
||||
// Check if all blocks have been dropped on target zones
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks);
|
||||
if (droppedBlocks.length === targetZones.length)
|
||||
{
|
||||
displayResult(droppedBlocks);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
});
|
||||
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
||||
retryButton.setInteractive().on('pointerdown', () => {
|
||||
|
|
@ -537,24 +515,26 @@ import Layout from '../../layouts/Layout.astro';
|
|||
retryButton.setVisible(false);
|
||||
let score = 0;
|
||||
let counter = 0;
|
||||
|
||||
const isMatch = (blockName, targetName) => {
|
||||
if(isMatch){
|
||||
counter++;
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
}
|
||||
//resultView scoreTotal
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
if(match){
|
||||
scoreTotal++;
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
// console.log(scoreTotal)
|
||||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
console.log(match)
|
||||
if(match !== undefined){
|
||||
scoreTotal++;
|
||||
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
|
||||
console.log("Score Total", scoreTotal)
|
||||
}
|
||||
if(counter === 8){
|
||||
// console.log(counter)
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
submitButton.setVisible(true);
|
||||
retryButton.setVisible(true);
|
||||
resultView.setVisible(true);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -465,7 +465,7 @@ 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, targetZone.y, "border").setAlpha(0).setScale(borderScale);
|
||||
const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
|
||||
targetZoneBorders.push(targetBorder);
|
||||
targetZone.block = null;
|
||||
}),
|
||||
|
|
@ -492,8 +492,8 @@ import Layout from '../../layouts/Layout.astro';
|
|||
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
|
||||
const col = counter % 2;
|
||||
const row = Math.floor(counter / 2);
|
||||
// newBlock.setPosition(targetZone.x - col * (newBlock.width + 10), targetZone.y - row * (newBlock.height + 10));
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
|
||||
|
||||
newBlock.setPosition(targetZone.x - 50, targetZone.y -50);
|
||||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
|
|
@ -505,18 +505,19 @@ import Layout from '../../layouts/Layout.astro';
|
|||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(0);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (!droppedOnTargetZone) {
|
||||
newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
|
||||
}
|
||||
};
|
||||
|
||||
// Check if all blocks have been dropped on target zones
|
||||
if (droppedBlocks.length === targetZones.length) {
|
||||
displayResult(droppedBlocks);
|
||||
newBlock.setVisible(false);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue