add_image_name_&_bg_removed
parent
ec05f24e89
commit
7c8503b5da
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
|
|
@ -0,0 +1,30 @@
|
|||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
scene: {
|
||||
create: create
|
||||
}
|
||||
};
|
||||
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
function create() {
|
||||
const text = this.add.text(0, 0, 'Responsive Font', {
|
||||
fontSize: getResponsiveFontSize(game.scale.width, game.scale.height, 40),});
|
||||
|
||||
// Center the text
|
||||
text.setPosition(game.scale.width / 2 - text.width / 2, game.scale.height / 2 - text.height / 2);
|
||||
}
|
||||
|
||||
function getResponsiveFontSize(baseWidth, baseHeight, baseSize) {
|
||||
// You can tweak these values as per your requirements
|
||||
const minWidth = 400;
|
||||
const maxWidth = 1200;
|
||||
const minFontSize = 20;
|
||||
const maxFontSize = 60;
|
||||
|
||||
// Calculate the font size based on the screen width
|
||||
const ratio = Phaser.Math.Clamp(baseWidth, minWidth, maxWidth) / maxWidth;
|
||||
return minFontSize + (maxFontSize - minFontSize) * ratio;
|
||||
}
|
||||
|
|
@ -1,29 +1,36 @@
|
|||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
// const data = await fetch('https://management.beanstalkedu.com/items/game_drag');
|
||||
// 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('search')! || '';
|
||||
// const search = Astro.url.searchParams.get('id')! || '';
|
||||
// console.log("ID Search",search)
|
||||
---
|
||||
<Layout title="Drag Game">
|
||||
<main>
|
||||
<div>
|
||||
<div>
|
||||
|
||||
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
|
||||
<div class="flex justify-center">
|
||||
<div class="container mx-auto px-4">
|
||||
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
|
||||
<img src="/assets/top_match.jpg" alt="" />
|
||||
<img src="/assets/top_logo.jpg" alt="" />
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <h2>{data.name}</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>
|
||||
<!-- <div id="result"></div> -->
|
||||
<div id="win" class="displayNone ">
|
||||
<p>Congratulations!</p>
|
||||
<p>You win the Game!</p>
|
||||
<img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" />
|
||||
<div class="">
|
||||
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> -->
|
||||
<div class="flex flex-row">
|
||||
<a href="" >
|
||||
<svg fill="#7c4c23" height="64px" width="64px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 74.999 74.999" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M33.511,71.013c15.487,0,28.551-10.563,32.375-24.859h9.113L61.055,22L47.111,46.151h8.006 c-3.44,8.563-11.826,14.628-21.605,14.628c-12.837,0-23.28-10.443-23.28-23.28c0-12.836,10.443-23.28,23.28-23.28 c6.604,0,12.566,2.768,16.809,7.196l5.258-9.108c-5.898-5.176-13.619-8.32-22.065-8.32C15.034,3.987,0,19.019,0,37.5 C-0.002,55.981,15.03,71.013,33.511,71.013z"></path> </g> </g></svg>
|
||||
</a>
|
||||
|
|
@ -51,25 +58,25 @@ import Layout from '../../layouts/Layout.astro';
|
|||
const targetZones = [
|
||||
{
|
||||
x: 0,
|
||||
y: 160,
|
||||
y: 150,
|
||||
name: "target1",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: 340,
|
||||
y: 320,
|
||||
name: "target2",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: 540,
|
||||
y: 490,
|
||||
name: "target3",
|
||||
block: null,
|
||||
},
|
||||
{
|
||||
x: 0,
|
||||
y: 730,
|
||||
y: 660,
|
||||
name: "target4",
|
||||
block: null,
|
||||
},
|
||||
|
|
@ -94,13 +101,14 @@ 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}) => {
|
||||
// console.log(data)
|
||||
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = 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";
|
||||
|
|
@ -109,7 +117,6 @@ const params = new URLSearchParams(window.location.search);
|
|||
assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2 + "?width=100";
|
||||
assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3 + "?width=100";
|
||||
assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4 + "?width=100";
|
||||
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
|
|
@ -121,10 +128,13 @@ const params = new URLSearchParams(window.location.search);
|
|||
},
|
||||
scene: MyGame,
|
||||
};
|
||||
const name1 = data.left_image1_name
|
||||
console.log(name1)
|
||||
const game = new Phaser.Game(config);
|
||||
|
||||
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
class MyGame extends Phaser.Scene {
|
||||
|
|
@ -192,8 +202,10 @@ class MyGame extends Phaser.Scene {
|
|||
for (var i = 0; i < 5; i++) {
|
||||
this.load.image('logo'+i, '/assets/background.jpg');
|
||||
}
|
||||
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/background.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');
|
||||
|
|
@ -235,19 +247,49 @@ 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 displayW = window.innerWidth;
|
||||
const displayH = window.innerHeight;
|
||||
|
||||
//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);
|
||||
|
||||
// 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);
|
||||
|
||||
//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);
|
||||
});
|
||||
|
||||
const displayW = window.innerWidth;
|
||||
const displayH = window.innerHeight;
|
||||
this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
||||
this.add.image(displayW * 0.9-32, 160, "target1"),
|
||||
this.add.image(displayW * 0.9-32, 160, "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, 540, "target3"),
|
||||
this.add.image(displayW * 0.9-32, 540, "border").setAlpha(0.4).setScale(0.7),
|
||||
this.add.image(displayW * 0.9-32, 730, "target4"),
|
||||
this.add.image(displayW * 0.9-32, 730, "border").setAlpha(0.4).setScale(0.7);
|
||||
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;
|
||||
|
|
@ -262,26 +304,26 @@ class MyGame extends Phaser.Scene {
|
|||
// this.add.image(1570, 730, "target4");
|
||||
const blocks = [
|
||||
{
|
||||
x: displayW / 15,
|
||||
y: 90,
|
||||
x: displayW / 15 - 10,
|
||||
y: 100,
|
||||
textureKey: "blocks1",
|
||||
id: "block1",
|
||||
},
|
||||
{
|
||||
x: displayW / 15,
|
||||
y: 270,
|
||||
x: displayW / 15 - 10,
|
||||
y: 260,
|
||||
textureKey: "blocks2",
|
||||
id: "block2",
|
||||
},
|
||||
{
|
||||
x: displayW / 15,
|
||||
y: 470,
|
||||
x: displayW / 15 - 10,
|
||||
y: 440,
|
||||
textureKey: "blocks3",
|
||||
id: "block3",
|
||||
},
|
||||
{
|
||||
x: displayW / 15,
|
||||
y: 660,
|
||||
x: displayW / 15 - 10,
|
||||
y: 620,
|
||||
textureKey: "blocks4",
|
||||
id: "block4",
|
||||
},
|
||||
|
|
@ -380,69 +422,41 @@ const displayResult = (droppedBlocks) => {
|
|||
}
|
||||
}
|
||||
});
|
||||
// if (points >= droppedBlocks.length / 2) {
|
||||
// finalDom = document.getElementById("win");
|
||||
// finalDom.classList.add("win");
|
||||
// } else {
|
||||
// finalDom = document.getElementById("lost");
|
||||
// finalDom.classList.add("lost");
|
||||
// }
|
||||
// document.getElementById("result").innerHTML = "Points: " + points;
|
||||
// finalDom.classList.add("result");
|
||||
};
|
||||
let score = 0;
|
||||
score = 0;
|
||||
counter = 0;
|
||||
const isMatch = (blockName, targetName) => {
|
||||
// if(isMatch){
|
||||
// counter++;
|
||||
// if(counter === 4){
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// console.log("Done")
|
||||
// }
|
||||
|
||||
// }
|
||||
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
if(isMatch){
|
||||
counter++;
|
||||
// console.log(counter)
|
||||
if(counter === 4){
|
||||
const overlap = document.getElementById("overlap");
|
||||
overlap.style.display = "block";
|
||||
// console.log("Done")
|
||||
}
|
||||
}
|
||||
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
|
||||
// console.log(match)
|
||||
if(match){
|
||||
score++;
|
||||
// console.log("Score:", score)
|
||||
score ++;
|
||||
// console.count(score)
|
||||
let totalPoints = score
|
||||
// let totalPoints = score.length;
|
||||
console.log(totalPoints)
|
||||
// let totalPoints = {};
|
||||
if(score === 4){
|
||||
finalDom = document.getElementById("win");
|
||||
finalDom.classList.add("win");
|
||||
// let img = document.createElement("img");
|
||||
// img.src = "/assets/party-feestje.gif";
|
||||
// img.width = 100;
|
||||
// document.getElementById('win').appendChild(img);
|
||||
} else {
|
||||
finalDom = document.getElementById("lost");
|
||||
finalDom.classList.add("lost");
|
||||
// console.log("Loose")
|
||||
}
|
||||
}
|
||||
// if(match){
|
||||
// score++;
|
||||
// // if(score === 4){
|
||||
// // const overlap = document.getElementById("overlap");
|
||||
// // overlap.style.display = "block";
|
||||
// // }
|
||||
// console.log(score.length)
|
||||
// if(score >= 4){
|
||||
// console.log("win")
|
||||
// } else{
|
||||
// console.log("Loose")
|
||||
// }
|
||||
// }
|
||||
// if(match){
|
||||
// score++
|
||||
// console.log(score)
|
||||
// if(score.length >= 4){
|
||||
// const overlap = document.getElementById("overlap");
|
||||
// overlap.style.display = "block";
|
||||
// let resultt;
|
||||
// if (resultt >= 2){
|
||||
// // result
|
||||
// finalDom = document.getElementById("win");
|
||||
// finalDom.classList.add("win");
|
||||
// console.log("Win")
|
||||
// } else {
|
||||
// finalDom = document.getElementById("lost");
|
||||
// finalDom.classList.add("lost");
|
||||
// console.log("Loose")
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
// console.log("Result", result)
|
||||
return match !== undefined;
|
||||
};
|
||||
|
|
@ -476,9 +490,6 @@ user-select: none;
|
|||
} */
|
||||
#overlap {
|
||||
display: none;
|
||||
/* width: 800px;
|
||||
height: 600px; */
|
||||
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
|
@ -511,8 +522,4 @@ user-select: none;
|
|||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* .try{
|
||||
font-size: 20px;
|
||||
color: white;
|
||||
} */
|
||||
</style>
|
||||
Loading…
Reference in New Issue