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

guided tracing game in conditions

Browse Source
This commit is contained in:
Dev 1
2023-09-26 22:06:05 +05:30
parent e492d23d70
commit 515f350579
24 changed files with 616 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/Layout.astro
View File

@@ -33,7 +33,7 @@ const { title } = Astro.props;
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
Bitstream Vera Sans Mono, Courier New, monospace;
} */
body{
/* body{
font-family: quicksand;
animation: fadeInAnimation ease 6s;
animation-iteration-count: 1;
@@ -46,5 +46,5 @@ const { title } = Astro.props;
100% {
opacity: 1;
}
}
} */
</style>

60
src/pages/tracing/temp.astro
View File

@@ -1,49 +1,29 @@
<main>
<div>
<button onclick="useDiv()">Use Div</button>
<div id="myDiv">
This is the div to hide.
</div>
</div>
</main>
<script is:inline>
const config = {
type: Phaser.AUTO,
width: 800, // Replace with your game width
height: 600, // Replace with your game height
scene: {
preload: preload,
create: create,
update: update
}
};
let usageCount = 0;
const maxUsage = 3; // Change this to the desired limit
const game = new Phaser.Game(config);
function useDiv() {
usageCount++;
let snapshotButton;
function preload() {
// Load your game assets here
if (usageCount >= maxUsage) {
hideDiv();
}
}
function create() {
// Create your game objects and setup your scene
// Create a button to take a snapshot
snapshotButton = this.add.text(10, 10, 'Snapshot', { fontSize: '24px', fill: '#fff' });
snapshotButton.setInteractive();
snapshotButton.on('pointerdown', takeSnapshot, this);
function hideDiv() {
const divToHide = document.getElementById('myDiv');
if (divToHide) {
divToHide.style.display = 'none';
}
}
function update() {
// Update your game logic here
}
function takeSnapshot() {
// Capture a snapshot of the game canvas
game.renderer.snapshot(snapshot => {
const snapshotImage = snapshot.image;
// Create a temporary HTML anchor element for downloading
const a = document.createElement('a');
a.href = snapshotImage.src;
a.download = 'snapshot.png';
// Trigger a click event to download the snapshot
a.dispatchEvent(new MouseEvent('click'));
});
}
</script>

162
src/pages/tracing/tracing3.astro
View File

@@ -9,100 +9,126 @@ import Layout from "../../layouts/Layout.astro";
</main>
</Layout>
<script is:inline>
const isMobile = window.innerWidth <= 768;
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: window.innerHeight / 2,
};
const config = {
type: Phaser.AUTO,
width: 800,
height: 600,
width: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xffffff,
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let firstLayer, secondLayer, thirdLayer;
let graphics;
let predefinedPath;
let dragGraphics;
let isDragging = false;
let polygon;
function preload() {
this.load.svg('letterA', '/assets/letter/a.svg');
this.load.svg('layer1', '/assets/letter/a_l1.svg');
this.load.svg('layer2', '/assets/letter/a_l2.svg');
this.load.svg('layer3', '/assets/letter/a_l3.svg');
this.load.audio('letterAAudio1', '/assets/audio/hook-arround-snake.mp3');
this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
this.load.audio('slide', '/assets/audio/slide.mp3');
}
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);
const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
// 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);
this.time.delayedCall(2000, () => {
firstScreen.setVisible(false);
showLayers.call(this);
}, [], this);
}
function calculateSpacedPoints(curve, spacing) {
const spacedPoints = [];
function showLayers() {
let textX, textY;
for (let t = 0; t <= 1; t += spacing) {
const point = curve.getPoint(t);
spacedPoints.push({ x: point.x, y: point.y });
}
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
textY = isMobile ? customHeight / 5 : customHeight / 2;
const firstTextLayer = this.add.text(textX, textY, '1. Slant Left').setTint(0x05b3a4);
const slantLeftAudio = this.sound.add('slantLeft');
slantLeftAudio.play();
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive({ draggable: true });
return spacedPoints;
}
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const secondTextLayer = this.add.text(textX, textY, '2. Slant Right').setTint(0x05b3a4);
const slantRightAudio = this.sound.add('slantRight');
secondTextLayer.setVisible(false);
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive({ draggable: true });
secondLayer.setVisible(false);
function isInsidePath(x, y) {
const pathBounds = predefinedPath.getBounds();
return pathBounds.contains(x, y);
}
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
textX = isMobile ? customWidth / 3 : customWidth * 0.75;
const thirdTextLayer = this.add.text(textX, textY, '3. Slide').setTint(0x05b3a4);
const slideAudio = this.sound.add('slide');
thirdTextLayer.setVisible(false);
thirdLayer.setDepth(1.1);
thirdLayer.setScale(1.15);
thirdLayer.setAlpha(0.5);
thirdLayer.setInteractive({ draggable: true });
thirdLayer.setVisible(false);
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();
firstLayer.on('drag', (pointer) => {
if (pointer.isDown) {
firstTextLayer.setVisible(false);
secondTextLayer.setVisible(true);
slantRightAudio.play();
secondLayer.setVisible(true);
firstLayer.setAlpha(1);
secondLayer.setAlpha(0.5);
thirdLayer.setAlpha(0.5);
} else {
// If dragged point is outside the predefined path, stop dragging
stopDragging();
firstLayer.setAlpha(0.5);
}
}
}
});
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);
}
}
secondLayer.on('drag', (pointer) => {
if (pointer.isDown) {
graphics = this.add.graphics();
graphics.lineStyle(50, 0x5e17eb);
secondTextLayer.setVisible(false);
thirdTextLayer.setVisible(true);
slideAudio.play();
thirdLayer.setVisible(true);
secondLayer.setAlpha(1);
thirdLayer.setAlpha(0.5);
} else {
secondLayer.setAlpha(0.5);
}
});
function stopDragging() {
if (isDragging) {
isDragging = false;
dragGraphics.closePath();
}
thirdLayer.on('drag', (pointer) => {
if (pointer.isDown) {
thirdLayer.setAlpha(1);
} else {
thirdLayer.setAlpha(0.5);
}
});
}
function update() {
// TODO: Update any game logic if needed
// Update any game logic if needed
}
</script>

146
src/pages/tracing/tracing4.astro Normal file
View File

@@ -0,0 +1,146 @@
---
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: window.innerWidth,
height: window.innerHeight,
backgroundColor: 0xffffff,
scene: {
preload: preload,
create: create,
update: update
}
};
const game = new Phaser.Game(config);
const customWidth = window.innerWidth;
const customHeight = window.innerHeight;
let predefinedPath;
let dragGraphics;
let isDragging = false;
function preload() {
this.load.svg('layer1', '/assets/a_l1.svg');
this.load.svg('layer2', '/assets/a_l2.svg');
this.load.svg('layer3', '/assets/a_l3.svg');
}
function create() {
firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
firstLayer.setDepth(1);
firstLayer.setAlpha(0.5);
firstLayer.setInteractive();
secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
secondLayer.setDepth(1);
secondLayer.setAlpha(0.5);
secondLayer.setInteractive();
thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
thirdLayer.setDepth(1.1);
thirdLayer.setScale(1.15);
thirdLayer.setAlpha(0.5);
thirdLayer.setInteractive();
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) {
firstLayer.setAlpha(1);
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.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>