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

add score calculation in drag all games all varient

pull/2/head
dev sp 2024-01-18 13:37:13 +00:00
parent 94e1b772aa
commit 15b8c1e803
4 changed files with 102 additions and 265 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -75,6 +75,8 @@ import Layout from '../../layouts/Layout.astro';
let submitButton; let submitButton;
let formattedDateTime; let formattedDateTime;
let shortUniqueID; let shortUniqueID;
let scoreTotal = 0;
let resultView;
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -505,6 +507,30 @@ import Layout from '../../layouts/Layout.astro';
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); 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 = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
resultView.setVisible(false);
}
if(counter === 4){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
// console.log(counter)
submitButton.setVisible(true);
resultView.setVisible(true);
}
};
} }
} }
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
@ -529,82 +555,7 @@ import Layout from '../../layouts/Layout.astro';
const targetZone = targetZones.find((zone) => zone.name === block.texture.key); const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
}); });
}; };
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
if(counter === 4){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
// console.log(counter)
submitButton.setVisible(true);
}
}
let scoreTotal = 0;
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match !== undefined){
scoreTotal++;
console.log(scoreTotal)
}
// console.log(scoreTotal)
// // console.log(match)
// if(match){
// score++;
// console.log(score)
// let day;
// switch (score) {
// case 0:
// day = "Points - 1";
// break;
// case 2:
// day = "Points - 2";
// break;
// case 4:
// day = "Points - 4";
// }
// console.log(day)
// 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")
// // }
// } else{
// score = score
// }
// return match !== undefined;
};
</script> </script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" > <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >

156
src/pages/drag/v2.astro
View File

@ -76,6 +76,9 @@ import Layout from '../../layouts/Layout.astro';
let formattedDateTime; let formattedDateTime;
let shortUniqueID; let shortUniqueID;
let blockMatches; let blockMatches;
let resultView;
let scoreTotal = 0; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -469,60 +472,6 @@ import Layout from '../../layouts/Layout.astro';
displayResult(droppedBlocks); displayResult(droppedBlocks);
} }
}); });
// newBlock.on("dragend", () => {
// newBlock.setScale(1.0);
// let droppedOnTargetZone = false;
// targetZones.forEach((targetZone, targetIndex) => {
// if (
// Phaser.Geom.Intersects.RectangleToRectangle(
// newBlock.getBounds(),
// new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
// )
// ) {
// if (targetZone.block === null) {
// newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
// 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
// }
// } else {
// newBlock.setPosition(block.x, block.y);
// }
// droppedOnTargetZone = true;
// targetZoneBorders[targetIndex].setVisible(true);
// targetZoneBorders[targetIndex].setAlpha(1);
// return;
// }
// });
// if (!droppedOnTargetZone) {
// newBlock.setPosition(block.x, block.y);
// }
// if (droppedBlocks.length === targetZones.length)
// {
// displayResult(droppedBlocks);
// }
// });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', { let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', font: '600 30px Quicksand',
@ -533,6 +482,29 @@ import Layout from '../../layouts/Layout.astro';
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); 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 = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
}
if(counter === 4){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
// console.log(counter)
submitButton.setVisible(true);
resultView.setVisible(true);
}
};
} }
} }
// let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", { // let hideButton = this.add.text(helpButtonWidth, helpButtonHeight, "Let`s Do", {
@ -557,82 +529,6 @@ import Layout from '../../layouts/Layout.astro';
const targetZone = targetZones.find((zone) => zone.name === block.texture.key); const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
}); });
}; };
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
if(counter === 4){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
// console.log(counter)
submitButton.setVisible(true);
}
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
let scoreTotal=0;
if(match){
scoreTotal++;
// console.log(scoreTotal)
}
// console.log(scoreTotal)
// // console.log(match)
// if(match){
// score++;
// console.log(score)
// let day;
// switch (score) {
// case 0:
// day = "Points - 1";
// break;
// case 2:
// day = "Points - 2";
// break;
// case 4:
// day = "Points - 4";
// }
// console.log(day)
// 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")
// // }
// } else{
// score = score
// }
// return match !== undefined;
};
</script> </script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" > <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >

49
src/pages/drag/v3.astro
View File

@ -81,6 +81,8 @@ import Layout from '../../layouts/Layout.astro';
let shortUniqueID; let shortUniqueID;
let retryButton; let retryButton;
let blockMatches; let blockMatches;
let resultView;
let scoreTotal = 0; // resultView scoreTotal
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -428,13 +430,13 @@ import Layout from '../../layouts/Layout.astro';
id: "block4", id: "block4",
}, },
{ {
x: displayW / 2+100, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks5", textureKey: "blocks5",
id: "block5", id: "block5",
}, },
{ {
x: displayW / 2, x: displayW / 2+100,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks6", textureKey: "blocks6",
id: "block6", id: "block6",
@ -506,28 +508,11 @@ import Layout from '../../layouts/Layout.astro';
} }
}); });
}); });
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon') retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); retryButton.setVisible(false);
}
}
const displayResult = (droppedBlocks) => {
// const overlap = document.getElementById("overlap");
// overlap.style.display = "block";
// let finalDom;
droppedBlocks.forEach((block) => {
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
});
};
let score = 0; let score = 0;
let counter = 0; let counter = 0;
@ -535,22 +520,28 @@ import Layout from '../../layouts/Layout.astro';
if(isMatch){ if(isMatch){
counter++; counter++;
// console.log(counter) // console.log(counter)
}
//resultView scoreTotal
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
if(match){
scoreTotal++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
// console.log(scoreTotal)
}
if(counter === 8){ if(counter === 8){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
// console.log(counter) // console.log(counter)
submitButton.setVisible(true); submitButton.setVisible(true);
retryButton.setVisible(true); retryButton.setVisible(true);
resultView.setVisible(true);
}
};
} }
} }
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); const displayResult = (droppedBlocks) => {
console.log(match) droppedBlocks.forEach((block) => {
let scoreTotal=0; const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
if(match){ });
scoreTotal++;
// console.log(scoreTotal)
}
}; };
</script> </script>

47
src/pages/drag/v4.astro
View File

@ -81,6 +81,8 @@ import Layout from '../../layouts/Layout.astro';
let shortUniqueID; let shortUniqueID;
let retryButton; let retryButton;
let blockMatches; let blockMatches;
let scoreTotal = 0;
let resultView; // scoreTotal resultView
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -513,6 +515,27 @@ import Layout from '../../layouts/Layout.astro';
window.location.reload(); window.location.reload();
}) })
retryButton.setVisible(false); retryButton.setVisible(false);
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++;
resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
console.log("Score Total", scoreTotal)
}
if(counter === 8){
// console.log(counter)
submitButton.setVisible(true);
retryButton.setVisible(true);
resultView.setVisible(true);
}
};
} }
} }
const displayResult = (droppedBlocks) => { const displayResult = (droppedBlocks) => {
@ -520,30 +543,6 @@ import Layout from '../../layouts/Layout.astro';
const targetZone = targetZones.find((zone) => zone.name === block.texture.key); const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
}); });
}; };
let score = 0;
let counter = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
console.log(counter)
if(counter === 8){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
console.log(counter)
submitButton.setVisible(true);
retryButton.setVisible(true);
}
}
const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
console.log(match)
let scoreTotal=0;
if(match !== undefined){
scoreTotal++;
console.log("Score Total", scoreTotal)
}
};
</script> </script>
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" > <style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >