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> <script is:inline>
const targetZones = [ const targetZones = [
{ {
x: 1430, x: 0,
y: 160, y: 160,
name: "target1", name: "target1",
block: null, block: null,
}, },
{ {
x: 1430, x: 0,
y: 340, y: 340,
name: "target2", name: "target2",
block: null, block: null,
}, },
{ {
x: 1430, x: 0,
y: 540, y: 540,
name: "target3", name: "target3",
block: null, block: null,
}, },
{ {
x: 1430, x: 0,
y: 730, y: 730,
name: "target4", name: "target4",
block: null, block: null,
@ -90,6 +90,7 @@ const blockMatches = [
targetName: "target4", targetName: "target4",
}, },
]; ];
// console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {} var assetsList = {}
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
@ -100,14 +101,14 @@ const params = new URLSearchParams(window.location.search);
// console.log("finding:: data",data) // console.log("finding:: data",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
assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1 assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1 + "?width=100";
assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2 assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2 + "?width=100";
assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3 assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3 + "?width=100";
assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4 assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4 + "?width=100";
assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1 assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1 + "?width=100";
assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2 assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2 + "?width=100";
assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3 assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3 + "?width=100";
assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4 assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4 + "?width=100";
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
@ -173,14 +174,12 @@ class MyGame extends Phaser.Scene {
} }
}); });
assetText.setOrigin(0.5, 0.5); assetText.setOrigin(0.5, 0.5);
this.load.on('progress', function (value) { this.load.on('progress', function (value) {
percentText.setText(parseInt(value * 100) + '%'); percentText.setText(parseInt(value * 100) + '%');
progressBar.clear(); progressBar.clear();
progressBar.fillStyle(0xffffff, 1); progressBar.fillStyle(0xffffff, 1);
progressBar.fillRect(250, 280, 300 * value, 30); progressBar.fillRect(250, 280, 300 * value, 30);
}); });
this.load.on('fileprogress', function (file) { this.load.on('fileprogress', function (file) {
assetText.setText('Loading asset: ' + file.key); assetText.setText('Loading asset: ' + file.key);
}); });
@ -191,12 +190,10 @@ class MyGame extends Phaser.Scene {
percentText.destroy(); percentText.destroy();
assetText.destroy(); assetText.destroy();
}); });
// this.load.image('logo', 'zenvalogo.png'); // this.load.image('logo', 'zenvalogo.png');
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
this.load.image('logo'+i, '/assets/background.jpg'); this.load.image('logo'+i, '/assets/background.jpg');
} }
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
this.load.image("bg", '/assets/background.jpg'); this.load.image("bg", '/assets/background.jpg');
// this.load.image("target1", assetsList.right_image1); // this.load.image("target1", assetsList.right_image1);
@ -240,38 +237,52 @@ class MyGame extends Phaser.Scene {
}); });
} }
create() { create() {
const bgWidthX = window.innerWidth / 2;
const bgWidthY = window.innerHeight / 2; const displayW = window.innerWidth;
this.add.image(bgWidthX, bgWidthY, "bg").setScale(2.4); const displayH = window.innerHeight;
this.add.image(1570, 140, "target1");
this.add.image(1569, 160, "border").setAlpha(0.4).setScale(0.7); this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(1570, 320, "target2"); this.add.image(displayW * 0.82, 160, "target1"),
this.add.image(1569, 340, "border").setAlpha(0.4).setScale(0.7); this.add.image(displayW * 0.82, 160, "border").setAlpha(0.4).setScale(0.7),
this.add.image(1570, 530, "target3"); this.add.image(displayW * 0.82, 340, "target2"),
this.add.image(1569, 540, "border").setAlpha(0.4).setScale(0.7); this.add.image(displayW * 0.82, 340, "border").setAlpha(0.4).setScale(0.7),
this.add.image(1570, 720, "target4"); this.add.image(displayW * 0.82, 540, "target3"),
this.add.image(1569, 730, "border").setAlpha(0.4).setScale(0.7); 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 = [ const blocks = [
{ {
x: 300, x: displayW / 15,
y: 90, y: 90,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
}, },
{ {
x: 300, x: displayW / 15,
y: 270, y: 270,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
}, },
{ {
x: 300, x: displayW / 15,
y: 470, y: 470,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
}, },
{ {
x: 300, x: displayW / 15,
y: 660, y: 660,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
@ -283,11 +294,11 @@ class MyGame extends Phaser.Scene {
targetZones.forEach((targetZone) => { targetZones.forEach((targetZone) => {
const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); 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); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}); }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); 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); 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.x = dragX;
newBlock.y = dragY; newBlock.y = dragY;
}); });
newBlock.on("dragend", () => { newBlock.on("dragend", () => {
newBlock.setScale(1.0); newBlock.setScale(1.0);
let droppedOnTargetZone = false; let droppedOnTargetZone = false;
@ -316,6 +326,23 @@ class MyGame extends Phaser.Scene {
droppedBlocks.push(newBlock); droppedBlocks.push(newBlock);
if (isMatch(newBlock.texture.key, targetZone.name)) { 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 //counter++; // Increment the counter when a match is found
} }
} else { } else {
@ -332,25 +359,26 @@ class MyGame extends Phaser.Scene {
if (!droppedOnTargetZone) { if (!droppedOnTargetZone) {
newBlock.setPosition(block.x, block.y); newBlock.setPosition(block.x, block.y);
} }
if (droppedBlocks.length === targetZones.length)
if (droppedBlocks.length === targetZones.length) { {
displayResult(droppedBlocks); displayResult(droppedBlocks);
} }
}); });
}); })
} }
} }
const displayResult = (droppedBlocks) => { const displayResult = (droppedBlocks) => {
// const overlap = document.getElementById("overlap"); // const overlap = document.getElementById("overlap");
// overlap.style.display = "block"; // overlap.style.display = "block";
let finalDom; // let finalDom;
let points = 0; let points = 0;
droppedBlocks.forEach((block) => { 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) {
if (targetZone.block === block) { if (targetZone.block === block) {
points++; points++;
console.log(points)
} }
} }
}); });
@ -367,26 +395,44 @@ const displayResult = (droppedBlocks) => {
let score = 0; let score = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match){ if(match){
score++ score++;
console.log(score) console.log("Score:", 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")
}
} }
// 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) // console.log("Result", result)
return match !== undefined; 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> <h1>Welcome to <span class="text-gradient">Astro</span></h1>
<p class="instructions"> <p class="instructions">
To get started, open the directory <code>src/pages</code> in your project.<br /> 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> </p>
<ul role="list" class="link-card-grid"> <ul role="list" class="link-card-grid">
<Card <Card