Lesson 12: The Complete Game!

You've learned every building block (pun intended! 😄). Now let's see how they all come together in the final game, plus a few bonus features: a day/night cycle, crafting, and a health system! 🎮🏆

Bonus Feature: Day/Night Cycle

The sky changes color over time, creating a day/night cycle! We use a simple timer that cycles through sunrise → day → sunset → night:

let gameTime = 30000;  // Start at noon

function getTimeOfDay() {
  const cycle = 120000;  // Full cycle = 2 minutes
  return (gameTime % cycle) / cycle;  // Returns 0.0 to 1.0
}

function getSkyColor(time) {
  if (time < 0.2)  return lerpColor('#0a0a2e', '#87ceeb', time / 0.2);   // Dawn
  if (time < 0.5)  return '#87ceeb';                                      // Day
  if (time < 0.7)  return lerpColor('#87ceeb', '#0a0a2e', (time-0.5)/0.2);// Dusk
  return '#0a0a2e';                                                        // Night
}

// Darken the screen at night
function getDarkness(time) {
  if (time < 0.2) return 1 - time / 0.2;   // Getting lighter (dawn)
  if (time < 0.5) return 0;                 // Full daylight
  if (time < 0.7) return (time - 0.5) / 0.2; // Getting darker (dusk)
  return 1;                                  // Full darkness
}

Bonus Feature: Crafting

Crafting turns raw materials into new items. Each recipe lists inputs and outputs:

const RECIPES = [
  // 1 wood → 4 planks
  { input: { WOOD: 1 }, output: { block: PLANKS, count: 4 } },

  // 4 planks → 1 crafting table
  { input: { PLANKS: 4 }, output: { block: CRAFTING_TABLE, count: 1 } },

  // 1 cobblestone + 1 coal → 4 torches
  { input: { COBBLESTONE: 1, COAL: 1 }, output: { block: TORCH, count: 4 } },
];

function canCraft(recipe) {
  // Check if player has all required inputs
  return Object.entries(recipe.input).every(([blockType, needed]) => {
    const total = inventory.reduce((sum, slot) =>
      sum + (slot && slot.block === blockType ? slot.count : 0), 0);
    return total >= needed;
  });
}

Bonus Feature: Health System

const player = {
  health: 20,       // 10 hearts (each heart = 2 HP)
  maxHealth: 20,
  // ...other properties
};

// Fall damage — if falling speed is too high when landing
if (player.vy > 10) {
  player.health -= Math.floor((player.vy - 10) * 2);
}

// Passive healing (small random chance each frame)
if (player.health < player.maxHealth && Math.random() < 0.003) {
  player.health++;
}

// Respawn when health reaches 0
if (player.health <= 0) {
  player.health = player.maxHealth;
  // Teleport back to spawn point
}

How Everything Fits Together

Here's the complete architecture of our game — every system you built!

What You Can Add Next

The game is complete, but there's always more you can add! Here are some ideas:

Resources to Keep Learning