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;
buttonWidth = 67;
buttonHeight = 0;
retryButtonWidth = window.innerWidth / 2 - 50;
retryButtonHeight = window.innerHeight - 70;
retryButtonWidth = window.innerWidth / 2 - 140;
retryButtonHeight = window.innerHeight - 50;
leftTargetZoneW = window.innerWidth / 6;
rightTargetZoneW = window.innerWidth * 0.9 - 40;
} else {
@ -79,6 +79,8 @@ import Layout from '../../layouts/Layout.astro';
let submitButton;
let formattedDateTime;
let shortUniqueID;
let allElement = element1, element2, element3, element4, element5, element6, element7, element8;
allElement.setVisible(false)
gameResult = [];
window.onload = function() {
// Get the current date and time
@ -190,7 +192,7 @@ import Layout from '../../layouts/Layout.astro';
},
];
// console.log(blockMatches.blockName, blockMatches.targetName)
var assetsList = {}
var assetsList = {};
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
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";
}
const assetsURL = "https://management.beanstalkedu.com/assets/"
assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth;
assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth;
assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth;
assetsList.left_image4 = assetsURL + left_image4 + imageCustomWidth;
assetsList.right_image1 = assetsURL + right_image1 + imageCustomWidth;
assetsList.right_image2 = assetsURL + right_image2 + imageCustomWidth;
assetsList.right_image3 = assetsURL + right_image3 + imageCustomWidth;
assetsList.right_image4 = assetsURL + right_image4 + imageCustomWidth;
assetsList.element1 = assetsURL + left_image1 + imageCustomWidth;
assetsList.element2 = assetsURL + left_image2 + imageCustomWidth;
assetsList.element3 = assetsURL + left_image3 + imageCustomWidth;
assetsList.element4 = assetsURL + left_image4 + imageCustomWidth;
assetsList.element5 = assetsURL + right_image1 + imageCustomWidth;
assetsList.element6 = assetsURL + right_image2 + imageCustomWidth;
assetsList.element7 = assetsURL + right_image3 + imageCustomWidth;
assetsList.element8 = assetsURL + right_image4 + imageCustomWidth;
// console.log(assetsList.left_image1)
const config = {
type: Phaser.AUTO,
width: window.innerWidth,
@ -295,45 +298,47 @@ import Layout from '../../layouts/Layout.astro';
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("bg", '/assets/bgwhite.jpg');
// this.load.image("target1", assetsList.right_image1);
// this.load.image("target2", '/assets/hay.png');
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("blocks1", assetsList.right_image1,{
element1 = this.load.spritesheet("blocks1", assetsList.element5,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks2", assetsList.right_image2,{
element2 = this.load.spritesheet("blocks2", assetsList.element6,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks3", assetsList.right_image3,{
element3 = this.load.spritesheet("blocks3", assetsList.element7,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks4", assetsList.right_image4,{
element4 =this.load.spritesheet("blocks4", assetsList.element8,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks5", assetsList.left_image1,{
element5 = this.load.spritesheet("blocks5", assetsList.element1,{
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks6", assetsList.left_image2, {
element6 = this.load.spritesheet("blocks6", assetsList.element2, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks7", assetsList.left_image3, {
element7 = this.load.spritesheet("blocks7", assetsList.element3, {
frameWidth: 100,
frameHeight: 100,
});
this.load.spritesheet("blocks8", assetsList.left_image4, {
element8 = this.load.spritesheet("blocks8", assetsList.element4, {
frameWidth: 100,
frameHeight: 100,
});
}
create() {
const params = new URLSearchParams(window.location.search);
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);
const blocks = [
{
x: displayW / 15 - 15,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks1",
id: "block1",
},
{
x: displayW / 15 - 15 + 120,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks2",
id: "block2",
},
{
x: displayW / 15 - 15 + 240,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks3",
id: "block3",
},
{
x: displayW / 15 - 15 + 360,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks4",
id: "block4",
},
{
x: displayW / 15 - 15 + 480,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks5",
id: "block5",
},
{
x: displayW / 15 - 15 + 600,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks6",
id: "block6",
},
{
x: displayW / 15 - 15 + 720,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks7",
id: "block7",
},
{
x: displayW / 15 - 15 + 840,
x: displayW / 2,
y: window.innerHeight - 120,
textureKey: "blocks8",
id: "block8",
@ -489,7 +494,7 @@ import Layout from '../../layouts/Layout.astro';
blocks.forEach((block, index) => {
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.setScale(1.3);
newBlock.x = dragX;
@ -530,13 +535,15 @@ import Layout from '../../layouts/Layout.astro';
displayResult(droppedBlocks);
}
});
});
let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
font: '600 30px Quicksand',
fill: '#fff',
backgroundColor: 'blue',
padding: { x: 20, y: 10 },
})
});
// let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
// font: '600 30px Quicksand',
// fill: '#fff',
// backgroundColor: 'blue',
// padding: { x: 20, y: 10 },
// })
let retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
retryButton.setInteractive().on('pointerdown', () => {
window.location.reload();
})
@ -552,13 +559,14 @@ import Layout from '../../layouts/Layout.astro';
};
let score = 0;
let counter = 0;
let bottomElement = 0;
const isMatch = (blockName, targetName) => {
if(isMatch){
counter++;
// console.log(counter)
if(counter === 4){
if(counter === 8){
const overlap = document.getElementById("overlap");
overlap.style.display = "block";
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('topLogo', '/assets/top_logo.png');
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() {
@ -383,13 +383,17 @@ import Layout from '../../layouts/Layout.astro';
});
// Add the Clear and Eraser buttons to the container
buttonsContainer.appendChild(clearButton);
buttonsContainer.appendChild(eraserButton);
// buttonsContainer.appendChild(eraserButton).setVisible;
const sliderContainer = document.createElement('div');
sliderContainer.className = 'slider-container';
// sliderContainer.style.position = 'absolute';
// sliderContainer.style.top = '25%';
sliderContainer.style.left = '100%';
if(!isMobile){
sliderContainer.style.marginLeft = '-75px'
sliderContainer.style.marginTop = '15px'
}
// Create the slider
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;
console.log(gameData)
document.getElementById("gameDescription").innerHTML = gameData.description;
if(gameData.label1){
document.getElementById("label1").innerHTML = gameData.label1;
}
if(gameData.label2){
document.getElementById("label2").innerHTML = gameData.label2;
}
if(gameData.label3){
document.getElementById("label3").innerHTML = gameData.label3;
}
// if(gameData.label1){
// document.getElementById("label1").innerHTML = gameData.label1;
// }
// if(gameData.label2){
// document.getElementById("label2").innerHTML = gameData.label2;
// }
// if(gameData.label3){
// document.getElementById("label3").innerHTML = gameData.label3;
// }
document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;