change folder name
This commit is contained in:
@@ -1,65 +0,0 @@
|
||||
<main>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
|
||||
</main>
|
||||
<script is:inline>
|
||||
var config = {
|
||||
type: Phaser.AUTO,
|
||||
width: window.innerWidth,
|
||||
height: window.innerHeight,
|
||||
backgroundColor : 0xffffff,
|
||||
scene: {
|
||||
preload: preload,
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
var graphics;
|
||||
var isDragging = false;
|
||||
var image;
|
||||
|
||||
var game = new Phaser.Game(config);
|
||||
|
||||
function preload() {
|
||||
// Load the image asset
|
||||
this.load.image('image', '/assets/A.png');
|
||||
}
|
||||
function create() {
|
||||
graphics = this.add.graphics();
|
||||
// Set line style for the dragging line
|
||||
graphics.lineStyle(60, 0x5e17eb); // Blue color, 20px width
|
||||
|
||||
// Add the image to the scene
|
||||
image = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'image');
|
||||
image.setInteractive();
|
||||
|
||||
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;
|
||||
|
||||
// Bring the graphics to the front
|
||||
this.children.bringToTop(graphics);
|
||||
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(pointer.x, pointer.y);
|
||||
}
|
||||
}, this);
|
||||
|
||||
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>
|
||||
@@ -1,85 +0,0 @@
|
||||
---
|
||||
import Layout from '../../layouts/Layout.astro';
|
||||
---
|
||||
<Layout title='Drawing Game'>
|
||||
<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 = {
|
||||
type: Phaser.AUTO,
|
||||
width: 800,
|
||||
height: 600,
|
||||
scene: {
|
||||
create: create,
|
||||
update: update
|
||||
}
|
||||
};
|
||||
|
||||
var graphics;
|
||||
var isDragging = false;
|
||||
var pathPoints = [
|
||||
{ x: 100, y: 100 },
|
||||
{ x: 200, y: 100 },
|
||||
{ x: 150, y: 200 }
|
||||
];
|
||||
|
||||
var drawnPoints = [];
|
||||
|
||||
var game = new Phaser.Game(config);
|
||||
|
||||
function create() {
|
||||
graphics = this.add.graphics();
|
||||
|
||||
// Draw the predefined path filled with white color
|
||||
graphics.fillStyle(0xffffff); // White color
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(pathPoints[0].x, pathPoints[0].y);
|
||||
|
||||
for (var i = 1; i < pathPoints.length; i++) {
|
||||
graphics.lineTo(pathPoints[i].x, pathPoints[i].y);
|
||||
}
|
||||
|
||||
graphics.closePath();
|
||||
graphics.fillPath();
|
||||
|
||||
// Add input events to detect dragging
|
||||
this.input.on('pointerdown', function (pointer) {
|
||||
isDragging = true;
|
||||
drawnPoints = [];
|
||||
drawnPoints.push({ x: pointer.x, y: pointer.y });
|
||||
});
|
||||
|
||||
this.input.on('pointermove', function (pointer) {
|
||||
if (isDragging) {
|
||||
drawnPoints.push({ x: pointer.x, y: pointer.y });
|
||||
}
|
||||
});
|
||||
|
||||
this.input.on('pointerup', function () {
|
||||
isDragging = false;
|
||||
});
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Continuously update the filled area while dragging
|
||||
if (isDragging) {
|
||||
graphics.fillStyle(0xff0000); // Red color
|
||||
graphics.beginPath();
|
||||
graphics.moveTo(drawnPoints[0].x, drawnPoints[0].y);
|
||||
|
||||
for (var i = 1; i < drawnPoints.length; i++) {
|
||||
graphics.lineTo(drawnPoints[i].x, drawnPoints[i].y);
|
||||
}
|
||||
|
||||
graphics.closePath();
|
||||
graphics.fillPath();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user