🛠 Project Context

We are building a 2D pixel-art side-scroller using Phaser 3. The full game will feature:

• A homepage (for introduction and start menu)
• A gameplay page (where the interactive journey happens—10 interactions)
• An about page (to explain the project and its purpose)

For now, we are starting with the first prototype to ensure basic functionality.

🎯 First Prototype Goal

The goal of the prototype is simple movement:

• Load a background image and a player character
• Implement left and right movement with the arrow keys
• Ensure the player remains on a walkable platform
• Set up the foundation to expand into more interactions later

🎨 Prototype Assets (File Names to Use)

• Background Image: level1.PNG
• Character Sprite Sheet: spritesheet-maincharacter.png

💡 Prompt for Claude

"I'm building a 2D pixel-art side-scroller using Phaser 3.

The game will feature a homepage, a gameplay section with 10 interactions, and an about page.

To start, we are developing a basic prototype with these requirements:

• Load a background image (level1.PNG).
• Display a player character with a sprite sheet (spritesheet-maincharacter.png).
• Implement left and right movement using the arrow keys.
• Ensure the player remains on a walkable platform.
• Set up a solid foundation for future expansion.

Before coding, I’d like your recommendation for a good file structure to support the full game, keeping it modular and scalable.

Please suggest an organized file structure that includes:

• A homepage
• A gameplay section with 10 interactions
• An about page
• Properly organized assets, scripts, and styles

After that, generate the necessary HTML, CSS, and JavaScript (Phaser 3) setup for the first prototype, focusing on character movement across the background."