diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro index 48d8bf0..20f2335 100644 --- a/src/pages/drag/index.astro +++ b/src/pages/drag/index.astro @@ -1,9 +1,11 @@ --- import Layout from '../../layouts/Layout.astro'; -const data = await fetch('https://management.beanstalkedu.com/items/game_drag'); -const dataJson = await data.json(); -const description = dataJson.data[2].description; -console.log(description) +// const data = await fetch('https://management.beanstalkedu.com/items/game_drag'); +// const dataJson = await data.json(); +// const description = dataJson.data[2].description; +// console.log(description) +// const search = Astro.url.searchParams.get('search')! || ''; +// console.log("ID Search",search) ---
@@ -11,7 +13,7 @@ console.log(description)
- +
@@ -92,15 +94,13 @@ const blockMatches = [ ]; // console.log(blockMatches.blockName, blockMatches.targetName) 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)}`) .then(response => response.json()) .then(({data}) => { - // console.log("finding:: data",data) + // console.log(data) const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data - assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1 + "?width=100"; assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2 + "?width=100"; assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3 + "?width=100"; @@ -114,13 +114,11 @@ const params = new URLSearchParams(window.location.search); type: Phaser.AUTO, width: window.innerWidth, height: window.innerHeight, - parent: "phaser-example", scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_HORIZONTALLY, - }, - + }, scene: MyGame, }; const game = new Phaser.Game(config); @@ -242,21 +240,21 @@ class MyGame extends Phaser.Scene { const displayH = window.innerHeight; this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); - this.add.image(displayW * 0.82, 160, "target1"), - this.add.image(displayW * 0.82, 160, "border").setAlpha(0.4).setScale(0.7), - this.add.image(displayW * 0.82, 340, "target2"), - this.add.image(displayW * 0.82, 340, "border").setAlpha(0.4).setScale(0.7), - this.add.image(displayW * 0.82, 540, "target3"), - this.add.image(displayW * 0.82, 540, "border").setAlpha(0.4).setScale(0.7), - this.add.image(displayW * 0.82, 730, "target4"), - this.add.image(displayW * 0.82, 730, "border").setAlpha(0.4).setScale(0.7); -{ - this.group = this.add.group(); - Phaser.Math.Distance.Squared; - this.group.createMultiple({ key: 'target4'}); - this.group.createMultiple({ key: 'target4',}); - Phaser.Actions.SetXY(this.group.getChildren(), displayW * 0.82, 100, 100); -} + this.add.image(displayW * 0.9-32, 160, "target1"), + this.add.image(displayW * 0.9-32, 160, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-32, 340, "target2"), + this.add.image(displayW * 0.9-32, 340, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-32, 540, "target3"), + this.add.image(displayW * 0.9-32, 540, "border").setAlpha(0.4).setScale(0.7), + this.add.image(displayW * 0.9-32, 730, "target4"), + this.add.image(displayW * 0.9-32, 730, "border").setAlpha(0.4).setScale(0.7); +// { +// this.group = this.add.group(); +// Phaser.Math.Distance.Squared; +// this.group.createMultiple({ key: 'target4'}); +// this.group.createMultiple({ key: 'target4',}); +// Phaser.Actions.SetXY(this.group.getChildren(), displayW * 0.82, 100, 100); +// } @@ -294,7 +292,7 @@ class MyGame extends Phaser.Scene { targetZones.forEach((targetZone) => { const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0); - const targetBorder = this.add.image(targetZone.x = displayW * 1-210, targetZone.y, "border").setAlpha(0.2).setScale(0.7); + const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.7); targetZoneBorders.push(targetBorder); targetZone.block = null; }), @@ -302,9 +300,9 @@ class MyGame extends Phaser.Scene { blocks.forEach((block, index) => { 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.1); + newBlock.setScale(1.3); newBlock.x = dragX; newBlock.y = dragY; }); @@ -393,12 +391,23 @@ const displayResult = (droppedBlocks) => { // finalDom.classList.add("result"); }; let score = 0; +counter = 0; const isMatch = (blockName, targetName) => { +// if(isMatch){ +// counter++; +// if(counter === 4){ +// const overlap = document.getElementById("overlap"); +// overlap.style.display = "block"; +// console.log("Done") +// } + +// } + const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName); - console.log(match) + // console.log(match) if(match){ score++; - console.log("Score:", score) + // console.log("Score:", score) } // if(match){ // score++;