My Fruit Worth

Controles y juego

• Movimiento: avanza o retrocede en la dirección en la que miras y gira con las flechas Izquierda y Derecha.
• Interacción: cuando estés lo bastante cerca de una fruta, pulsa la barra espaciadora para recogerla y guardarla en tu cesta.
• Reiniciar: pulsa R para empezar de nuevo en cualquier momento.
• Gráficos: cambia entre tres estilos visuales con los botones de opción.
• Ganar: al recoger toda la fruta aparece una pantalla de victoria; pulsa R para volver a jugar.

Resumen técnico

Cada tipo de objeto del juego (house, bush, fruit) se define como un conjunto de vértices, aristas y caras construidas con esos vértices.

Las instancias de los objetos se crean con su propia posición y escala, y se proyectan con el método de la cámara estenopeica: dividiendo x e y entre z para representar la profundidad.

Niveles del pipeline gráfico

Nivel 1

1. Recorre cada instancia de objeto, saltando la fruta ya recogida.
2. Aplica la posición, la escala y la proyección de vértices a cada modelo.
3. Ordenación por profundidad: ordena de la z mayor a la menor para que la geometría más lejana de la cámara se dibuje primero y la más cercana quede encima.
4. Renderizado: dibuja las caras con HTML5 Canvas: beginPath(), recorre los vértices de la cara con moveTo() y luego closePath() y fill().

Nivel 2

1. Inicializa una cuadrícula de 320 × 200.
2. Recorre todas las instancias de objetos, saltando la fruta recogida.
3. Escala, coloca y proyecta cada vértice sobre la cuadrícula, quedándose solo con los puntos delante de la cámara.
4. Dibuja cada arista desde (u₁, v₁), avanzando píxel a píxel en x y sumando la pendiente en cada paso para colorear la línea.

Nivel 3

1. Inicializa la cuadrícula y salta la fruta recogida.
2. Coloca y escala cada instancia de objeto y guarda sus vértices proyectados.
3. Para cada objeto, recorre sus caras visibles y recorta la geometría que queda detrás de la cámara.
4. Rasterización de triángulos: busca el rectángulo que contiene los tres vértices de cada cara y comprueba cada píxel con coordenadas baricéntricas para rellenar solo los que están dentro del triángulo.

Problemas conocidos

• Detección de colisiones: las colisiones no funcionan del todo. Si caminas de frente contra la fachada de una casa te detienes, pero si te acercas en diagonal después de girar puedes atravesarla.

Mejoras futuras

• Ciclo de día y noche: un sol que se pone como temporizador del juego, oscureciendo poco a poco el cielo.
• Clima: clima y nubes dinámicos.
• Cesta en pantalla: una cesta que se va llenando a medida que recoges fruta.
• Social: una clasificación diaria.