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

last worked in drag v2

pull/2/head
dev sp 2023-12-30 15:30:17 +00:00
parent a0a7234ef3
commit 70bc2451d4
5 changed files with 88 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
public/assets/svg/retry.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="#0000ff" height="84px" width="84px" 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" stroke="#0000ff"><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>
Side by Side

After

Width:  |  Height:  |  Size: 765 B

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

@ -62,8 +62,8 @@ import Layout from '../../layouts/Layout.astro';
noticeHeight = 0; noticeHeight = 0;
buttonWidth = 67; buttonWidth = 67;
buttonHeight = 0; buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50; retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 70; retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth / 6; leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40; rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else { } else {
@ -79,6 +79,8 @@ import Layout from '../../layouts/Layout.astro';
let submitButton; let submitButton;
let formattedDateTime; let formattedDateTime;
let shortUniqueID; let shortUniqueID;
let allElement = element1, element2, element3, element4, element5, element6, element7, element8;
allElement.setVisible(false)
gameResult = []; gameResult = [];
window.onload = function() { window.onload = function() {
// Get the current date and time // Get the current date and time
@ -190,7 +192,7 @@ import Layout from '../../layouts/Layout.astro';
}, },
]; ];
// console.log(blockMatches.blockName, blockMatches.targetName) // console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {} var assetsList = {};
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`) const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
@ -203,14 +205,15 @@ import Layout from '../../layouts/Layout.astro';
imageCustomWidth = "?width=100"; imageCustomWidth = "?width=100";
} }
const assetsURL = "https://management.beanstalkedu.com/assets/" const assetsURL = "https://management.beanstalkedu.com/assets/"
assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth; assetsList.element1 = assetsURL + left_image1 + imageCustomWidth;
assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth; assetsList.element2 = assetsURL + left_image2 + imageCustomWidth;
assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth; assetsList.element3 = assetsURL + left_image3 + imageCustomWidth;
assetsList.left_image4 = assetsURL + left_image4 + imageCustomWidth; assetsList.element4 = assetsURL + left_image4 + imageCustomWidth;
assetsList.right_image1 = assetsURL + right_image1 + imageCustomWidth; assetsList.element5 = assetsURL + right_image1 + imageCustomWidth;
assetsList.right_image2 = assetsURL + right_image2 + imageCustomWidth; assetsList.element6 = assetsURL + right_image2 + imageCustomWidth;
assetsList.right_image3 = assetsURL + right_image3 + imageCustomWidth; assetsList.element7 = assetsURL + right_image3 + imageCustomWidth;
assetsList.right_image4 = assetsURL + right_image4 + imageCustomWidth; assetsList.element8 = assetsURL + right_image4 + imageCustomWidth;
// console.log(assetsList.left_image1)
const config = { const config = {
type: Phaser.AUTO, type: Phaser.AUTO,
width: window.innerWidth, width: window.innerWidth,
@ -295,45 +298,47 @@ import Layout from '../../layouts/Layout.astro';
this.load.image("topMatch", "/assets/top_match.jpg"); this.load.image("topMatch", "/assets/top_match.jpg");
this.load.image("topLogo", "/assets/top_logo.jpg"); this.load.image("topLogo", "/assets/top_logo.jpg");
this.load.image("tick", '/assets/tick.png'); this.load.image("tick", '/assets/tick.png');
this.load.image("retryIcon", "/assets/svg/retry.svg")
// this.load.image("bg", '/assets/bgwhite.jpg'); // this.load.image("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1); // this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png'); // this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png'); // this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png'); // this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png'); this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.right_image1,{ element1 = this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
this.load.spritesheet("blocks2", assetsList.right_image2,{ element2 = this.load.spritesheet("blocks2", assetsList.element6,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
this.load.spritesheet("blocks3", assetsList.right_image3,{ element3 = this.load.spritesheet("blocks3", assetsList.element7,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
this.load.spritesheet("blocks4", assetsList.right_image4,{ element4 =this.load.spritesheet("blocks4", assetsList.element8,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
this.load.spritesheet("blocks5", assetsList.left_image1,{ element5 = this.load.spritesheet("blocks5", assetsList.element1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
this.load.spritesheet("blocks6", assetsList.left_image2, { element6 = this.load.spritesheet("blocks6", assetsList.element2, {
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
this.load.spritesheet("blocks7", assetsList.left_image3, { element7 = this.load.spritesheet("blocks7", assetsList.element3, {
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
this.load.spritesheet("blocks8", assetsList.left_image4, { element8 = this.load.spritesheet("blocks8", assetsList.element4, {
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
}); });
} }
create() { create() {
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id'); const paramsID = params.get('id');
@ -430,49 +435,49 @@ import Layout from '../../layouts/Layout.astro';
// this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65); // this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
const blocks = [ const blocks = [
{ {
x: displayW / 15 - 15, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks1", textureKey: "blocks1",
id: "block1", id: "block1",
}, },
{ {
x: displayW / 15 - 15 + 120, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks2", textureKey: "blocks2",
id: "block2", id: "block2",
}, },
{ {
x: displayW / 15 - 15 + 240, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks3", textureKey: "blocks3",
id: "block3", id: "block3",
}, },
{ {
x: displayW / 15 - 15 + 360, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks4", textureKey: "blocks4",
id: "block4", id: "block4",
}, },
{ {
x: displayW / 15 - 15 + 480, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks5", textureKey: "blocks5",
id: "block5", id: "block5",
}, },
{ {
x: displayW / 15 - 15 + 600, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks6", textureKey: "blocks6",
id: "block6", id: "block6",
}, },
{ {
x: displayW / 15 - 15 + 720, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks7", textureKey: "blocks7",
id: "block7", id: "block7",
}, },
{ {
x: displayW / 15 - 15 + 840, x: displayW / 2,
y: window.innerHeight - 120, y: window.innerHeight - 120,
textureKey: "blocks8", textureKey: "blocks8",
id: "block8", id: "block8",
@ -489,7 +494,7 @@ import Layout from '../../layouts/Layout.astro';
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 10).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1); const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 10).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
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;
@ -530,13 +535,15 @@ import Layout from '../../layouts/Layout.astro';
displayResult(droppedBlocks); displayResult(droppedBlocks);
} }
}); });
}); });
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand', // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
fill: '#fff', // font: '600 30px Quicksand',
backgroundColor: 'blue', // fill: '#fff',
padding: { x: 20, y: 10 }, // backgroundColor: 'blue',
}) // padding: { x: 20, y: 10 },
// })
let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => { retryButton.setInteractive().on('pointerdown', () => {
window.location.reload(); window.location.reload();
}) })
@ -552,13 +559,14 @@ import Layout from '../../layouts/Layout.astro';
}; };
let score = 0; let score = 0;
let counter = 0; let counter = 0;
let bottomElement = 0;
const isMatch = (blockName, targetName) => { const isMatch = (blockName, targetName) => {
if(isMatch){ if(isMatch){
counter++; counter++;
// console.log(counter) // console.log(counter)
if(counter === 4){ if(counter === 8){
const overlap = document.getElementById("overlap"); const overlap = document.getElementById("overlap");
overlap.style.display = "block"; overlap.style.display = "block";
console.log(counter) console.log(counter)

8
src/pages/drawing/index.astro
View File

@ -106,7 +106,7 @@ import Layout from '../../layouts/Layout.astro';
this.load.image('outline', assetsList.image); this.load.image('outline', assetsList.image);
this.load.image('topLogo', '/assets/top_logo.png'); this.load.image('topLogo', '/assets/top_logo.png');
this.load.svg('buttonIcons', '/assets/svg/button-icon.svg'); this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
this.load.svg('cursorImage', '/assets/svg/pencil.svg') this.load.svg('cursorImage', '/assets/svg/pencil.svg');
} }
function create() { function create() {
@ -383,13 +383,17 @@ import Layout from '../../layouts/Layout.astro';
}); });
// Add the Clear and Eraser buttons to the container // Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton); buttonsContainer.appendChild(clearButton);
buttonsContainer.appendChild(eraserButton); // buttonsContainer.appendChild(eraserButton).setVisible;
const sliderContainer = document.createElement('div'); const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container'; sliderContainer.className = 'slider-container';
// sliderContainer.style.position = 'absolute'; // sliderContainer.style.position = 'absolute';
// sliderContainer.style.top = '25%'; // sliderContainer.style.top = '25%';
sliderContainer.style.left = '100%'; sliderContainer.style.left = '100%';
if(!isMobile){
sliderContainer.style.marginLeft = '-75px'
sliderContainer.style.marginTop = '15px'
}
// Create the slider // Create the slider
const slider = document.createElement('input'); const slider = document.createElement('input');

43
src/pages/drawing/v2.astro
View File

File diff suppressed because one or more lines are too long

18
src/pages/tick/v3.astro
View File

@ -66,15 +66,15 @@ import Layout from "../../layouts/Layout.astro";
gameData = data.data; gameData = data.data;
console.log(gameData) console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description; document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){ // if(gameData.label1){
document.getElementById("label1").innerHTML = gameData.label1; // document.getElementById("label1").innerHTML = gameData.label1;
} // }
if(gameData.label2){ // if(gameData.label2){
document.getElementById("label2").innerHTML = gameData.label2; // document.getElementById("label2").innerHTML = gameData.label2;
} // }
if(gameData.label3){ // if(gameData.label3){
document.getElementById("label3").innerHTML = gameData.label3; // document.getElementById("label3").innerHTML = gameData.label3;
} // }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea; document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea; document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;