some changes in tracing game
This commit is contained in:
@@ -1,89 +1,129 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title='Tracing Game'>
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
|
||||
</main>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: '#ffffff',
|
||||
parent: 'game-container',
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create
|
||||
}
|
||||
};
|
||||
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,
|
||||
};
|
||||
var assetsList = {}
|
||||
|
||||
var game = new Phaser.Game(config);
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
const data = fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({data}) => {
|
||||
const {letter_img, icon_img} = data;
|
||||
assetsList.letter_img = "https://management.beanstalkedu.com/assets/" + letter_img; // + "?width=450";
|
||||
assetsList.icon_img = "https://management.beanstalkedu.com/assets/" + icon_img; // + "?width=450";
|
||||
const config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor: '#05b3a4',
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
},
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update,
|
||||
},
|
||||
};
|
||||
const game = new Phaser.Game(config);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
var graphics;
|
||||
var isDragging = false;
|
||||
var image;
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
|
||||
var letter;
|
||||
var lastX;
|
||||
var lastY;
|
||||
var graphics;
|
||||
var isTracing = false;
|
||||
function preload() {
|
||||
// Load the image asset
|
||||
this.load.image('letter_img', assetsList.letter_img);
|
||||
this.load.image('icon_img', assetsList.icon_img);
|
||||
this.load.image('topLogo', '/assets/top_logo.png');
|
||||
}
|
||||
function create() {
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const paramsID = params.get('id');
|
||||
fetch(`https://management.beanstalkedu.com/items/game_tracing/${encodeURIComponent(paramsID)}`)
|
||||
.then(response => response.json())
|
||||
.then(({ data }) => {
|
||||
// console.log({ data })
|
||||
const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
const baseFontSize = 20;
|
||||
const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
|
||||
const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
|
||||
const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
|
||||
this.add.text(customWidth / 10, 20, data.letter_text, textStyle);
|
||||
const textStyle2 = {font: 'bold 40px quicksand', fill: '#5e17eb',};
|
||||
if(!isMobile){
|
||||
image = this.add.image(customWidth / 4, customHeight / 2, 'letter_img');
|
||||
image.setInteractive().setDepth(1).setScale(0.6);
|
||||
letter_img = this.add.image(customWidth / 1.5, customHeight / 2, 'icon_img');
|
||||
letter_img.setDepth().setScale(0.6);
|
||||
this.add.text(customWidth / 1.6, customHeight / 1.25, data.icon_name, textStyle2);
|
||||
} else{
|
||||
image = this.add.image(customWidth / 2.5, customHeight / 2.5, 'letter_img');
|
||||
image.setInteractive().setDepth(1).setScale(0.3);
|
||||
letter_img = this.add.image(customWidth / 1.35, customHeight / 2 + 100 , 'icon_img');
|
||||
letter_img.setDepth().setScale(0.3);
|
||||
this.add.text(customWidth / 2, customHeight / 1.3, data.icon_name, textStyle2);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
|
||||
function preload() {
|
||||
this.load.image('letter', '/assets/A.png');
|
||||
}
|
||||
graphics = this.add.graphics();
|
||||
if(!isMobile){
|
||||
graphics.lineStyle(50, 0x5e17eb);
|
||||
} else {
|
||||
graphics.lineStyle(25, 0x5e17eb);
|
||||
}
|
||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50 , 'topLogo');
|
||||
|
||||
function create() {
|
||||
// Add letter sprite to game
|
||||
letter = this.add.sprite(window.innerWidth / 2, window.innerHeight / 2, 'letter');
|
||||
|
||||
// Set interactive property of letter sprite to true
|
||||
letter.setInteractive();
|
||||
|
||||
// Add event listeners for mouse down and up events on letter sprite
|
||||
this.input.on('pointerdown', startTracing);
|
||||
this.input.on('pointerup', endTracing);
|
||||
}
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
if (image.getBounds().contains(pointer.x, pointer.y)) {
|
||||
// Start dragging only if the pointer is over the image
|
||||
isDragging = true;
|
||||
|
||||
function startTracing(pointer) {
|
||||
// Set tracing flag to true
|
||||
isTracing = true;
|
||||
|
||||
// Set last coordinates to current pointer coordinates
|
||||
lastX = pointer.x;
|
||||
lastY = pointer.y;
|
||||
|
||||
// Set tint of letter sprite to indicate tracing has started
|
||||
letter.setTint(0xff0000);
|
||||
|
||||
// Create graphics object and set line style
|
||||
graphics = this.add.graphics();
|
||||
graphics.lineStyle(10, 0xffffff);
|
||||
}
|
||||
// Bring the graphics to the front
|
||||
this.children.bringToTop(graphics);
|
||||
|
||||
function endTracing() {
|
||||
// Set tracing flag to false
|
||||
isTracing = false;
|
||||
|
||||
// Clear graphics object
|
||||
graphics.clear();
|
||||
|
||||
// Reset tint of letter sprite to indicate tracing has ended
|
||||
letter.clearTint();
|
||||
}
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
}
|
||||
}, this);
|
||||
|
||||
function update() {
|
||||
// If tracing is in progress, draw line from last coordinates to current pointer coordinates
|
||||
if (isTracing) {
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(lastX, lastY);
|
||||
graphics.lineTo(this.input.activePointer.x, this.input.activePointer.y);
|
||||
graphics.strokePath();
|
||||
lastX = this.input.activePointer.x;
|
||||
lastY = this.input.activePointer.y;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (isDragging) {
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
}
|
||||
}, this);
|
||||
this.input.on('pointerup', function () {
|
||||
isDragging = false;
|
||||
graphics.closePath();
|
||||
}, this);
|
||||
}
|
||||
|
||||
function update() {}
|
||||
|
||||
</script>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
---
|
||||
<Layout title="">
|
||||
<main>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create
|
||||
}
|
||||
};
|
||||
|
||||
var game = new Phaser.Game(config);
|
||||
|
||||
var saveButton;
|
||||
|
||||
function preload() {
|
||||
// Preload game assets if needed
|
||||
}
|
||||
|
||||
function create() {
|
||||
// Create game objects and render your scene
|
||||
|
||||
// Create the "Save" button
|
||||
saveButton = this.add.text(700, 550, 'Save', { fontSize: '24px', fill: '#fff' });
|
||||
saveButton.setInteractive();
|
||||
saveButton.on('pointerdown', captureAndSave);
|
||||
}
|
||||
|
||||
function captureAndSave() {
|
||||
// Capture the game canvas as an image
|
||||
game.canvas.toBlob(function (blob) {
|
||||
// Convert the captured image to JPG
|
||||
var url = URL.createObjectURL(blob);
|
||||
|
||||
// Create a download link for the JPG image
|
||||
var a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "screenshot.jpg";
|
||||
a.click();
|
||||
|
||||
// Clean up the URL object
|
||||
URL.revokeObjectURL(url);
|
||||
}, "image/jpeg");
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<!-- <script is:inline>
|
||||
// Include the html2canvas library (make sure to include it in your HTML file)
|
||||
// You can download it from https://html2canvas.hertzen.com/
|
||||
|
||||
// Capture a screenshot of the entire webpage
|
||||
html2canvas(document.body).then(function(canvas) {
|
||||
// Convert the canvas to a data URL
|
||||
var screenshotDataUrl = canvas.toDataURL('image/jpeg');
|
||||
|
||||
// Create a link to download the image
|
||||
var a = document.createElement('a');
|
||||
a.href = screenshotDataUrl;
|
||||
a.download = 'screenshot.jpg';
|
||||
|
||||
// Trigger a click event to download the image
|
||||
a.click();
|
||||
});
|
||||
|
||||
</script> -->
|
||||
Reference in New Issue
Block a user