kar
/
phaser-game-bs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
phaser-game-bs/src/pages/drag/index.astro

463 lines
15 KiB
Plaintext
Raw Blame History

---
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)
---
<Layout title="Drag Game">
<main>
<div>
<div>
<!-- <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>
<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="">
<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>
<a href="" >
<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <circle cx="12" cy="12" r="10" stroke="#7c4c23" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></circle> <path d="M17 12H7M17 12L13 8M17 12L13 16" stroke="#7c4c23" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
</a>
</div>
<div>
</div>
</div>
<div id="lost" class="displayNone">
<p>Oops!</p>
<p>You Lost the Game!</p>
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
<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>
</div>
</div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const targetZones = [
{
x: 1430,
y: 160,
name: "target1",
block: null,
},
{
x: 1430,
y: 340,
name: "target2",
block: null,
},
{
x: 1430,
y: 540,
name: "target3",
block: null,
},
{
x: 1430,
y: 730,
name: "target4",
block: null,
},
];
const blockMatches = [
{
blockName: "blocks1",
targetName: "target1",
},
{
blockName: "blocks2",
targetName: "target2",
},
{
blockName: "blocks3",
targetName: "target3",
},
{
blockName: "blocks4",
targetName: "target4",
},
];
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)}`)
.then(response => response.json())
.then(({data}) => {
// console.log("finding:: data",data)
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data
assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1
assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2
assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3
assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4
assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1
assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2
assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3
assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
height: window.innerHeight,
parent: "phaser-example",
scale: {
mode: Phaser.Scale.FIT,
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
},
scene: MyGame,
};
const game = new Phaser.Game(config);
})
.catch(error => {
console.error('Error fetching initial data:', error);
});
class MyGame extends Phaser.Scene {
constructor() {
super();
}
preload() {
var progressBar = this.add.graphics();
var progressBox = this.add.graphics();
progressBox.fillStyle(0x222222, 0.8);
progressBox.fillRect(240, 270, 320, 50);
var width = this.cameras.main.width;
var height = this.cameras.main.height;
var loadingText = this.make.text({
x: width / 2,
y: height / 2 - 50,
text: 'Loading...',
style: {
font: '20px monospace',
fill: '#ffffff'
}
});
loadingText.setOrigin(0.5, 0.5);
var percentText = this.make.text({
x: width / 2,
y: height / 2 - 5,
text: '0%',
style: {
font: '18px monospace',
fill: '#ffffff'
}
});
percentText.setOrigin(0.5, 0.5);
var assetText = this.make.text({
x: width / 2,
y: height / 2 + 50,
text: '',
style: {
font: '18px monospace',
fill: '#ffffff'
}
});
assetText.setOrigin(0.5, 0.5);
this.load.on('progress', function (value) {
percentText.setText(parseInt(value * 100) + '%');
progressBar.clear();
progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect(250, 280, 300 * value, 30);
});
this.load.on('fileprogress', function (file) {
assetText.setText('Loading asset: ' + file.key);
});
this.load.on('complete', function () {
progressBar.destroy();
progressBox.destroy();
loadingText.destroy();
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');
}
this.load.image("tick", '/assets/tick.png');
this.load.image("bg", '/assets/background.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,
frameHeight: 100,
});
this.load.spritesheet("target2", assetsList.right_image2,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("target3", assetsList.right_image3,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("target4", assetsList.right_image4,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks1", assetsList.left_image1,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks2", assetsList.left_image2, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks3", assetsList.left_image3, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks4", assetsList.left_image4, {
frameWidth: 100,
frameHeight: 100,
});
}
create() {
const bgWidthX = window.innerWidth / 2;
const bgWidthY = window.innerHeight / 2;
this.add.image(bgWidthX, bgWidthY, "bg").setScale(2.4);
this.add.image(1570, 140, "target1");
this.add.image(1569, 160, "border").setAlpha(0.4).setScale(0.7);
this.add.image(1570, 320, "target2");
this.add.image(1569, 340, "border").setAlpha(0.4).setScale(0.7);
this.add.image(1570, 530, "target3");
this.add.image(1569, 540, "border").setAlpha(0.4).setScale(0.7);
this.add.image(1570, 720, "target4");
this.add.image(1569, 730, "border").setAlpha(0.4).setScale(0.7);
const blocks = [
{
x: 300,
y: 90,
textureKey: "blocks1",
id: "block1",
},
{
x: 300,
y: 270,
textureKey: "blocks2",
id: "block2",
},
{
x: 300,
y: 470,
textureKey: "blocks3",
id: "block3",
},
{
x: 300,
y: 660,
textureKey: "blocks4",
id: "block4",
},
];
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.7);
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(0.3);
newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.1);
newBlock.x = dragX;
newBlock.y = dragY;
});
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)) {
//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);
}
});
});
}
}
const displayResult = (droppedBlocks) => {
// const overlap = document.getElementById("overlap");
// overlap.style.display = "block";
let finalDom;
let points = 0;
droppedBlocks.forEach((block) => {
const targetZone = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
if (targetZone) {
if (targetZone.block === block) {
points++;
}
}
});
// 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;
const isMatch = (blockName, targetName) => {
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
if(match){
score++
console.log(score)
}
if(score === 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;
};
</script>
<style>
* {
margin: 0;
padding: 0;
cursor: -webkit-grab; cursor: grab;
/* background-color: #7c4c23; */
/* border: 2px solid #7c4c23;
width: fit-content; */
}
/* body {
margin: 0;
background: #020202;
cursor: crosshair;
} */
/* canvas{display:block} */
/* h1 {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-family: "Source Sans Pro";
font-size: 5em;
font-weight: 900;
-webkit-user-select: none;
user-select: none;
} */
#overlap {
display: none;
/* width: 800px;
height: 600px; */
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #7c4c23;
text-align: center;
margin-top: 7%;
}
#overlap .win{
display: flex;
flex-direction: column;
place-items: center;
font-size: 40px;
font-weight: bolder;
height: fit-content;
}
#overlap .lost{
display: flex;
flex-direction: column;
justify-content: center;
place-items: center;
font-size: 40px;
font-weight: bolder;
}
.displayNone {
display: none;
}
#result {
font-size: 30px;
font-weight: bold;
}
/* .try{
font-size: 20px;
color: white;
} */
</style>
Reference in New Issue View Git Blame Copy Permalink