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

c

pull/5/head
Dev 1 2023-09-04 20:57:36 +05:30
parent d0e133459d
commit 3e0f99aa93
7 changed files with 89 additions and 232 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
course.txt
View File

@ -1,13 +0,0 @@
Main Headingd;
*Add "or Pre-Primary school";
Our Courses:
Computer Course,
Vocational Course,
ITI Course,
Pre-Primary Franchises,
Heritage English Medium School
Mordern Heritage Academy,
StarLight Academy,

BIN
public/assets/A.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 70 KiB

97
src/pages/drawing-game.astro
View File

@ -1,97 +0,0 @@
---
import Layout from '../layouts/Layout.astro';
---
<Layout title='Drawing Game'>
<main>
<div>
<p>Drawing Game</p>
<div id="game-container"></div>
</div>
<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
</main>
</Layout>
<script is:inline>
// Create a new Phaser game
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config);
// Declare global variables
var graphics;
var lastPointer;
var color = 0xff0000;
var thickness = 5;
// Load assets
function preload() {
// Preload any assets you need for the game, such as images or sounds
}
// Create the game world
function create() {
// Create the graphics object
graphics = this.add.graphics();
// Set up the input events for the game
this.input.on('pointerdown', function(pointer) {
lastPointer = pointer;
});
this.input.on('pointermove', function(pointer) {
if (lastPointer) {
graphics.lineStyle(thickness, color);
graphics.beginPath();
graphics.moveTo(lastPointer.x, lastPointer.y);
graphics.lineTo(pointer.x, pointer.y);
graphics.strokePath();
lastPointer = pointer;
}
});
this.input.on('pointerup', function(pointer) {
lastPointer = null;
});
// Set up the UI for the game
var colorPicker = this.add.rectangle(50, 50, 40, 40, color);
colorPicker.setInteractive();
colorPicker.on('pointerdown', function() {
// Open a color picker dialog to select a color
var input = document.createElement('input');
input.type = 'color';
input.oninput = function() {
color = Phaser.Display.Color.ValueToColor(input.value).color;
colorPicker.fillColor = color;
};
input.click();
});
var thicknessText = this.add.text(150, 50, 'Thickness: ' + thickness, { font: '24px Arial', fill: '#ffffff' });
var increaseButton = this.add.text(150, 100, '+', { font: '24px Arial', fill: '#ffffff' });
increaseButton.setInteractive();
increaseButton.on('pointerdown', function() {
thickness++;
thicknessText.setText('Thickness: ' + thickness);
});
var decreaseButton = this.add.text(200, 100, '-', { font: '24px Arial', fill: '#ffffff' });
decreaseButton.setInteractive();
decreaseButton.on('pointerdown', function() {
if (thickness > 1) {
thickness--;
thicknessText.setText('Thickness: ' + thickness);
}
});
}
// Update the game world
function update() {
// Update any game logic or animations here
}
</script>

82
src/pages/drawing/temp.astro
View File

@ -1,82 +0,0 @@
<script is:inline>
function create() {
// Adjust the positions and sizes of elements based on screen size
const screenWidth = game.scale.width;
const screenHeight = game.scale.height;
if (screenWidth <= 768) {
// Adjust elements for mobile screens
// You can modify these values as needed
// Example: Move a button to the top-right corner
button.x = screenWidth - button.width;
button.y = 0;
} else {
// Adjust elements for larger screens
// Example: Move a button to the bottom-right corner
button.x = screenWidth - button.width;
button.y = screenHeight - button.height;
}
// ... other element adjustments ...
}
</script>
<!-- <script is:inline>
const isMobile = window.innerWidth <= 768; // You can adjust the breakpoint as needed
const drawingZone = {
x: isMobile ? 0 : window.innerWidth / 4,
y: isMobile ? 0 : window.innerHeight / 4,
width: isMobile ? window.innerWidth : window.innerWidth / 2,
height: isMobile ? window.innerHeight : window.innerHeight / 2,
};
// ...
function create() {
// ...
// Position UI elements based on screen size
const colorPickerX = isMobile ? 10 : 20;
const colorPickerY = isMobile ? 10 : '10%';
colorPicker.style.position = 'absolute';
colorPicker.style.top = colorPickerY;
colorPicker.style.left = `${colorPickerX}px`;
const sliderContainerX = isMobile ? 10 : '5%';
const sliderContainerY = isMobile ? 10 : '10%';
sliderContainer.style.position = 'absolute';
sliderContainer.style.top = sliderContainerY;
sliderContainer.style.left = sliderContainerX;
const clearButtonX = isMobile ? 10 : '5%';
const clearButtonY = isMobile ? 20 : '20%';
clearButton.style.position = 'absolute';
clearButton.style.top = clearButtonY;
clearButton.style.left = clearButtonX;
const eraserButtonX = isMobile ? 10 : '5%';
const eraserButtonY = isMobile ? 14 : '14%';
eraserButton.style.position = 'absolute';
eraserButton.style.top = eraserButtonY;
eraserButton.style.left = eraserButtonX;
// ...
// Adjust cursor size based on screen size
const cursorSizeMultiplier = isMobile ? 0.5 : 1;
// ...
// Adjust the borderGraphics position and size
borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
// ...
}
</script>
-->

40
src/pages/tick/temp.astro
View File

@ -1,40 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Array</title>
</head>
<body>
<input type="checkbox" class="myCheckbox" value="Value 1"> Checkbox 1
<input type="checkbox" class="myCheckbox" value="Value 2"> Checkbox 2
<input type="checkbox" class="myCheckbox" value="Value 3"> Checkbox 3
<input type="checkbox" class="myCheckbox" value="Value 4"> Checkbox 4
<input type="checkbox" class="myCheckbox" value="Value 5"> Checkbox 5
<input type="checkbox" class="myCheckbox" value="Value 6"> Checkbox 6
<button id="saveButton">Save</button>
<script>
// Get a reference to the "Save" button
const saveButton = document.getElementById('saveButton');
// Add a click event listener to the "Save" button
saveButton.addEventListener('click', function() {
// Get all checkboxes with the class "myCheckbox"
const checkboxes = document.querySelectorAll('.myCheckbox');
// Create an array to store the values of checked checkboxes
const checkedValues = [];
// Loop through the checkboxes and check if they are checked
checkboxes.forEach(function(checkbox) {
if (checkbox.checked) {
// If checked, push the value to the array
checkedValues.push(checkbox.value);
}
});
// Log the array of checked values
console.log('Checked Values:', checkedValues);
});
</script>
</body>
</html>

89
src/pages/tracing/index.astro Normal file
View File

@ -0,0 +1,89 @@
---
import Layout from '../../layouts/Layout.astro';
---
<Layout title='Tracing 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: window.innerWidth,
height: window.innerHeight,
backgroundColor: '#ffffff',
parent: 'game-container',
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
var letter;
var lastX;
var lastY;
var graphics;
var isTracing = false;
function preload() {
this.load.image('letter', '/assets/A.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);
}
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);
}
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();
}
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>

0
src/pages/tracing/temp.astro Normal file
View File