609 lines
24 KiB
Plaintext
609 lines
24 KiB
Plaintext
---
|
|
import Layout from '../../layouts/Layout.astro';
|
|
---
|
|
<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>
|
|
<!-- <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>
|
|
</div>
|
|
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
|
</main>
|
|
</Layout>
|
|
<script is:inline>
|
|
const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
|
|
const drawingZone = {
|
|
x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
|
|
y: window.innerHeight / 4,
|
|
width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
|
|
height: window.innerHeight / 2,
|
|
};
|
|
if(isMobile){
|
|
noticeWidth = 100;
|
|
noticeHeight = 0;
|
|
buttonWidth = 67;
|
|
buttonHeight = 0;
|
|
retryButtonWidth = window.innerWidth / 2 - 140;
|
|
retryButtonHeight = window.innerHeight - 50;
|
|
leftTargetZoneW = window.innerWidth / 6;
|
|
rightTargetZoneW = window.innerWidth * 0.9 - 40;
|
|
} else {
|
|
noticeWidth = 100;
|
|
noticeHeight = 0;
|
|
buttonWidth = 100;
|
|
buttonHeight = 0;
|
|
retryButtonWidth = window.innerWidth / 2 - 50;
|
|
retryButtonHeight = window.innerHeight - 70;
|
|
leftTargetZoneW = window.innerWidth / 6;
|
|
rightTargetZoneW = window.innerWidth * 0.9 - 172;
|
|
}
|
|
let submitButton;
|
|
let formattedDateTime;
|
|
let shortUniqueID;
|
|
let retryButton;
|
|
let blockMatches;
|
|
let scoreTotal = 0;
|
|
let resultView; // scoreTotal resultView
|
|
gameResult = [];
|
|
window.onload = function() {
|
|
// Get the current date and time
|
|
currentDate = new Date();
|
|
|
|
formattedDateTime = currentDate.toLocaleString();
|
|
|
|
};
|
|
function generateShortUniqueID(length) {14
|
|
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
|
|
let result = '';
|
|
for (let i = 0; i < length; i++) {
|
|
const randomIndex = Math.floor(Math.random() * characters.length);
|
|
result += characters.charAt(randomIndex);
|
|
}
|
|
return result;
|
|
};
|
|
shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length * 0.9 - 172
|
|
const leftTargetZones = [
|
|
{
|
|
x: leftTargetZoneW + 30,
|
|
y: window.innerHeight / 2.5,
|
|
name: "target1",
|
|
block: null,
|
|
},
|
|
// Add more left target zones as needed
|
|
];
|
|
|
|
const rightTargetZones = [
|
|
{
|
|
x: rightTargetZoneW - 30,
|
|
y: window.innerHeight / 2.5,
|
|
name: "target2",
|
|
block: null,
|
|
},
|
|
// Add more right target zones as needed
|
|
];
|
|
|
|
const targetZones = [...leftTargetZones, ...rightTargetZones];
|
|
// console.log(blockMatches.blockName, blockMatches.targetName)
|
|
var assetsList = {};
|
|
const params = new URLSearchParams(window.location.search);
|
|
const paramsID = params.get('id');
|
|
const data = fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
|
.then(response => response.json())
|
|
.then(({data}) => {
|
|
const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
|
|
if(isMobile){
|
|
imageCustomWidth = "?width=100";
|
|
} else{
|
|
imageCustomWidth = "?width=100";
|
|
}
|
|
const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
|
|
assetsList.element1 = assetsURL + image1 + imageCustomWidth;
|
|
assetsList.element2 = assetsURL + image2 + imageCustomWidth;
|
|
assetsList.element3 = assetsURL + image3 + imageCustomWidth;
|
|
assetsList.element4 = assetsURL + image4 + imageCustomWidth;
|
|
assetsList.element5 = assetsURL + image5 + imageCustomWidth;
|
|
assetsList.element6 = assetsURL + image6 + imageCustomWidth;
|
|
assetsList.element7 = assetsURL + image7 + imageCustomWidth;
|
|
assetsList.element8 = assetsURL + image8 + imageCustomWidth;
|
|
// console.log(assetsList.left_image1)
|
|
const config = {
|
|
type: Phaser.AUTO,
|
|
width: window.innerWidth,
|
|
height: window.innerHeight,
|
|
backgroundColor: '#ffffff',
|
|
parent: "phaser-example",
|
|
scale: {
|
|
mode: Phaser.Scale.FIT,
|
|
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
|
},
|
|
scene: MyGame,
|
|
};
|
|
const game = new Phaser.Game(config);
|
|
|
|
})
|
|
.catch(error => {
|
|
|
|
console.error('Error fetching initial data:', error);
|
|
});
|
|
class MyGame extends Phaser.Scene {
|
|
constructor() {
|
|
super();
|
|
}
|
|
preload() {
|
|
var progressBar = this.add.graphics();
|
|
var progressBox = this.add.graphics();
|
|
progressBox.fillStyle(0x222222, 0.8);
|
|
progressBox.fillRect(240, 270, 320, 50);
|
|
|
|
var width = this.cameras.main.width;
|
|
var height = this.cameras.main.height;
|
|
var loadingText = this.make.text({
|
|
x: width / 2,
|
|
y: height / 2 - 50,
|
|
text: 'Loading...',
|
|
style: {
|
|
font: '20px monospace',
|
|
fill: '#ffffff'
|
|
}
|
|
});
|
|
loadingText.setOrigin(0.5, 0.5);
|
|
var percentText = this.make.text({
|
|
x: width / 2,
|
|
y: height / 2 - 5,
|
|
text: '0%',
|
|
style: {
|
|
font: '18px monospace',
|
|
fill: '#ffffff'
|
|
}
|
|
});
|
|
percentText.setOrigin(0.5, 0.5);
|
|
var assetText = this.make.text({
|
|
x: width / 2,
|
|
y: height / 2 + 50,
|
|
text: '',
|
|
style: {
|
|
font: '18px monospace',
|
|
fill: '#ffffff'
|
|
}
|
|
});
|
|
assetText.setOrigin(0.5, 0.5);
|
|
this.load.on('progress', function (value) {
|
|
percentText.setText(parseInt(value * 100) + '%');
|
|
progressBar.clear();
|
|
progressBar.fillStyle(0xffffff, 1);
|
|
progressBar.fillRect(250, 280, 300 * value, 30);
|
|
});
|
|
this.load.on('fileprogress', function (file) {
|
|
assetText.setText('Loading asset: ' + file.key);
|
|
});
|
|
this.load.on('complete', function () {
|
|
progressBar.destroy();
|
|
progressBox.destroy();
|
|
loadingText.destroy();
|
|
percentText.destroy();
|
|
assetText.destroy();
|
|
});
|
|
// this.load.image('logo', 'zenvalogo.png');
|
|
for (var i = 0; i < 5; i++) {
|
|
this.load.image('logo'+i, '/assets/background.jpg');
|
|
}
|
|
this.load.image("topMatch", "/assets/top_match.jpg");
|
|
this.load.image("topLogo", "/assets/top_logo.jpg");
|
|
this.load.image("tick", '/assets/tick.png');
|
|
this.load.image("retryIcon", "/assets/svg/retry.svg")
|
|
this.load.image("border", '/assets/squar.png');
|
|
this.load.spritesheet("blocks1", assetsList.element5,{
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
this.load.spritesheet("blocks2", assetsList.element6,{
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
this.load.spritesheet("blocks3", assetsList.element7,{
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
this.load.spritesheet("blocks4", assetsList.element8,{
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
this.load.spritesheet("blocks5", assetsList.element1,{
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
this.load.spritesheet("blocks6", assetsList.element2, {
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
this.load.spritesheet("blocks7", assetsList.element3, {
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
this.load.spritesheet("blocks8", assetsList.element4, {
|
|
frameWidth: 100,
|
|
frameHeight: 100,
|
|
});
|
|
}
|
|
|
|
create() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const paramsID = params.get('id');
|
|
fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v4/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
|
|
.then(response => response.json())
|
|
.then(({ data }) => {
|
|
blockMatches = [
|
|
{
|
|
blockName: "blocks1",
|
|
targetName: `target${data.match1}`,
|
|
},
|
|
{
|
|
blockName: "blocks2",
|
|
targetName: `target${data.match2}`,
|
|
},
|
|
{
|
|
blockName: "blocks3",
|
|
targetName: `target${data.match3}`,
|
|
},
|
|
{
|
|
blockName: "blocks4",
|
|
targetName: `target${data.match4}`,
|
|
},
|
|
{
|
|
blockName: "blocks5",
|
|
targetName: `target${data.match5}`,
|
|
},
|
|
{
|
|
blockName: "blocks6",
|
|
targetName: `target${data.match6}`,
|
|
},
|
|
{
|
|
blockName: "blocks7",
|
|
targetName: `target${data.match7}`,
|
|
},
|
|
{
|
|
blockName: "blocks8",
|
|
targetName: `target${data.match8}`,
|
|
}
|
|
];
|
|
// console.log(data)
|
|
if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
|
|
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
|
|
this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
|
|
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
|
|
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
|
|
this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
|
|
this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
|
|
this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
|
|
this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
|
|
}
|
|
if(isMobile){
|
|
this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#7C4C23`});
|
|
this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
|
|
} else{
|
|
this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
|
|
this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
|
|
}
|
|
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
|
// Base font size for your text
|
|
const baseFontSize = 22;
|
|
// Calculate responsive font size based on screen width
|
|
const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
|
|
const descrptText = this.add.text(screenCenterX, 95, data.description, {
|
|
font: ` ${responsiveFontSize}px Quicksand`,
|
|
fill: '#7c4c23',
|
|
}).setOrigin(0.5);
|
|
})
|
|
.catch(error => {
|
|
console.error('Error fetching initial data:', error);
|
|
});
|
|
const displayW = window.innerWidth;
|
|
const URL = window.location.href;
|
|
const gameName = URL.split('/');
|
|
let userData = {
|
|
'user': 'drawing@beanstalkedu.com',
|
|
'game_name': gameName[3],
|
|
'starts': formattedDateTime,
|
|
// 'game_start' : gameStartTime,
|
|
};
|
|
function submitUserData() {
|
|
fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type' : 'application/json'
|
|
},
|
|
body: JSON.stringify(userData)
|
|
})
|
|
.then(response => {
|
|
if(response.ok){
|
|
// console.log('Data Saved', response)
|
|
} else{
|
|
// console.log('Something Wrong', response)
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('An error occured', error)
|
|
});
|
|
};
|
|
// window.load
|
|
|
|
const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
|
|
font: '600 20px Quicksand',
|
|
fill: 'blue'
|
|
}).setDepth(1);
|
|
submitNotic.setVisible(false);
|
|
submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
|
|
font: '600 30px Quicksand',
|
|
fill: '#fff',
|
|
backgroundColor: 'blue',
|
|
padding: { x: 20, y: 10 },
|
|
}).setDepth(1);
|
|
submitButton.setVisible(false);
|
|
submitButton.setInteractive().on('pointerdown', () => {
|
|
// console.log('Clicked');
|
|
submitButton.setVisible(false);
|
|
submitNotic.setVisible(true);
|
|
// window.location.reload();
|
|
// windowLoad();
|
|
submitUserData();
|
|
})
|
|
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
|
|
this.add.image(displayW / 6, 30, "topMatch").setScale();
|
|
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
|
|
const blocks = [
|
|
{
|
|
x: displayW / 2 - 200,
|
|
y: window.innerHeight - 250,
|
|
textureKey: "blocks1",
|
|
id: "block1",
|
|
},
|
|
{
|
|
x: displayW / 2-100,
|
|
y: window.innerHeight - 250,
|
|
textureKey: "blocks2",
|
|
id: "block2",
|
|
},
|
|
{
|
|
x: displayW / 2,
|
|
y: window.innerHeight - 250,
|
|
textureKey: "blocks3",
|
|
id: "block3",
|
|
},
|
|
{
|
|
x: displayW / 2+100,
|
|
y: window.innerHeight - 250,
|
|
textureKey: "blocks4",
|
|
id: "block4",
|
|
},
|
|
{
|
|
x: displayW / 2-200,
|
|
y: window.innerHeight - 120,
|
|
textureKey: "blocks5",
|
|
id: "block5",
|
|
},
|
|
{
|
|
x: displayW / 2-100,
|
|
y: window.innerHeight - 120,
|
|
textureKey: "blocks6",
|
|
id: "block6",
|
|
},
|
|
{
|
|
x: displayW / 2,
|
|
y: window.innerHeight - 120,
|
|
textureKey: "blocks7",
|
|
id: "block7",
|
|
},
|
|
{
|
|
x: displayW / 2+100,
|
|
y: window.innerHeight - 120,
|
|
textureKey: "blocks8",
|
|
id: "block8",
|
|
},
|
|
];
|
|
// console.log('test blocks',blocks[0])
|
|
let borderScale; if(isMobile){borderScale = 0.9;} else{borderScale = 1.5;}
|
|
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, targetZone.y, "border").setAlpha(0.2).setScale(borderScale);
|
|
targetZoneBorders.push(targetBorder);
|
|
targetZone.block = null;
|
|
}),
|
|
blocks.forEach((block, index) => {
|
|
console.log(index+1)
|
|
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
|
|
// 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).setDepth(-2);
|
|
let droppedOnTargetZone = false;
|
|
|
|
targetZones.forEach((targetZone, targetIndex) => {
|
|
if (
|
|
Phaser.Geom.Intersects.RectangleToRectangle(
|
|
newBlock.getBounds(),
|
|
new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
|
|
)
|
|
) {
|
|
// Set the position based on target zone index
|
|
const col = counter % 2;
|
|
const row = Math.floor(counter / 4);
|
|
|
|
// Adjust the x and y coordinates accordingly
|
|
newBlock.setPosition(targetZone.x + col * (newBlock.width + 10), targetZone.y + row * (newBlock.height + 10));
|
|
|
|
newBlock.disableInteractive();
|
|
targetZone.block = newBlock;
|
|
droppedBlocks.push(newBlock);
|
|
|
|
// Adjust isMatch function based on your requirements
|
|
if (isMatch(newBlock.texture.key, targetZone.name)) {
|
|
// Handle match logic if needed
|
|
}
|
|
droppedOnTargetZone = true;
|
|
targetZoneBorders[targetIndex].setVisible(true);
|
|
targetZoneBorders[targetIndex].setAlpha(1);
|
|
counter++;
|
|
|
|
return;
|
|
}
|
|
});
|
|
|
|
if (!droppedOnTargetZone) {
|
|
newBlock.setPosition(newBlock.input.dragStartX, newBlock.input.dragStartY);
|
|
}
|
|
|
|
// Check if all blocks have been dropped on target zones
|
|
if (droppedBlocks.length === targetZones.length) {
|
|
displayResult(droppedBlocks);
|
|
}
|
|
});
|
|
});
|
|
retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
|
|
retryButton.setInteractive().on('pointerdown', () => {
|
|
window.location.reload();
|
|
})
|
|
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) => {
|
|
droppedBlocks.forEach((block) => {
|
|
const targetZone = targetZones.find((zone) => zone.name === block.texture.key);
|
|
});
|
|
};
|
|
|
|
</script>
|
|
<style href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet" >
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
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%;
|
|
}
|
|
#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;
|
|
}
|
|
</style> |