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

c

Browse Source
This commit is contained in:
dev sp
2024-01-03 15:56:59 +00:00
parent 5f2138b742
commit 64dbbb489e
4 changed files with 899 additions and 197 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -62,33 +62,19 @@ import Layout from '../../layouts/Layout.astro';
noticeHeight = 0;
buttonWidth = 67;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else {
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
} else {
noticeWidth = 100;
noticeHeight = 0;
buttonWidth = 100;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 172;
}
}
let submitButton;
let formattedDateTime;
let shortUniqueID;
let imageElement1;
let imageElement2;
let imageElement3;
let imageElement4;
let imageElement5;
let imageElement6;
let imageElement7;
let imageElement8;
// let allElement = [element1, element2, element3, element4, element5, element6, element7, element8];
// allElement.setVisible(false)
gameResult = [];
window.onload = function() {
// Get the current date and time
@@ -109,57 +95,33 @@ import Layout from '../../layouts/Layout.astro';
}
return result;
};
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
const targetZones = [
{
x: rightTargetZoneW,
x: 0,
y: 170,
name: "target1",
block: null,
},
{
x: rightTargetZoneW,
x: 0,
y: 340,
name: "target2",
block: null,
},
{
x: rightTargetZoneW,
x: 0,
y: 510,
name: "target3",
block: null,
},
{
x: rightTargetZoneW,
x: 0,
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,
},
];
const blockMatches = [
{
@@ -178,32 +140,12 @@ import Layout from '../../layouts/Layout.astro';
blockName: "blocks4",
targetName: "target4",
},
{
blockName: "blocks5",
targetName: "target5",
},
{
blockName: "blocks6",
targetName: "target6",
},
{
blockName: "blocks7",
targetName: "target7",
},
{
blockName: "blocks8",
targetName: "target8",
},
{
blockName: "blocks9",
targetName: "target9",
},
];
// console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {};
var assetsList = {}
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({data}) => {
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
@@ -212,16 +154,15 @@ import Layout from '../../layouts/Layout.astro';
} else{
imageCustomWidth = "?width=100";
}
const assetsURL = "https://management.beanstalkedu.com/assets/"
assetsList.element1 = assetsURL + left_image1 + imageCustomWidth;
assetsList.element2 = assetsURL + left_image2 + imageCustomWidth;
assetsList.element3 = assetsURL + left_image3 + imageCustomWidth;
assetsList.element4 = assetsURL + left_image4 + imageCustomWidth;
assetsList.element5 = assetsURL + right_image1 + imageCustomWidth;
assetsList.element6 = assetsURL + right_image2 + imageCustomWidth;
assetsList.element7 = assetsURL + right_image3 + imageCustomWidth;
assetsList.element8 = assetsURL + right_image4 + imageCustomWidth;
// console.log(assetsList.left_image1)
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth;
assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth;
assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth;
assetsList.left_image4 = assetsURL + left_image4 + imageCustomWidth;
assetsList.right_image1 = assetsURL + right_image1 + imageCustomWidth;
assetsList.right_image2 = assetsURL + right_image2 + imageCustomWidth;
assetsList.right_image3 = assetsURL + right_image3 + imageCustomWidth;
assetsList.right_image4 = assetsURL + right_image4 + imageCustomWidth;
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
@@ -306,51 +247,50 @@ 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("retryIcon", "/assets/svg/retry.svg")
// 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("blocks1", assetsList.element5,{
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks2", assetsList.element6,{
this.load.spritesheet("target2", assetsList.right_image2,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks3", assetsList.element7,{
this.load.spritesheet("target3", assetsList.right_image3,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks4", assetsList.element8,{
this.load.spritesheet("target4", assetsList.right_image4,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks5", assetsList.element1,{
this.load.spritesheet("blocks1", assetsList.left_image1,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks6", assetsList.element2, {
this.load.spritesheet("blocks2", assetsList.left_image2, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks7", assetsList.element3, {
this.load.spritesheet("blocks3", assetsList.left_image3, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks8", assetsList.element4, {
this.load.spritesheet("blocks4", assetsList.left_image4, {
frameWidth: 100,
frameHeight: 100,
});
}
create() {
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(response => response.json())
.then(({ data }) => {
// console.log(data)
@@ -359,23 +299,23 @@ import Layout from '../../layouts/Layout.astro';
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, {
const descrptText = this.add.text(screenCenterX, 76, data.description, {
font: ` ${responsiveFontSize}px Quicksand`,
fill: '#7c4c23',
}).setOrigin(0.5);
// 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(leftTargetZoneW - 45, 240, data.left_image1_name).setTint(0x7c4c23);
this.add.text(leftTargetZoneW - 45, 409, data.left_image2_name).setTint(0x7c4c23);
this.add.text(leftTargetZoneW - 45, 579, data.left_image3_name).setTint(0x7c4c23);
this.add.text(leftTargetZoneW - 45, 750, data.left_image4_name).setTint(0x7c4c23);
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 leftTargetZoneW rightTargetZoneW
this.add.text(rightTargetZoneW - 44, 240, data.right_image1_name).setTint(0x7c4c23);
this.add.text(rightTargetZoneW - 44, 409, data.right_image2_name).setTint(0x7c4c23);
this.add.text(rightTargetZoneW - 44, 579, data.right_image3_name).setTint(0x7c4c23);
this.add.text(rightTargetZoneW - 44, 750, data.right_image4_name).setTint(0x7c4c23);
//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);
})
.catch(error => {
console.error('Error fetching initial data:', error);
@@ -433,76 +373,53 @@ import Layout from '../../layouts/Layout.astro';
// 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 * 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 / 2,
y: window.innerHeight - 120,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks4",
id: "block4",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks5",
id: "block5",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks6",
id: "block6",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks7",
id: "block7",
},
{
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks8",
id: "block8",
},
{
x: displayW / 15 - 15,
y: 120,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 15 - 15,
y: 280,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 15 - 15,
y: 460,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 15 - 15,
y: 640,
textureKey: "blocks4",
id: "block4",
},
];
// console.log('test blocks',blocks[0])
this.graphics = this.add.graphics();
const droppedBlocks = [];
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.2).setScale(0.65);
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, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
// this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
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);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3);
newBlock.x = dragX;
@@ -511,52 +428,126 @@ import Layout from '../../layouts/Layout.astro';
newBlock.on("dragend", () => {
newBlock.setScale(1.0);
let droppedOnTargetZone = false;
let targetZoneMatched = null;
targetZones.forEach((targetZone, targetIndex) => {
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);
if (
Phaser.Geom.Intersects.RectangleToRectangle(
newBlock.getBounds(),
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
)
) {
droppedOnTargetZone = true;
targetZoneMatched = targetZone;
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
return;
}
});
if (!droppedOnTargetZone) {
newBlock.setPosition(block.x, block.y);
if (droppedOnTargetZone) {
// Draw a line from the dragged block to the targetZone
this.graphics.lineStyle(6, 0xFF0000); // Red color
this.graphics.moveTo(block.x + 50, block.y + 50);
this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
this.graphics.strokePath();
newBlock.setPosition(targetZoneMatched.x - 50, targetZoneMatched.y - 50);
newBlock.disableInteractive();
targetZoneMatched.block = newBlock;
droppedBlocks.push(newBlock);
if (isMatch(newBlock.texture.key, targetZoneMatched.name)) {
// Handle matching logic
}
} else {
newBlock.setPosition(block.x, block.y);
}
if (droppedBlocks.length === targetZones.length)
{
displayResult(droppedBlocks);
if (droppedBlocks.length === targetZones.length) {
// Display result or perform any other actions
displayResult(droppedBlocks);
}
});
});
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
// 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)
// )
// ) {
// 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)) {
// // console.log(isMatch(newBlock.texture.key, targetZone.name))
// // if(isMatch(newBlock.texture.key, targetZone.name)){
// // score++;
// // // console.log(score);
// // if(score === 4){
// // const overlap = document.getElementById("overlap");
// // overlap.style.display = "block";
// // let finalDom;
// // }
// // console.log(score)
// // if(score >= 2){
// // console.log("Win")
// // } else{
// // console.log("Loose")
// // }
// // }
// //counter++; // Increment the counter when a match is found
// }
// } else {
// newBlock.setPosition(block.x, block.y);
// }
// droppedOnTargetZone = true;
// targetZoneBorders[targetIndex].setVisible(true);
// targetZoneBorders[targetIndex].setAlpha(1);
// return;
// }
// });
// if (!droppedOnTargetZone) {
// newBlock.setPosition(block.x, block.y);
// }
// if (droppedBlocks.length === targetZones.length)
// {
// displayResult(droppedBlocks);
// }
// });
});
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
})
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
}
}
// 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)
// }
// });
const displayResult = (droppedBlocks) => {
// const overlap = document.getElementById("overlap");
// overlap.style.display = "block";
@@ -573,7 +564,7 @@ import Layout from '../../layouts/Layout.astro';
counter++;
// console.log(counter)
if(counter === 8){
if(counter === 4){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
console.log(counter)
@@ -586,6 +577,59 @@ import Layout from '../../layouts/Layout.astro';
scoreTotal++;
// console.log(scoreTotal)
}
// console.log(scoreTotal)
// // console.log(match)
// if(match){
// score++;
// console.log(score)
// let day;
// switch (score) {
// case 0:
// day = "Points - 1";
// break;
// case 2:
// day = "Points - 2";
// break;
// case 4:
// day = "Points - 4";
// }
// console.log(day)
// finalDom = document.getElementById("good");
// finalDom.classList.add("good");
// document.getElementById("good").innerHTML = day;
// document.getElementById("good").style.color = '#7c4c23'
// // console.log(totalScore)
// // if(score === 2){
// // finalDom = document.getElementById("good");
// // finalDom.classList.add("good");
// // document.getElementById("good").innerHTML = " Good";
// // document.getElementById("good").style.color = '#7c4c23'
// // // let img = document.createElement("img");
// // // img.src = "/assets/party-feestje.gif";
// // // img.width = 100;
// // // document.getElementById('win').appendChild(img);
// // }
// // else if(score === 4) {
// // finalDom = document.getElementById("verryGood");
// // finalDom.classList.add("verryGood");
// // document.getElementById("verryGood").innerHTML = "Verry Good";
// // document.getElementById("verryGood").style.color = '#7c4c23'
// // }
// // else {
// // // finalDom = document.getElementById("lost");
// // // finalDom.classList.add("lost");
// // // document.getElementById("lost").innerHTML = " Lost";
// // // document.getElementById("lost").style.color = '#7c4c23'
// // // console.log("Losttttt")
// // }
// } else{
// score = score
// }
// return match !== undefined;
};
</script>