menu options

Inspiration

As a non-coder I wanted to know how easy it would be use the platform and vibe code something

What it does

presents 3 basic games

How I built it

Senza Platform Web Game Adaptation Guide

Remote Control Mapping

For Senza platform compatibility, ensure your game uses the following key mappings:

ArrowRight: Move/Navigate Right
ArrowLeft: Move/Navigate Left
ArrowUp: Rotate/Move Up or Screen Rotation (when paused)
ArrowDown: Rotate/Move Down or Screen Rotation (when paused)
Enter: Select/OK/Action Button
Escape: Pause/Back

Example Key Event Handler

document.addEventListener('keydown', (e) => {
    switch (e.key) {
        case 'ArrowRight':
            // Handle right movement/navigation
            break;
        case 'ArrowLeft':
            // Handle left movement/navigation
            break;
        case 'ArrowUp':
            // Handle up movement or screen rotation
            break;
        case 'ArrowDown':
            // Handle down movement or screen rotation
            break;
        case 'Enter':
            // Handle selection/OK action
            break;
        case 'Escape':
            // Handle pause/back
            break;
    }
});

Screen Constraints

Canvas/Game Area

Recommended Canvas Size: 1920x1080 pixels
Maintain 16:9 aspect ratio
Use responsive design techniques to adapt to different screen sizes

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Responsive Design Considerations

Use CSS flexbox or grid for layout
Implement screen rotation support
Provide pause/rotation instructions

Screen Rotation Example

function rotateScreen() {
    const container = document.getElementById('container');
    container.classList.toggle('landscape');
    container.classList.toggle('portrait');
}

Responsive CSS

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
}

.landscape {
    flex-direction: row;
}

.portrait {
    flex-direction: column;
    transform: rotate(90deg);
}

Performance Optimization

Use requestAnimationFrame for game loops
Minimize DOM manipulations
Use canvas for complex graphics
Implement frame-independent movement

Accessibility

Provide clear on-screen instructions
Support keyboard navigation
Include pause and restart functionality

Common Pitfalls to Avoid

Don't rely on touch events
Ensure all game controls work with arrow keys
Handle screen rotation gracefully
Provide visual feedback for key presses

Testing Checklist

✓ Remote control key mapping
✓ Screen rotation
✓ Pause/Resume functionality
✓ Responsive design
✓ Performance on low-end devices

Sample Configuration Script

// Senza Platform Configuration
const SenzaConfig = {
    platform: 'Senza',
    screenSize: {
        width: 1920,
        height: 1080
    },
    inputMapping: {
        moveRight: 'ArrowRight',
        moveLeft: 'ArrowLeft',
        moveUp: 'ArrowUp',
        moveDown: 'ArrowDown',
        select: 'Enter',
        pause: 'Escape'
    },
    supportScreenRotation: true
};

Additional Resources

Challenges we ran into

remote key presses where challenging to process I had to work out my dev workflow with cache busting for the http local server Audio support in the device seems pretty rudimentary and slowed down the gameplay Gameplay locally was soo much faster than on Senza