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

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

@ -20,11 +20,11 @@ import Layout from '../../layouts/Layout.astro';
</div> </div>
<div id="overlap"> <div id="overlap">
<!-- <div id="result"></div> --> <!-- <div id="result"></div> -->
<div id="win" class="displayNone "> <div id="verryGood" class="displayNone ">
<p>Congratulations!</p> <!-- <p>Congratulations!</p>
<p>You win the Game!</p> <p>You win the Game!</p> -->
<!-- <img class="" src="/assets/party-feestje.gif" alt="" style="width: 200px; height: 200px;" /> --> <!-- <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="" > <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> <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>
@ -33,16 +33,17 @@ import Layout from '../../layouts/Layout.astro';
</a> </a>
</div> </div>
<div> <div>
</div> -->
</div> </div>
</div> <div id="good" class="displayNone">
<div id="lost" class="displayNone"> <!-- <p>Oops!</p>
<p>Oops!</p>
<p>You Lost the Game!</p> <p>You Lost the Game!</p>
<img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" /> <img class="" src="/assets/output-onlinegiftools.gif" alt="" style="width: 200px; height: 200px;" />
<a href="" > <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> <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>
<div id="lost" class="displayNone"></div>
</div> </div>
</div> </div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script> <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
@ -309,21 +310,17 @@ class MyGame extends Phaser.Scene {
id: "block4", id: "block4",
}, },
]; ];
const droppedBlocks = []; const droppedBlocks = [];
const targetZoneBorders = []; const targetZoneBorders = [];
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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7); const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, 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);
newBlock.on("drag", (pointer, dragX, dragY) => { newBlock.on("drag", (pointer, dragX, dragY) => {
newBlock.setScale(1.3); newBlock.setScale(1.3);
newBlock.x = dragX; newBlock.x = dragX;
@ -332,7 +329,6 @@ class MyGame extends Phaser.Scene {
newBlock.on("dragend", () => { newBlock.on("dragend", () => {
newBlock.setScale(1.0); newBlock.setScale(1.0);
let droppedOnTargetZone = false; let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => { targetZones.forEach((targetZone, targetIndex) => {
if ( if (
Phaser.Geom.Intersects.RectangleToRectangle( Phaser.Geom.Intersects.RectangleToRectangle(
@ -380,7 +376,6 @@ class MyGame extends Phaser.Scene {
} }
if (droppedBlocks.length === targetZones.length) if (droppedBlocks.length === targetZones.length)
{ {
displayResult(droppedBlocks); displayResult(droppedBlocks);
} }
}); });
@ -395,8 +390,8 @@ const displayResult = (droppedBlocks) => {
const targetZone = targetZones.find((zone) => zone.name === block.texture.key); const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
}); });
}; };
score = 0; let score = 0;
counter = 0; let counter = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {
if(isMatch){ if(isMatch){
counter++; counter++;
@ -408,29 +403,52 @@ if(isMatch){
} }
} }
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) console.log(match)
if(match){ if(match){
score++; score++;
// console.count(score) console.log(score)
let totalPoints = score switch (score) {
// let totalPoints = score.length; case 1:
console.log(totalPoints) day = "Points - 1";
// let totalPoints = {}; break;
if(score == 4){ case 2:
finalDom = document.getElementById("win"); day = "Points - 2";
finalDom.classList.add("win"); break;
// let img = document.createElement("img"); case 4:
// img.src = "/assets/party-feestje.gif"; day = "Points - 4";
// img.width = 100;
// document.getElementById('win').appendChild(img);
} else {
// console.log("2")
finalDom = document.getElementById("lost");
finalDom.classList.add("lost");
// console.log("Loose")
} }
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; return match !== undefined;
}; };
</script> </script>
@ -470,7 +488,7 @@ user-select: none;
text-align: center; text-align: center;
margin-top: 7%; margin-top: 7%;
} }
#overlap .win{ #overlap .verryGood{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
place-items: center; place-items: center;
@ -478,6 +496,14 @@ user-select: none;
font-weight: bolder; font-weight: bolder;
height: fit-content; height: fit-content;
} }
#overlap .good{
display: flex;
flex-direction: column;
justify-content: center;
place-items: center;
font-size: 40px;
font-weight: bolder;
}
#overlap .lost{ #overlap .lost{
display: flex; display: flex;
flex-direction: column; flex-direction: column;

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