55 lines
1.3 KiB
Plaintext
55 lines
1.3 KiB
Plaintext
---
|
|
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>
|
|
// Define the sprite sheet properties
|
|
const frameWidth = 32; // Adjust based on your sprite sheet
|
|
const frameHeight = 32; // Adjust based on your sprite sheet
|
|
const numFrames = 8; // Adjust based on the number of frames in your sprite sheet
|
|
const frameRate = 10; // Adjust the speed of the animation
|
|
|
|
// Preload function to load assets
|
|
function preload() {
|
|
this.load.spritesheet('playerWalk', '/assets/beanieImage.png', {
|
|
frameWidth: frameWidth,
|
|
frameHeight: frameHeight
|
|
});
|
|
}
|
|
|
|
// Create function to set up the game
|
|
function create() {
|
|
// Create an animation using the loaded sprite sheet
|
|
this.anims.create({
|
|
key: 'walk',
|
|
frames: this.anims.generateFrameNumbers('playerWalk', { start: 0, end: numFrames }),
|
|
frameRate: frameRate,
|
|
repeat: -1
|
|
});
|
|
|
|
// Create a sprite and play the animation
|
|
const player = this.add.sprite(100, 100, 'playerWalk');
|
|
player.play('walk');
|
|
}
|
|
|
|
// Load the Phaser game
|
|
const config = {
|
|
type: Phaser.AUTO,
|
|
width: 800,
|
|
height: 600,
|
|
scene: {
|
|
preload,
|
|
create
|
|
}
|
|
};
|
|
|
|
const game = new Phaser.Game(config);
|
|
|
|
|
|
</script> |