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

s1

Browse Source
This commit is contained in:
Suvodip
2024-10-01 20:26:37 +05:30
parent 575967a8db
commit cdc95734ec
33 changed files with 3216 additions and 996 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,49 +1,34 @@
---
import Layout from '../../layouts/Layout.astro';
let starNumberOfTime = localStorage.getItem('starValue');
console.log(starNumberOfTime);
const numberOfTimes = starNumberOfTime;
---
<Layout title="Drag Game">
<main>
<div>
<div>
<!-- <img style="width: 100%; height: 150px;" src="/assets/topbar1.jpg" alt=""> -->
<div class="flex justify-center">
<div class="container mx-auto px-4">
<!-- <div class="flex flex-row place-content-between xl:px-40 pt-10">
<img src="/assets/top_match.jpg" alt="" />
<img src="/assets/top_logo.jpg" alt="" />
</div> -->
<div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
<div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
</div>
</div>
<div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
<div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
<div class="flex flex-row space-x-4 items-center justify-center">
<div id="star-container"></div>
</div>
<div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
<img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
<p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
</div>
<div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
<button onclick="" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
<button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
</div>
<!-- <h2>{data.name}</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="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">
<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="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> -->
</div>
<div id="lost" class="displayNone"></div>
<div class="clip-art-container absolute bottom-0 right-0">
<img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
</div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
@@ -51,6 +36,10 @@ import Layout from '../../layouts/Layout.astro';
</Layout>
<script src="/saveGameData.js" is:inline></script>
<script is:inline>
function showAnimation() {
const clipArt = document.querySelector('.clip-art');
clipArt.classList.add('show');
}
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
const drawingZone = {
@@ -282,6 +271,8 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("cancelIcon", '/assets/svg/cancel.svg');
this.load.image("resetIcon", '/assets/svg/reset.svg');
this.load.image("border", '/assets/svg/border.svg');
this.load.image("borderCorrect", '/assets/svg/border-correct.svg');
this.load.image("borderWrong", '/assets/svg/border-wrong.svg');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@@ -459,28 +450,54 @@ import Layout from '../../layouts/Layout.astro';
// window.location.reload();
// windowLoad();
submitUserData(this);
showAnimation();
});
let counter = 0;
const droppedBlocks = [];
const targetZoneBorders = [];
const isMatch = (blockName, targetName) => {
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
if (match !== undefined) {
scoreTotal++;
counter++;
return 'borderCorrect';
} else {
console.log(`Score Total: ${scoreTotal}`);
return 'borderWrong';
}
};
// Create target zones and their borders
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.5).setScale(1);
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, 'border');
blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
targetZoneBorders.push(targetBorder);
targetZone.block = null;
});
// Add interactive blocks and handle drag events
blocks.forEach((block) => {
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;
newBlock.y = dragY;
});
newBlock.on("dragend", () => {
newBlock.setScale(1.0);
let droppedOnTargetZone = false;
targetZones.forEach((targetZone, targetIndex) => {
if (
Phaser.Geom.Intersects.RectangleToRectangle(
@@ -493,77 +510,39 @@ import Layout from '../../layouts/Layout.astro';
newBlock.disableInteractive();
targetZone.block = newBlock;
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
// Check if the block matches the target and update the specific border
const borderCondition = isMatch(newBlock.texture.key, targetZone.name);
targetZoneBorders[targetIndex].setTexture(borderCondition); // Update only the matched border
if (counter === 4) {
submitButton.setVisible(true); // Show submit button if required counter reached
}
} else {
newBlock.setPosition(block.x, block.y);
}
droppedOnTargetZone = true;
targetZoneBorders[targetIndex].setVisible(true);
targetZoneBorders[targetIndex].setAlpha(1);
targetZoneBorders[targetIndex].setVisible(true); // Make the border visible
targetZoneBorders[targetIndex].setAlpha(1); // Set border to fully visible
return;
}
});
if (!droppedOnTargetZone) {
newBlock.setPosition(block.x, block.y);
newBlock.setPosition(block.x, block.y); // Reset position if not dropped on any target zone
}
if (droppedBlocks.length === targetZones.length)
{
displayResult(droppedBlocks);
if (droppedBlocks.length === targetZones.length) {
displayResult(droppedBlocks); // Display results when all blocks are dropped
}
});
});
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
});
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
// console.log(match)
if(match !== undefined){
scoreTotal++;
// console.log("Score Total", scoreTotal)
// resultView.setVisible(false);
}
if(counter === 4){
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
// console.log(counter)
submitButton.setVisible(true);
resultView.setVisible(true);
}
};
// const footerBorder = this.add.graphics();
// const footerX = 0; const footerY = window.innerHeight / 1.07;
// const footerLineWidth = window.innerWidth;
@@ -615,64 +594,30 @@ import Layout from '../../layouts/Layout.astro';
cursor: -webkit-grab; cursor: grab;
font-family: quicksand;
}
/* 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;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #7c4c23;
text-align: center;
margin-top: 7%;
/* Animation styles */
@keyframes slideInUp {
0% {
opacity: 0;
transform: translateY(100%); /* Start below the viewport */
}
#overlap .verryGood{
display: flex;
flex-direction: column;
place-items: center;
font-size: 40px;
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;
justify-content: center;
place-items: center;
font-size: 40px;
font-weight: bolder;
}
.displayNone {
display: none;
}
#result {
font-size: 30px;
font-weight: bold;
100% {
opacity: 1;
transform: translateY(0); /* End at its original position */
}
}
.clip-art-container {
overflow: hidden; /* Prevents overflow during the animation */
}
.clip-art {
transform: translateX(100%); /* Initially off-screen to the right */
opacity: 0; /* Initially hidden */
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; /* Smooth transition */
}
.clip-art.show {
transform: translateX(0); /* Move the image into view */
opacity: 1; /* Fade in */
}
</style>