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

full updated

Browse Source
This commit is contained in:
Dev 1
2023-09-16 20:51:26 +05:30
parent 5ac894fc92
commit 8c88aea0a9
3 changed files with 110 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -50,85 +50,98 @@ import Layout from '../../layouts/Layout.astro';
</main>
</Layout>
<script is:inline>
const targetZones = [
{
x: 0,
y: 170,
name: "target1",
block: null,
},
{
x: 0,
y: 340,
name: "target2",
block: null,
},
{
x: 0,
y: 510,
name: "target3",
block: null,
},
{
x: 0,
y: 680,
name: "target4",
block: null,
},
];
const blockMatches = [
{
blockName: "blocks1",
targetName: "target1",
},
{
blockName: "blocks2",
targetName: "target2",
},
{
blockName: "blocks3",
targetName: "target3",
},
{
blockName: "blocks4",
targetName: "target4",
},
];
// 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}) => {
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";
assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4 + "?width=100";
assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1 + "?width=100";
assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2 + "?width=100";
assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3 + "?width=100";
assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4 + "?width=100";
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 => {
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,
};
const targetZones = [
{
x: 0,
y: 170,
name: "target1",
block: null,
},
{
x: 0,
y: 340,
name: "target2",
block: null,
},
{
x: 0,
y: 510,
name: "target3",
block: null,
},
{
x: 0,
y: 680,
name: "target4",
block: null,
},
];
const blockMatches = [
{
blockName: "blocks1",
targetName: "target1",
},
{
blockName: "blocks2",
targetName: "target2",
},
{
blockName: "blocks3",
targetName: "target3",
},
{
blockName: "blocks4",
targetName: "target4",
},
];
// 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}) => {
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
if(isMobile){
imageCustomWidth = "?width=100";
} else{
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;
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);
});
console.error('Error fetching initial data:', error);
});
class MyGame extends Phaser.Scene {
constructor() {
super();
@@ -200,7 +213,6 @@ class MyGame extends Phaser.Scene {
// this.load.image("target3", '/assets/mat.png');
// this.load.image("target4", '/assets/star.png');
this.load.image("border", '/assets/squar.png');
this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100,
frameHeight: 100,
@@ -270,7 +282,6 @@ class MyGame extends Phaser.Scene {
console.error('Error fetching initial data:', error);
});
const displayW = window.innerWidth;
const displayH = window.innerHeight;
// 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();
@@ -316,6 +327,7 @@ class MyGame extends Phaser.Scene {
targetZoneBorders.push(targetBorder);
targetZone.block = null;
}),
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);