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

work_on_responseveness

pull/1/head
Dev 1 2023-07-24 22:33:38 +05:30
parent c8f57d1fa9
commit e5c2a41be5
2 changed files with 106 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,25 +48,25 @@ console.log(description)
<script is:inline>
const targetZones = [
{
x: 1430,
x: 0,
y: 160,
name: "target1",
block: null,
},
{
x: 1430,
x: 0,
y: 340,
name: "target2",
block: null,
},
{
x: 1430,
x: 0,
y: 540,
name: "target3",
block: null,
},
{
x: 1430,
x: 0,
y: 730,
name: "target4",
block: null,
@ -90,6 +90,7 @@ const blockMatches = [
targetName: "target4",
},
];
// console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {}
const params = new URLSearchParams(window.location.search);
@ -100,14 +101,14 @@ const params = new URLSearchParams(window.location.search);
// 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
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";
assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4 + "?width=100";
assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1 + "?width=100";
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,
@ -173,14 +174,12 @@ class MyGame extends Phaser.Scene {
}
});
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);
});
@ -191,12 +190,10 @@ class MyGame extends Phaser.Scene {
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);
@ -240,38 +237,52 @@ class MyGame extends Phaser.Scene {
});
}
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 displayW = window.innerWidth;
const displayH = window.innerHeight;
this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW * 0.82, 160, "target1"),
this.add.image(displayW * 0.82, 160, "border").setAlpha(0.4).setScale(0.7),
this.add.image(displayW * 0.82, 340, "target2"),
this.add.image(displayW * 0.82, 340, "border").setAlpha(0.4).setScale(0.7),
this.add.image(displayW * 0.82, 540, "target3"),
this.add.image(displayW * 0.82, 540, "border").setAlpha(0.4).setScale(0.7),
this.add.image(displayW * 0.82, 730, "target4"),
this.add.image(displayW * 0.82, 730, "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");
const blocks = [
{
x: 300,
x: displayW / 15,
y: 90,
textureKey: "blocks1",
id: "block1",
},
{
x: 300,
x: displayW / 15,
y: 270,
textureKey: "blocks2",
id: "block2",
},
{
x: 300,
x: displayW / 15,
y: 470,
textureKey: "blocks3",
id: "block3",
},
{
x: 300,
x: displayW / 15,
y: 660,
textureKey: "blocks4",
id: "block4",
@ -283,11 +294,11 @@ class MyGame extends Phaser.Scene {
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);
const targetBorder = this.add.image(targetZone.x = displayW * 1-210, 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);
@ -297,7 +308,6 @@ class MyGame extends Phaser.Scene {
newBlock.x = dragX;
newBlock.y = dragY;
});
newBlock.on("dragend", () => {
newBlock.setScale(1.0);
let droppedOnTargetZone = false;
@ -316,6 +326,23 @@ class MyGame extends Phaser.Scene {
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 {
@ -332,25 +359,26 @@ class MyGame extends Phaser.Scene {
if (!droppedOnTargetZone) {
newBlock.setPosition(block.x, block.y);
}
if (droppedBlocks.length === targetZones.length) {
if (droppedBlocks.length === targetZones.length)
{
displayResult(droppedBlocks);
}
});
});
})
}
}
const displayResult = (droppedBlocks) => {
// const overlap = document.getElementById("overlap");
// overlap.style.display = "block";
let finalDom;
// let finalDom;
let points = 0;
droppedBlocks.forEach((block) => {
const targetZone = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
if (targetZone) {
if (targetZone.block === block) {
points++;
console.log(points)
}
}
});
@ -367,26 +395,44 @@ const displayResult = (droppedBlocks) => {
let score = 0;
const isMatch = (blockName, targetName) => {
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
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")
}
score++;
console.log("Score:", score)
}
// 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;

2
src/pages/index.astro
View File

@ -11,7 +11,7 @@ import Footer from '../components/Footer.astro';
<h1>Welcome to <span class="text-gradient">Astro</span></h1>
<p class="instructions">
To get started, open the directory <code>src/pages</code> in your project.<br />
<strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
<strong>Code Challenge: Tweak the "Welcome to Astro" message above.</strong>
</p>
<ul role="list" class="link-card-grid">
<Card