2D Pixel Art Game Asset Testing Environment

I'm developing a 2D pixel-art side-scroller game using Phaser 3. I need a simple but reliable asset testing environment to validate my game assets before building more complex functionality.

Current Assets:

• Background: level1.PNG (winter scene with a stone path/bridge)
• Character: Three separate PNG files for a walk cycle animation:
  • traveller-walk1.png (walking frame 1)
  • traveller-neutral.png (standing)
  • traveller-walk1.png (walking frame 2)

Requirements:

1. Create a single HTML file that includes all necessary JavaScript and CSS
2. Load the background image and position it centered in the game window
3. Load the three character frames as separate images (NOT as a spritesheet)
4. Implement basic controls:
   • Left/right arrow keys for movement
   • Up arrow key for jumping
5. Create a platform that aligns with the stone path in the background
6. Configure proper physics:
   • Character should stand correctly on the platform
   • Physics body should align with character's feet
   • Character should not fall through the platform

Important Implementation Notes:

1. AVOID SPRITESHEET APPROACH - Load the character frames as separate images to avoid frame calculation issues
2. USE FIXED-SIZE PHYSICS BODY - Create a small rectangular physics body (40-50px wide, 20-30px tall) positioned at the bottom of the character sprite
3. SIMPLE ANIMATION IMPLEMENTATION - Use a time-based approach to cycle between character frames during movement
4. ENABLE PHYSICS DEBUGGING - Show collision boxes to verify alignment
5. MAINTAIN PIXEL-PERFECT RENDERING - Use the appropriate CSS to maintain crisp pixel art

Current Issues to Avoid:

• Previous attempts had problems with spritesheet frame calculations