some changes in tracing game
parent
9fe5ba18a5
commit
ae955c0229
|
|
@ -0,0 +1 @@
|
|||
<svg width="20px" height="20px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M494.4 273.6L752 531.2c6.4 6.4 17.6 7.2 24 0.8 28.8-26.4 106.4-97.6 216-196.8-33.6-62.4-76.8-120.8-128.8-172.8-52.8-52.8-111.2-96-172.8-128.8-100 109.6-171.2 187.2-196.8 216-7.2 6.4-6.4 16.8 0.8 24z" fill="#938993"></path><path d="M764.8 544.8c-7.2 0-13.6-2.4-18.4-8L488.8 279.2c-10.4-9.6-10.4-25.6-1.6-35.2 26.4-28.8 97.6-106.4 196.8-216 2.4-2.4 6.4-3.2 9.6-1.6 64 34.4 123.2 78.4 174.4 130.4 52 52 96 110.4 130.4 175.2 1.6 3.2 0.8 7.2-1.6 9.6C888 440.8 810.4 512 781.6 538.4c-4.8 4-10.4 6.4-16.8 6.4zM692 43.2C594.4 150.4 524.8 226.4 499.2 254.4c-3.2 4-3.2 9.6 0.8 13.6l257.6 257.6c2.4 2.4 4.8 3.2 7.2 3.2 2.4 0 4-0.8 6.4-2.4 28-25.6 104-95.2 211.2-192.8-33.6-60.8-75.2-116.8-124.8-165.6C808 118.4 752.8 76.8 692 43.2z" fill="#6A576D"></path><path d="M726.4 506.4l-207.2-208-286.4 223.2c-25.6 20-45.6 46.4-56.8 76.8l-143.2 368c-2.4 5.6-1.6 15.2 3.2 19.2l260.8-258.4c-16-20.8-20-55.2-0.8-74.4 20.8-20.8 55.2-20.8 76 0 20.8 20.8 20.8 55.2 0 76-19.2 19.2-54.4 14.4-76-1.6L36 985.6c4.8 4.8 16 5.6 20 4l364-136c31.2-11.2 58.4-31.2 78.4-57.6l228-289.6z" fill="#F1ED7B"></path><path d="M519.2 298.4l-71.2 56 223.2 222.4 55.2-70.4z" fill="#0E1115"></path><path d="M50.4 998.4c-4 0-14.4-0.8-20-7.2-8-7.2-7.2-20.8-4.8-28l143.2-368c12-31.2 32.8-59.2 59.2-80l286.4-223.2c3.2-2.4 8-2.4 10.4 0.8l207.2 207.2c3.2 3.2 3.2 7.2 0.8 10.4l-227.2 290.4c-21.6 27.2-49.6 48-82.4 60l-364 136c-3.2 1.6-6.4 1.6-8.8 1.6z m247.2-260.8L50.4 982.4h3.2l364-136c29.6-11.2 55.2-30.4 75.2-55.2l223.2-284.8-197.6-196.8-280 218.4c-24.8 19.2-43.2 44-54.4 73.6l-143.2 368v0.8l245.6-244c-14.4-23.2-16.8-58.4 4-79.2 12-12 27.2-18.4 44-18.4s32 6.4 44 18.4 18.4 27.2 18.4 44-6.4 32-18.4 44c-9.6 9.6-23.2 15.2-39.2 15.2-14.4-0.8-29.6-4.8-41.6-12.8z m4.8-16c10.4 7.2 24 12 36.8 12 8 0 19.2-1.6 28-10.4s13.6-20 13.6-32.8c0-12-4.8-24-13.6-32.8-8.8-8.8-20-13.6-32.8-13.6-12 0-24 4.8-32.8 13.6-16 16.8-12.8 46.4 0.8 64z" fill="#6A576D"></path></g></svg>
|
||||
|
After Width: | Height: | Size: 2.2 KiB |
|
|
@ -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>
|
||||
</Layout>
|
||||
<script is:inline>
|
||||
var config = {
|
||||
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 = {}
|
||||
|
||||
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: '#ffffff',
|
||||
parent: 'game-container',
|
||||
backgroundColor: '#05b3a4',
|
||||
scale: {
|
||||
mode: Phaser.Scale.FIT,
|
||||
autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
|
||||
},
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create
|
||||
}
|
||||
create: create,
|
||||
update: update,
|
||||
},
|
||||
};
|
||||
|
||||
var game = new Phaser.Game(config);
|
||||
|
||||
var letter;
|
||||
var lastX;
|
||||
var lastY;
|
||||
const game = new Phaser.Game(config);
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error fetching initial data:', error);
|
||||
});
|
||||
var graphics;
|
||||
var isTracing = false;
|
||||
var isDragging = false;
|
||||
var image;
|
||||
const customWidth = window.innerWidth;
|
||||
const customHeight = window.innerHeight;
|
||||
|
||||
function preload() {
|
||||
this.load.image('letter', '/assets/A.png');
|
||||
// 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() {
|
||||
// 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);
|
||||
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 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);
|
||||
if(!isMobile){
|
||||
graphics.lineStyle(50, 0x5e17eb);
|
||||
} else {
|
||||
graphics.lineStyle(25, 0x5e17eb);
|
||||
}
|
||||
this.add.image(customWidth / 2 * 1.6 - 0.5, 50 , 'topLogo');
|
||||
|
||||
function endTracing() {
|
||||
// Set tracing flag to false
|
||||
isTracing = false;
|
||||
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;
|
||||
|
||||
// Clear graphics object
|
||||
graphics.clear();
|
||||
// Bring the graphics to the front
|
||||
this.children.bringToTop(graphics);
|
||||
|
||||
// Reset tint of letter sprite to indicate tracing has ended
|
||||
letter.clearTint();
|
||||
}
|
||||
|
||||
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.moveTo(pointer.x, pointer.y);
|
||||
}
|
||||
}, this);
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (isDragging) {
|
||||
graphics.lineTo(pointer.x, pointer.y);
|
||||
graphics.strokePath();
|
||||
lastX = this.input.activePointer.x;
|
||||
lastY = this.input.activePointer.y;
|
||||
}
|
||||
}, this);
|
||||
this.input.on('pointerup', function () {
|
||||
isDragging = false;
|
||||
graphics.closePath();
|
||||
}, this);
|
||||
}
|
||||
|
||||
function update() {}
|
||||
|
||||
</script>
|
||||
<style>
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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> -->
|
||||
Loading…
Reference in New Issue