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

try_swicth_statement

pull/1/head
Dev 1 2023-07-26 21:57:53 +05:30
parent 9146a4575a
commit 71e3858f07
2 changed files with 63 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,11 +20,11 @@ import Layout from '../../layouts/Layout.astro';
</div>
<div id="overlap">
<!-- <div id="result"></div> -->
<div id="win" class="displayNone ">
<p>Congratulations!</p>
<p>You win the Game!</p>
<div id="verryGood" 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="flex flex-row">
<!-- <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>
@ -33,16 +33,17 @@ import Layout from '../../layouts/Layout.astro';
</a>
</div>
<div>
</div>
</div> -->
</div>
<div id="lost" class="displayNone">
<p>Oops!</p>
<div id="good" 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>
</a> -->
</div>
<div id="lost" class="displayNone"></div>
</div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
@ -309,21 +310,17 @@ class MyGame extends Phaser.Scene {
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 = displayW * 0.9 - 172, 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.3);
newBlock.x = dragX;
@ -332,7 +329,6 @@ class MyGame extends Phaser.Scene {
newBlock.on("dragend", () => {
newBlock.setScale(1.0);
let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => {
if (
Phaser.Geom.Intersects.RectangleToRectangle(
@ -380,7 +376,6 @@ class MyGame extends Phaser.Scene {
}
if (droppedBlocks.length === targetZones.length)
{
displayResult(droppedBlocks);
}
});
@ -395,8 +390,8 @@ const displayResult = (droppedBlocks) => {
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
});
};
score = 0;
counter = 0;
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
@ -407,30 +402,53 @@ if(isMatch){
// console.log("Done")
}
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match){
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 {
// console.log("2")
finalDom = document.getElementById("lost");
finalDom.classList.add("lost");
// console.log("Loose")
console.log(score)
switch (score) {
case 1:
day = "Points - 1";
break;
case 2:
day = "Points - 2";
break;
case 4:
day = "Points - 4";
}
finalDom = document.getElementById("good");
finalDom.classList.add("good");
document.getElementById("good").innerHTML = day;
document.getElementById("good").style.color = '#7c4c23'
// console.log(totalScore)
// if(score === 2){
// finalDom = document.getElementById("good");
// finalDom.classList.add("good");
// document.getElementById("good").innerHTML = " Good";
// document.getElementById("good").style.color = '#7c4c23'
// // let img = document.createElement("img");
// // img.src = "/assets/party-feestje.gif";
// // img.width = 100;
// // document.getElementById('win').appendChild(img);
// }
// else if(score === 4) {
// finalDom = document.getElementById("verryGood");
// finalDom.classList.add("verryGood");
// document.getElementById("verryGood").innerHTML = "Verry Good";
// document.getElementById("verryGood").style.color = '#7c4c23'
// }
// else {
// // finalDom = document.getElementById("lost");
// // finalDom.classList.add("lost");
// // document.getElementById("lost").innerHTML = " Lost";
// // document.getElementById("lost").style.color = '#7c4c23'
// // console.log("Losttttt")
// }
}
// console.log("Result", result)
return match !== undefined;
};
</script>
@ -470,7 +488,7 @@ user-select: none;
text-align: center;
margin-top: 7%;
}
#overlap .win{
#overlap .verryGood{
display: flex;
flex-direction: column;
place-items: center;
@ -478,6 +496,14 @@ user-select: none;
font-weight: bolder;
height: fit-content;
}
#overlap .good{
display: flex;
flex-direction: column;
justify-content: center;
place-items: center;
font-size: 40px;
font-weight: bolder;
}
#overlap .lost{
display: flex;
flex-direction: column;

0
src/pages/drag/font-size.js → src/pages/drag/test.js
View File