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

work on tracing game

Dev 1 2023-09-05 16:24:27 +05:30
parent 4314342c42
commit d77bbfe8ca
3 changed files with 114 additions and 95 deletions
Show Stats 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>

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

@ -89,22 +89,16 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.style.top = '10%';
colorContainer.style.left = '20px';
colorContainer.style.display = 'flex'; // Display color picker and buttons horizontally
// Create the color picker
const colorPicker = document.createElement('input');
colorPicker.type = 'color';
colorPicker.value = selectedColor;
colorPicker.className = 'color-picker';
colorPicker.style.marginTop = '-0px';
colorPicker.style.marginRight = '15px';
colorPicker.style.padding = '1px 1px';
colorPicker.style.outline = 'none';
colorPicker.style.width = '46px';
colorPicker.style.height = '46px';
colorPicker.style.border = '3px solid #05b3a4';
colorPicker.style.backgroundColor = '#05b3a4';
colorPicker.style.borderRadius = '50%';
colorPicker.style.boxShadow = '5px 10px 30px #7c4c2390';
colorPicker.style.marginTop = '-5px';
colorPicker.style.marginRight = '5px';
colorPicker.style.width = '45px';
colorPicker.style.height = '48px';
colorPicker.addEventListener('input', (event) => {
if (!isErasing) {
@ -116,8 +110,8 @@ import Layout from '../../layouts/Layout.astro';
colorContainer.appendChild(colorPicker);
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const buttonSize = 50;
const buttonSpacing = 15;
const buttonSize = 40;
const buttonSpacing = 10;
// Create a container div for the color buttons
const colorButtonsContainer = document.createElement('div');
@ -136,15 +130,13 @@ import Layout from '../../layouts/Layout.astro';
button.style.backgroundColor = color;
button.style.width = `${buttonSize}px`;
button.style.height = `${buttonSize}px`;
button.style.border = '3px solid #05b3a4';
button.style.boxShadow = '5px 10px 30px #7c4c2390';
button.style.borderRadius = '50%'
button.style.border = 'none';
button.style.marginRight = `${buttonSpacing}px`;
button.addEventListener('click', () => {
// Remove the mark from the previously selected button, if any
if (selectedButton) {
// Remove the border
selectedButton.style.border = 'none'; // Remove the border
}
// Set the new selected color
selectedColor = color;
@ -168,24 +160,21 @@ import Layout from '../../layouts/Layout.astro';
// Create a container div for both buttons
const buttonsContainer = document.createElement('div');
buttonsContainer.style.position = 'absolute';
buttonsContainer.style.left = '20px';
buttonsContainer.style.top = '17%';
// buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
buttonsContainer.style.top = '15%';
buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
document.body.appendChild(buttonsContainer);
// Create the Clear button
const clearButton = document.createElement('button');
clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
clearButton.style.border = '3px solid blue';
// clearButton.textContent = 'Clear';
clearButton.style.color = 'blue';
// clearButton.style.color = 'white';
clearButton.style.marginRight = '10px';
clearButton.style.padding = '5px 10px';
clearButton.style.fontSize = '16px';
clearButton.style.fontWeight = 'bold';
clearButton.style.borderRadius = '50%';
clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
clearButton.style.boxShadow = '5px 20px 30px #7c4c2390';
clearButton.addEventListener('click', () => {
clearDrawing();
});
@ -195,9 +184,7 @@ import Layout from '../../layouts/Layout.astro';
// eraserButton.textContent = 'Eraser';
eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
eraserButton.style.color = '#7c4c23';
eraserButton.style.border = '3px solid #7c4c23';
// eraserButton.style.color = 'white';
eraserButton.style.marginRight = '15px';
eraserButton.style.padding = '5px 5px';
eraserButton.style.fontSize = '16px';
eraserButton.style.fontWeight = 'bold';
@ -232,7 +219,6 @@ import Layout from '../../layouts/Layout.astro';
slider.max = '80';
slider.value = brushSize.toString();
slider.className = 'slider';
// slider.style.width = `${window.innerWidth / 2}px`;
slider.addEventListener('input', (event) => {
brushSize = parseInt(event.target.value);

167
src/pages/tracing/index.astro
View File

@ -10,80 +10,113 @@ import Layout from '../../layouts/Layout.astro';
</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 config = {
width: 800,
height: 600,
scene: {
create: create,
update: update
}
};
const colors = {
hexColors: {
white: 0xffffff,
red: 0xff0000,
yellow: 0xffff00,
blue: 0x0000ff,
green: 0x00ff00
}
};
const { white, red, yellow, blue, green } = colors.hexColors;
const { Vector2 } = Phaser.Math;
const SPEED = 0.0005; // Adjust the speed as needed
const pathPosition = new Vector2();
const pathTangent = new Vector2();
const distanceToPointer = new Vector2();
const pathProjection = new Vector2();
var game = new Phaser.Game(config);
let t = 0.75;
let path;
let graphics;
let sprite;
var letter;
var lastX;
var lastY;
var graphics;
var isTracing = false;
function create() {
path = new Phaser.Curves.Path(50, 500);
path.splineTo([164, 446, 274, 542, 412, 457, 522, 541, 664, 464]);
// path.lineTo(700, 300);
// path.lineTo(600, 350);
path.ellipseTo(200, 100, 100, 250, false, 0);
path.cubicBezierTo(222, 119, 308, 107, 208, 368);
path.ellipseTo(60, 60, 0, 360, true);
function preload() {
this.load.image('letter', '/assets/A.png');
}
sprite = this.add.circle(0, 0, 16, red, 0.5);
path.getPoint(t, pathPosition);
sprite.copyPosition(pathPosition);
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);
}
graphics = this.add.graphics();
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);
}
this.input.on("pointerdown", startTracing);
this.input.on("pointermove", continueTracing);
this.input.on("pointerup", stopTracing);
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();
}
// this.add.text(300, 150, '👆 Press to move the ball', { font: 'large system-ui' });
}
function update() {
const { activePointer } = this.input;
path.getPoint(t, pathPosition);
path.getTangent(t, pathTangent);
distanceToPointer.set(activePointer.worldX, activePointer.worldY).subtract(pathPosition);
const scalarProjection = distanceToPointer.dot(pathTangent);
pathProjection.copy(pathTangent).scale(scalarProjection);
sprite.copyPosition(pathPosition);
graphics.clear();
graphics.lineStyle(5, red);
path.draw(graphics);
draw(distanceToPointer, sprite, green);
draw(pathProjection, sprite, yellow);
if (activePointer.isDown) {
t += scalarProjection * SPEED;
}
}
function draw(vector, start, color) {
graphics
.lineStyle(10, color)
.lineBetween(
start.x,
start.y,
start.x + vector.x,
start.y + vector.y
);
}
function startTracing(pointer) {
// Implement logic to start tracing
// For example, set up a tracing path or drawing context
// You can also add your logic to determine if the tracing is correct
}
function continueTracing(pointer) {
// Implement logic to continue tracing
// For example, draw the tracing path or update the drawing context
}
function stopTracing() {
// Implement logic to stop tracing
// For example, check if the tracing matches a predefined letter shape
}
// document.getElementById("version").textContent = "Phaser v" + Phaser.VERSION;
const game = new Phaser.Game(config);
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>