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

Next_Work_on_Responsevness

pull/1/head
Dev 1 2023-07-20 19:20:27 +05:30
parent d882f2db00
commit 28dd7ab327
1 changed files with 66 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
src/pages/drag/index.astro
View File

@ -1,14 +1,19 @@
---
import Layout from '../../layouts/Layout.astro';
// const planResp = await fetch('https://api8.siliconpin.com/items/hosting?filter[status][_eq]=published');
// const planRespJson = await planResp.json();
// const planRespData = planRespJson.data;
const data = await fetch('https://management.beanstalkedu.com/items/game_drag');
const dataJson = await data.json();
const description = dataJson.data[2].description;
console.log(description)
---
<Layout title="Drag Game">
<main>
<div>
<div>
<img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt="">
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
<div class="flex justify-center">
<!-- <h2>{description}</h2> -->
<!-- <h2 class="text-center text-4xl font-bold text-[#7c4c23] xl:w-2/3">Match the words on the left side with their rhyming words on the right by drawing lines</h2> -->
</div>
</div>
<div id="overlap">
<div id="result"></div>
@ -41,7 +46,7 @@ import Layout from '../../layouts/Layout.astro';
</main>
</Layout>
<script is:inline>
const targetZones = [
const targetZones = [
{
x: 1430,
y: 160,
@ -85,14 +90,40 @@ const blockMatches = [
targetName: "target4",
},
];
//let counter = 0; // Counter variable
class MyGame extends Phaser.Scene {
constructor() {
super();
}
preload() {
// this.load.image("wrong", "https://management.beanstalkedu.com/assets/1320eec6-3029-41e5-8aad-904e590cb420");
fetch(`https://management.beanstalkedu.com/items/game_drag`)
.then(response => response.json())
.then(data => {
console.log(data.data);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
console.log(paramsID);
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(dataWithParamsID => {
const description = dataWithParamsID.data.description;
console.log(description);
const text = this.add.text(900, 20, description, {
fontSize: '32px',
color: '#ffffff',
});
text.setOrigin(0.5);
// let description_txt = this.add.text(0, 0, description, {font: '40px Ariel', fill: '#7c4c23' });
Phaser.Display.Align.In.Center(description_txt);
})
.catch(error => {
console.error('Error fetching data using paramsID:', error);
});
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
this.load.image("tick", '/assets/tick.png');
this.load.image("bg", '/assets/background.jpg');
this.load.image("target1", '/assets/yam.png');
@ -100,7 +131,7 @@ class MyGame extends Phaser.Scene {
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", '/assets/chat.png', {
this.load.spritesheet("blocks1", '/assets/chat.png',{
frameWidth: 100,
frameHeight: 100,
});
@ -118,10 +149,27 @@ class MyGame extends Phaser.Scene {
});
}
create() {
// fetch(`https://management.beanstalkedu.com/items/game_drag`)
fetch(`https://management.beanstalkedu.com/items/game_drag`)
.then(response => response.json())
.then(data => {
// console.log(data.data);
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
console.log(paramsID);
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
.then(response => response.json())
.then(dataWithParamsID => {
const leftImage1 = dataWithParamsID.data.left_image1
console.log(leftImage1);
})
.catch(error => {
console.error('Error fetching data using paramsID:', error);
});
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
// fetch(`https://management.beanstalkedu.com/items/game_drag`)
// .then(response => response.json())
// .then(data => {
// // console.log(data)
@ -273,51 +321,25 @@ const isMatch = (blockName, targetName) => {
console.log("Win")
} else {
finalDom = document.getElementById("lost");
finalDom.classList.add("lost");
console.log("Loose")
finalDom.classList.add("lost");
console.log("Loose")
}
}
// console.log("Result", result)
return match !== undefined;
};
// Example usage
// Calculate the sum total points
// for (const match of blockMatches) {
// isMatch(match.blockName, match.targetName);
// }
// console.log("Sum Total Points:", counter);
// let counter = 0;
// const isMatch = (blockName, targetName) => {
// const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// if (match) {
// counter++;
// }
// if (counter <= 4) {
// console.log("Points:", counter);
// } else {
// console.log("Matchggg:", counter);
// }
// return match !== undefined;
// };
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
parent: "phaser-example",
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_BOTH,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: MyGame,
};