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> </main>
</Layout> </Layout>
<script is:inline> <script is:inline>
const targetZones = [ const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
{ const drawingZone = {
x: 0, x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
y: 170, y: window.innerHeight / 4,
name: "target1", width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
block: null, height: window.innerHeight / 2,
}, };
{ const targetZones = [
x: 0, {
y: 340, x: 0,
name: "target2", y: 170,
block: null, name: "target1",
}, block: null,
{ },
x: 0, {
y: 510, x: 0,
name: "target3", y: 340,
block: null, name: "target2",
}, block: null,
{ },
x: 0, {
y: 680, x: 0,
name: "target4", y: 510,
block: null, name: "target3",
}, block: null,
]; },
const blockMatches = [ {
{ x: 0,
blockName: "blocks1", y: 680,
targetName: "target1", name: "target4",
}, block: null,
{ },
blockName: "blocks2", ];
targetName: "target2", const blockMatches = [
}, {
{ blockName: "blocks1",
blockName: "blocks3", targetName: "target1",
targetName: "target3", },
}, {
{ blockName: "blocks2",
blockName: "blocks4", targetName: "target2",
targetName: "target4", },
}, {
]; blockName: "blocks3",
// console.log(blockMatches.blockName, blockMatches.targetName) targetName: "target3",
var assetsList = {} },
const params = new URLSearchParams(window.location.search); {
const paramsID = params.get('id'); blockName: "blocks4",
const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`) targetName: "target4",
.then(response => response.json()) },
.then(({data}) => { ];
const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data; // console.log(blockMatches.blockName, blockMatches.targetName)
assetsList.left_image1 = "https://management.beanstalkedu.com/assets/" + left_image1 + "?width=100"; var assetsList = {}
assetsList.left_image2 = "https://management.beanstalkedu.com/assets/" + left_image2 + "?width=100"; const params = new URLSearchParams(window.location.search);
assetsList.left_image3 = "https://management.beanstalkedu.com/assets/" + left_image3 + "?width=100"; const paramsID = params.get('id');
assetsList.left_image4 = "https://management.beanstalkedu.com/assets/" + left_image4 + "?width=100"; const data = fetch(`https://management.beanstalkedu.com/items/game_drag/${encodeURIComponent(paramsID)}`)
assetsList.right_image1 = "https://management.beanstalkedu.com/assets/" + right_image1 + "?width=100"; .then(response => response.json())
assetsList.right_image2 = "https://management.beanstalkedu.com/assets/" + right_image2 + "?width=100"; .then(({data}) => {
assetsList.right_image3 = "https://management.beanstalkedu.com/assets/" + right_image3 + "?width=100"; const {left_image1, left_image2, left_image3, left_image4, right_image1, right_image2, right_image3, right_image4} = data;
assetsList.right_image4 = "https://management.beanstalkedu.com/assets/" + right_image4 + "?width=100"; if(isMobile){
const config = { imageCustomWidth = "?width=100";
type: Phaser.AUTO, } else{
width: window.innerWidth, imageCustomWidth = "?width=100";
height: window.innerHeight, }
backgroundColor: '#ffffff', const assetsURL = "https://management.beanstalkedu.com/assets/"
parent: "phaser-example", assetsList.left_image1 = assetsURL + left_image1 + imageCustomWidth;
scale: { assetsList.left_image2 = assetsURL + left_image2 + imageCustomWidth;
mode: Phaser.Scale.FIT, assetsList.left_image3 = assetsURL + left_image3 + imageCustomWidth;
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY, assetsList.left_image4 = assetsURL + left_image4 + imageCustomWidth;
}, assetsList.right_image1 = assetsURL + right_image1 + imageCustomWidth;
scene: MyGame, assetsList.right_image2 = assetsURL + right_image2 + imageCustomWidth;
}; assetsList.right_image3 = assetsURL + right_image3 + imageCustomWidth;
const game = new Phaser.Game(config); assetsList.right_image4 = assetsURL + right_image4 + imageCustomWidth;
const config = {
}) type: Phaser.AUTO,
.catch(error => { 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 { class MyGame extends Phaser.Scene {
constructor() { constructor() {
super(); super();
@ -200,7 +213,6 @@ class MyGame extends Phaser.Scene {
// 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("target1", assetsList.right_image1,{ this.load.spritesheet("target1", assetsList.right_image1,{
frameWidth: 100, frameWidth: 100,
frameHeight: 100, frameHeight: 100,
@ -270,7 +282,6 @@ class MyGame extends Phaser.Scene {
console.error('Error fetching initial data:', error); console.error('Error fetching initial data:', error);
}); });
const displayW = window.innerWidth; const displayW = window.innerWidth;
const displayH = window.innerHeight;
// this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4); // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
this.add.image(displayW / 6, 30, "topMatch").setScale(); this.add.image(displayW / 6, 30, "topMatch").setScale();
this.add.image(displayW * 0.80-5, 30, "topLogo").setScale(); this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
@ -316,6 +327,7 @@ class MyGame extends Phaser.Scene {
targetZoneBorders.push(targetBorder); targetZoneBorders.push(targetBorder);
targetZone.block = null; targetZone.block = null;
}), }),
blocks.forEach((block, index) => { blocks.forEach((block, index) => {
const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true }); 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); 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.max = '80';
slider.value = brushSize.toString(); slider.value = brushSize.toString();
slider.className = 'slider'; slider.className = 'slider';
// slider.style.width = `${window.innerWidth / 2}px`; // slider.style.width = `${window.innerWidth / 2}px`;
slider.addEventListener('input', (event) => { slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value); brushSize = parseInt(event.target.value);
slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`; slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
@ -323,8 +321,8 @@ import Layout from '../../layouts/Layout.astro';
// Disable the default cursor // Disable the default cursor
this.input.setDefaultCursor('none'); this.input.setDefaultCursor('none');
const borderThickness = 2; const borderThickness = 0;
const borderColor = 0x000000; // Black color (you can customize this) const borderColor = 0xffffff; // Black color (you can customize this)
const borderGraphics = this.add.graphics(); const borderGraphics = this.add.graphics();
borderGraphics.lineStyle(borderThickness, borderColor); borderGraphics.lineStyle(borderThickness, borderColor);
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height); borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
@ -349,8 +347,8 @@ import Layout from '../../layouts/Layout.astro';
// captureSnapshot(this); // captureSnapshot(this);
// }); // });
} }
function captureSnapshot(game) { function captureSnapshot(drawingZone) {
game.renderer.snapshot((image) => { drawingZone.renderer.snapshot((image) => {
image.style.width = '160px'; image.style.width = '160px';
image.style.height = '120px'; image.style.height = '120px';
image.style.paddingLeft = '2px'; 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 displayW = window.innerWidth;
// const displayH = window.innerHeight; // const displayH = window.innerHeight;

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

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