little changes
parent
7c8503b5da
commit
9146a4575a
|
|
@ -20,6 +20,7 @@ const { title } = Astro.props;
|
|||
</body>
|
||||
</html>
|
||||
<style is:global>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap');
|
||||
/* :root {
|
||||
--accent: 124, 58, 237;
|
||||
--accent-gradient: linear-gradient(45deg, rgb(var(--accent)), #da62c4 30%, white 60%);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
// 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)
|
||||
// const search = Astro.url.searchParams.get('id')! || '';
|
||||
// console.log("ID Search",search)
|
||||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
|
|
@ -58,25 +52,25 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const targetZones = [
|
||||
{
|
||||
x: 0,
|
||||
y: 150,
|
||||
y: 170,
|
||||
name: "target1",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: 320,
|
||||
y: 340,
|
||||
name: "target2",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: 490,
|
||||
y: 510,
|
||||
name: "target3",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: 660,
|
||||
y: 680,
|
||||
name: "target4",
|
||||
block: null,
|
||||
},
|
||||
|
|
@ -101,14 +95,12 @@ const blockMatches = [
|
|||
];
|
||||
// console.log(blockMatches.blockName, blockMatches.targetName)
|
||||
var assetsList = {}
|
||||
var assetsName = {}
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
|
||||
// const {left_image1_name, left_image2_name, left_image3_name, left_image4_name, right_image1_name, right_image2_name, right_image3_name, right_image4_name} = data
|
||||
assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1 + "?width=100";
|
||||
assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2 + "?width=100";
|
||||
assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3 + "?width=100";
|
||||
|
|
@ -121,6 +113,7 @@ const params = new URLSearchParams(window.location.search);
|
|||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: '#ffffff',
|
||||
parent: "phaser-example",
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
|
|
@ -128,8 +121,6 @@ const params = new URLSearchParams(window.location.search);
|
|||
},
|
||||
scene: MyGame,
|
||||
};
|
||||
const name1 = data.left_image1_name
|
||||
console.log(name1)
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
})
|
||||
|
|
@ -171,7 +162,6 @@ class MyGame extends Phaser.Scene {
|
|||
}
|
||||
});
|
||||
percentText.setOrigin(0.5, 0.5);
|
||||
|
||||
var assetText = this.make.text({
|
||||
x: width / 2,
|
||||
y: height / 2 + 50,
|
||||
|
|
@ -205,7 +195,7 @@ class MyGame extends Phaser.Scene {
|
|||
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("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');
|
||||
|
|
@ -248,82 +238,73 @@ class MyGame extends Phaser.Scene {
|
|||
}
|
||||
create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
// const name1 = data.left_image1_name
|
||||
// console.log(name1)
|
||||
const paramsID = params.get('id');
|
||||
|
||||
fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
|
||||
//Description Text
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const loadingText = this.add.text(screenCenterX, 60, data.description).setTint(0x7c4c23).setOrigin(0.5);
|
||||
// this.add.text(0, 0, data.description).setFontSize(20).setTint(0x7c4c23);
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 18 + 10, 220, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 18 + 10, 389, data.left_image2_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 18 + 10, 559, data.left_image3_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 18 + 10, 730, data.left_image4_name).setTint(0x7c4c23);
|
||||
// Base font size for your text
|
||||
const baseFontSize = 20;
|
||||
// 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, 70, data.description, {
|
||||
font: `${responsiveFontSize}px quicksand`,
|
||||
fill: '#7c4c23',
|
||||
}).setOrigin(0.5);
|
||||
|
||||
//Right Image Name
|
||||
this.add.text(displayW * 0.832-32, 220, data.right_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.832-32, 389, data.right_image2_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.832-32, 559, data.right_image3_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.832-32, 730, data.right_image4_name).setTint(0x7c4c23);
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
|
||||
// Left Image Name
|
||||
this.add.text(displayW / 14, 240, data.left_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14, 409, data.left_image2_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14, 579, data.left_image3_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW / 14, 750, data.left_image4_name).setTint(0x7c4c23);
|
||||
|
||||
//Right Image Name
|
||||
this.add.text(displayW * 0.9-50, 240, data.right_image1_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.9-50, 409, data.right_image2_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.9-50, 579, data.right_image3_name).setTint(0x7c4c23);
|
||||
this.add.text(displayW * 0.9-50, 750, data.right_image4_name).setTint(0x7c4c23);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
const displayW = window.innerWidth;
|
||||
const displayH = window.innerHeight;
|
||||
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, 150, "target1"),
|
||||
this.add.image(displayW * 0.9-32, 150, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9-32, 320, "target2"),
|
||||
this.add.image(displayW * 0.9-32, 320, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9-32, 490, "target3"),
|
||||
this.add.image(displayW * 0.9-32, 490, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9-32, 660, "target4"),
|
||||
this.add.image(displayW * 0.9-32, 660, "border").setAlpha(0.4).setScale(0.7);
|
||||
// {
|
||||
// this.group = this.add.group();
|
||||
// Phaser.Math.Distance.Squared;
|
||||
// this.group.createMultiple({ key: 'target4'});
|
||||
// this.group.createMultiple({ key: 'target4',});
|
||||
// Phaser.Actions.SetXY(this.group.getChildren(), displayW * 0.82, 100, 100);
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// this.add.image(0, 0, "target4").setPosition(100, 200);
|
||||
// this.add.image(1570, 730, "target4");
|
||||
// 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-32, 170, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9-32, 340, "target2"),
|
||||
this.add.image(displayW * 0.9-32, 340, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9-32, 510, "target3"),
|
||||
this.add.image(displayW * 0.9-32, 510, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9-32, 680, "target4"),
|
||||
this.add.image(displayW * 0.9-32, 680, "border").setAlpha(0.4).setScale(0.7);
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 100,
|
||||
y: 120,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 260,
|
||||
y: 280,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 440,
|
||||
y: 460,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 15 - 10,
|
||||
y: 620,
|
||||
y: 640,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
|
|
@ -364,7 +345,6 @@ class MyGame extends Phaser.Scene {
|
|||
newBlock.disableInteractive();
|
||||
targetZone.block = newBlock;
|
||||
droppedBlocks.push(newBlock);
|
||||
|
||||
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
||||
// console.log(isMatch(newBlock.texture.key, targetZone.name))
|
||||
|
||||
|
|
@ -388,7 +368,6 @@ class MyGame extends Phaser.Scene {
|
|||
} else {
|
||||
newBlock.setPosition(block.x, block.y);
|
||||
}
|
||||
|
||||
droppedOnTargetZone = true;
|
||||
targetZoneBorders[targetIndex].setVisible(true);
|
||||
targetZoneBorders[targetIndex].setAlpha(1);
|
||||
|
|
@ -412,15 +391,8 @@ const displayResult = (droppedBlocks) => {
|
|||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// let finalDom;
|
||||
let points = 0;
|
||||
droppedBlocks.forEach((block) => {
|
||||
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
|
||||
if (targetZone) {
|
||||
if (targetZone.block === block) {
|
||||
points++;
|
||||
console.log(points)
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
score = 0;
|
||||
|
|
@ -438,13 +410,13 @@ if(isMatch){
|
|||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if(match){
|
||||
score ++;
|
||||
score++;
|
||||
// console.count(score)
|
||||
let totalPoints = score
|
||||
// let totalPoints = score.length;
|
||||
console.log(totalPoints)
|
||||
// let totalPoints = {};
|
||||
if(score === 4){
|
||||
if(score == 4){
|
||||
finalDom = document.getElementById("win");
|
||||
finalDom.classList.add("win");
|
||||
// let img = document.createElement("img");
|
||||
|
|
@ -452,6 +424,7 @@ console.log(totalPoints)
|
|||
// img.width = 100;
|
||||
// document.getElementById('win').appendChild(img);
|
||||
} else {
|
||||
// console.log("2")
|
||||
finalDom = document.getElementById("lost");
|
||||
finalDom.classList.add("lost");
|
||||
// console.log("Loose")
|
||||
|
|
@ -461,14 +434,12 @@ console.log(totalPoints)
|
|||
return match !== undefined;
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
cursor: -webkit-grab; cursor: grab;
|
||||
/* background-color: #7c4c23; */
|
||||
/* border: 2px solid #7c4c23;
|
||||
width: fit-content; */
|
||||
font-family: quicksand;
|
||||
}
|
||||
/* body {
|
||||
margin: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue