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

work n new tracing game

pull/5/head
Dev 1 2023-09-23 17:27:47 +05:30
parent 8c88aea0a9
commit e492d23d70
5 changed files with 265 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -339,13 +339,13 @@ import Layout from '../../layouts/Layout.astro';
graphics.strokePath();
}
};
// // Add a "Save Snapshot" button
// snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons');
// // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
// snapshotButton.setInteractive();
// snapshotButton.on('pointerdown', () => {
// captureSnapshot(this);
// });
// Add a "Save Snapshot" button
snapshotButton = this.add.image(window.innerWidth / 20, window.innerHeight / 2.3, 'buttonIcons');
// snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', () => {
captureSnapshot(this);
});
}
function captureSnapshot(drawingZone) {
drawingZone.renderer.snapshot((image) => {
@ -357,7 +357,7 @@ import Layout from '../../layouts/Layout.astro';
// Download the snapshot as an image
const link = document.createElement('a');
link.href = image.src;
link.download = 'snapshot.png';
link.download = 'my_drawing.png';
link.click();
document.body.removeChild(image);

2
src/pages/tick/varient1.astro → src/pages/tick/v1.astro
View File

@ -46,7 +46,7 @@
<script is:inline>
const params = new URLSearchParams(window.location.search);
const paramsID = params.get('id');
fetch(`https://management.beanstalkedu.com/items/game_tick6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
.then(res => res.json())
.then(data => {
gameData = data.data;

26
src/pages/tick/varient2.astro → src/pages/tick/v2.astro
View File

@ -11,9 +11,11 @@
<form id="contactForm">
<div id="" class="flex flex-row place-content-between">
<div class="flex flex-col gap-6 place-items-center">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
<!-- <img id="image1" src="" alt="" draggable="false" class="select-none" /> -->
<input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
<label for="a1" class="round-checkbox-label"></label>
<label for="a1" class="round-checkbox-label">
<img id="image1" src="" alt="" draggable="false" class="select-none" />
</label>
<img id="image2" src="" alt="" draggable="false" class="select-none" />
<input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
@ -223,7 +225,7 @@
border-radius: 10%;
}
#image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
width: 200px;
width: 150px;
/* border: 4px solid red;
border-radius: 5%; */
}
@ -232,29 +234,29 @@
}
.round-checkbox-label {
display: inline-block;
width: 30px;
height: 30px;
border-radius: 10%;
background-color: #ccc;
border: 2px solid #007bff;
/* width: 30px; */
/* height: 30px; */
/* border-radius: 10%; */
/* background-color: #ccc; */
/* border: 2px solid #007bff; */
cursor: pointer;
position: relative;
transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
}
.round-checkbox-input:checked + .round-checkbox-label {
background-color: #007bff;
border-color: #007bff;
/* background-color: #007bff; */
/* border-color: #007bff; */
transform: scale(1.2);
border-radius: 30%;
}
.round-checkbox-input:checked + .round-checkbox-label::after {
content: '\2713';
/* content: '\2713'; */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 40px;
color: white;
/* color: white; */
display: block;
}
</style>

134
src/pages/tracing/tracing2.astro Normal file
View File

@ -0,0 +1,134 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
create: create,
update: update
}
};
const game = new Phaser.Game(config);
let predefinedPath;
let dragGraphics;
let isDragging = false;
function create() {
// Define the predefined path (letter 'A' in this example)
predefinedPath = new Phaser.Curves.Path(100, 300);
predefinedPath.lineTo(300, 100);
predefinedPath.lineTo(500, 300);
predefinedPath.moveTo(200, 200);
predefinedPath.lineTo(400, 200);
// Create graphics for the predefined path (letter 'A' in this example)
const graphics = this.add.graphics();
graphics.lineStyle(2, 0x00ff00); // Green color for the predefined path
predefinedPath.draw(graphics);
dragGraphics = this.add.graphics();
this.input.on('pointerdown', startDragging);
this.input.on('pointerup', stopDragging);
this.input.on('pointermove', dragWithinPath);
}
function calculateSpacedPoints(curve, spacing) {
const spacedPoints = [];
for (let t = 0; t <= 1; t += spacing) {
const point = curve.getPoint(t);
spacedPoints.push({ x: point.x, y: point.y });
}
return spacedPoints;
}
function dragWithinPath(pointer) {
if (isDragging) {
const dragX = pointer.x;
const dragY = pointer.y;
// Check if the dragged point is inside the predefined path
const isInsidePath = predefinedPath.contains(dragX, dragY);
if (isInsidePath) {
// Draw a line to represent the dragged path
dragGraphics.lineTo(dragX, dragY);
dragGraphics.strokePath();
}
}
}
function startDragging(pointer) {
if (!isDragging && predefinedPath) {
const spacing = 0.02; // Adjust this value as needed
const distanceThreshold = 10; // Adjust this value as needed
let isNearPath = false;
// Iterate through the curves of the predefined path
for (let i = 0; i < predefinedPath.curves.length; i++) {
const curve = predefinedPath.curves[i];
const spacedPoints = calculateSpacedPoints(curve, spacing);
// Check if the pointer is within a certain distance to any of the spaced points
for (let j = 0; j < spacedPoints.length; j++) {
const point = spacedPoints[j];
const distance = Phaser.Math.Distance.Between(point.x, point.y, pointer.x, pointer.y);
if (distance < distanceThreshold) {
isNearPath = true;
break;
}
}
if (isNearPath) {
break;
}
}
if (isNearPath) {
isDragging = true;
dragGraphics.clear();
dragGraphics.lineStyle(4, 0xff0000); // Red color for the dragging path
dragGraphics.beginPath();
dragGraphics.moveTo(pointer.x, pointer.y);
}
}
}
function stopDragging() {
if (isDragging) {
isDragging = false;
isDraggingInsidePath = false; // Reset the flag when dragging stops
dragGraphics.closePath();
}
}
function dragWithinPath(pointer) {
if (isDragging) {
// TODO: Fill the dragged area within the predefined path with red color
// You can add the logic to fill the dragged area within the predefined path with red color here.
// The logic will depend on how you want to fill the area.
// For simplicity, you can just draw a line as shown below:
dragGraphics.lineTo(pointer.x, pointer.y);
dragGraphics.strokePath();
}
}
function update() {
// TODO: Update any game logic if needed
}
</script>

108
src/pages/tracing/tracing3.astro Normal file
View File

@ -0,0 +1,108 @@
---
import Layout from "../../layouts/Layout.astro";
---
<Layout title="Guided Letter Tracing Game">
<main>
<div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
create: create,
update: update
}
};
const game = new Phaser.Game(config);
let predefinedPath;
let dragGraphics;
let isDragging = false;
let polygon;
function create() {
// Define the predefined path (letter 'A' in this example)
predefinedPath = new Phaser.Curves.Path(100, 300);
predefinedPath.lineTo(300, 100);
predefinedPath.lineTo(500, 300);
predefinedPath.moveTo(200, 200);
predefinedPath.lineTo(400, 200);
// Create graphics for the predefined path (letter 'A' in this example)
const graphics = this.add.graphics();
graphics.lineStyle(2, 0x00ff00); // Green color for the predefined path
predefinedPath.draw(graphics);
// Create a polygon from the predefined path points
polygon = new Phaser.Geom.Polygon(predefinedPath.curves.flatMap(curve => calculateSpacedPoints(curve, 0.02)));
dragGraphics = this.add.graphics();
this.input.on('pointerdown', startDragging);
this.input.on('pointerup', stopDragging);
this.input.on('pointermove', dragWithinPath);
}
function calculateSpacedPoints(curve, spacing) {
const spacedPoints = [];
for (let t = 0; t <= 1; t += spacing) {
const point = curve.getPoint(t);
spacedPoints.push({ x: point.x, y: point.y });
}
return spacedPoints;
}
function isInsidePath(x, y) {
const pathBounds = predefinedPath.getBounds();
return pathBounds.contains(x, y);
}
function dragWithinPath(pointer) {
if (isDragging) {
const dragX = pointer.x;
const dragY = pointer.y;
// Check if the dragged point is within the predefined path
const isInside = isInsidePath(dragX, dragY);
if (isInside) {
// Draw a line to represent the dragged path
dragGraphics.lineStyle(4, 0xff0000); // Set red color for the dragging path
dragGraphics.lineTo(dragX, dragY);
dragGraphics.strokePath();
} else {
// If dragged point is outside the predefined path, stop dragging
stopDragging();
}
}
}
function startDragging(pointer) {
if (!isDragging && predefinedPath) {
isDragging = true;
// dragGraphics.clear();
dragGraphics.lineStyle(4, 0xff0000); // Red color for the dragging path
dragGraphics.beginPath();
dragGraphics.moveTo(pointer.x, pointer.y);
}
}
function stopDragging() {
if (isDragging) {
isDragging = false;
dragGraphics.closePath();
}
}
function update() {
// TODO: Update any game logic if needed
}
</script>