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

full updated

pull/5/head
Dev 1 2023-09-16 20:51:26 +05:30
parent 5ac894fc92
commit 8c88aea0a9
3 changed files with 110 additions and 100 deletions
Show Stats 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);

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

@ -291,9 +291,7 @@ import Layout from '../../layouts/Layout.astro';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
// slider.style.width = `${window.innerWidth / 2}px`;
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);
slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
@ -323,8 +321,8 @@ import Layout from '../../layouts/Layout.astro';
// Disable the default cursor
this.input.setDefaultCursor('none');
const borderThickness = 2;
const borderColor = 0x000000; // Black color (you can customize this)
const borderThickness = 0;
const borderColor = 0xffffff; // Black color (you can customize this)
const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor);
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
@ -349,8 +347,8 @@ import Layout from '../../layouts/Layout.astro';
// captureSnapshot(this);
// });
}
function captureSnapshot(game) {
game.renderer.snapshot((image) => {
function captureSnapshot(drawingZone) {
drawingZone.renderer.snapshot((image) => {
image.style.width = '160px';
image.style.height = '120px';
image.style.paddingLeft = '2px';
@ -435,7 +433,7 @@ import Layout from '../../layouts/Layout.astro';
// },
// };
// const game = new Phaser.Game(config);
// const drawingZone = new Phaser.Game(config);
// const displayW = window.innerWidth;
// const displayH = window.innerHeight;

26
src/pages/tick/varient1.astro
View File

@ -82,72 +82,72 @@
// // console.log('Checked Values:', checkedValues);
// });
function checkResult(id){
console.log(gameData.a1)
// console.log(gameData.a1)
// alert("Matched")
if(id == 'image1'){
if(gameData.a1 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
console.log('Value True')
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
console.log('Value False')
// console.log('Value False')
}
};
if(id == 'image2'){
if(gameData.a2 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
console.log('Value True')
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
console.log('Value False')
// console.log('Value False')
}
};
if(id == 'image3'){
if(gameData.a3 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
console.log('Value True')
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
console.log('Value False')
// console.log('Value False')
}
};
if(id == 'image4'){
if(gameData.a4 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
console.log('Value True')
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
console.log('Value False')
// console.log('Value False')
}
};
if(id == 'image5'){
if(gameData.a5 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
console.log('Value True')
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
console.log('Value False')
// console.log('Value False')
}
};
if(id == 'image6'){
if(gameData.a6 == true){
var element = document.getElementById(id);
element.classList.add("greenBorder");
console.log('Value True')
// console.log('Value True')
} else{
var element = document.getElementById(id);
element.classList.add("redBorder");
console.log('Value False')
// console.log('Value False')
}
}