Lesson 2: Colors & Shapes

In Minecraft, the player character is made from simple square shapes. Today we'll learn about variables and functions, and use them to draw our very own pixel-art character! 🧑‍🎨

Variables: Giving Names to Things

A variable is like a labeled box where you store information. You give the box a name, and put something inside it. Later, you can use the name to get that thing back.

// Create a variable called "playerX" and store the number 100 in it
let playerX = 100;

// Create a variable called "playerY" and store 200 in it
let playerY = 200;

// Create a variable that won't change — use "const"
const groundLevel = 300;

📦 let vs const

let — Creates a variable that can change later (like a player's position)
const — Creates a variable that stays the same forever (like the canvas size)

Think of let like a whiteboard — you can erase and rewrite. Think of const like a carved stone — once it's set, it stays!

Using Variables to Position Things

Instead of typing numbers directly into fillRect(), we can use variables. This makes it easy to move things around — just change the variable!

let playerX = 100;
let playerY = 150;
const playerWidth = 30;
const playerHeight = 60;

// Draw using variables instead of raw numbers
ctx.fillStyle = '#4a8';
ctx.fillRect(playerX, playerY, playerWidth, playerHeight);

Functions: Reusable Instructions

A function is a set of instructions that you give a name to. Once you define a function, you can call it (run it) whenever you want, as many times as you want!

// Define a function called "drawBlock"
function drawBlock(x, y, color) {
  ctx.fillStyle = color;
  ctx.fillRect(x, y, 32, 32);
}

// Now call it to draw blocks at different positions!
drawBlock(0, 0, '#5cb85c');      // Green block at top-left
drawBlock(32, 0, '#8b6914');     // Brown block next to it
drawBlock(64, 0, '#808080');     // Gray block next to that

🔧 Parts of a Function

function — The keyword that says "I'm creating a function"
drawBlock — The name you give it (you pick this!)
(x, y, color) — Parameters — inputs the function needs to do its job
{ ... } — The curly braces contain the instructions to run

Drawing a Character

Now let's combine everything we've learned to draw a character! Our character is built entirely from rectangles — just like pixel art:

function drawPlayer(x, y) {
  // Head (skin color)
  ctx.fillStyle = '#c8a882';
  ctx.fillRect(x + 4, y, 16, 16);

  // Eyes
  ctx.fillStyle = '#fff';
  ctx.fillRect(x + 8, y + 5, 4, 4);
  ctx.fillRect(x + 14, y + 5, 4, 4);
  ctx.fillStyle = '#222';
  ctx.fillRect(x + 10, y + 6, 2, 3);
  ctx.fillRect(x + 16, y + 6, 2, 3);

  // Hair
  ctx.fillStyle = '#4a2a0a';
  ctx.fillRect(x + 3, y, 18, 5);

  // Body (green shirt)
  ctx.fillStyle = '#44aa88';
  ctx.fillRect(x + 2, y + 18, 20, 18);

  // Legs (blue pants)
  ctx.fillStyle = '#1a3a8a';
  ctx.fillRect(x + 3, y + 36, 8, 20);
  ctx.fillRect(x + 13, y + 36, 8, 20);
}

Let's see what this looks like:

Our game character — built entirely from rectangles!

Drawing Blocks

In Minecraft, everything is made of blocks. Each block type has its own color. Let's create a function that draws different kinds of blocks:

function drawBlock(x, y, type) {
  const size = 32;

  if (type === 'grass') {
    ctx.fillStyle = '#4a8f29';      // Main green
    ctx.fillRect(x, y, size, size);
    ctx.fillStyle = '#5cb338';      // Lighter top
    ctx.fillRect(x, y, size, 6);
  }
  else if (type === 'dirt') {
    ctx.fillStyle = '#8b6914';
    ctx.fillRect(x, y, size, size);
  }
  else if (type === 'stone') {
    ctx.fillStyle = '#808080';
    ctx.fillRect(x, y, size, size);
  }

  // Add a subtle outline
  ctx.strokeStyle = 'rgba(0,0,0,0.2)';
  ctx.strokeRect(x, y, size, size);
}

🔀 if / else if — Making Decisions

The if statement lets your code make decisions. It checks if something is true, and runs different code depending on the answer.

=== means "is equal to" (we use three equals signs to check!)
if — "If this is true, do this..."
else if — "Otherwise, if THIS is true, do this instead..."

Different block types — grass, dirt, and stone — plus our character!

Putting It All Together

Here's the complete code for this lesson. Try saving it as an HTML file and opening it!

<!DOCTYPE html>
<html>
<head><title>My Character</title></head>
<body style="background: #222; margin: 0;">
  <canvas id="game" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');

    function drawBlock(x, y, type) {
      const size = 32;
      if (type === 'grass') {
        ctx.fillStyle = '#4a8f29';
        ctx.fillRect(x, y, size, size);
        ctx.fillStyle = '#5cb338';
        ctx.fillRect(x, y, size, 6);
      } else if (type === 'dirt') {
        ctx.fillStyle = '#8b6914';
        ctx.fillRect(x, y, size, size);
      } else if (type === 'stone') {
        ctx.fillStyle = '#808080';
        ctx.fillRect(x, y, size, size);
      }
      ctx.strokeStyle = 'rgba(0,0,0,0.2)';
      ctx.strokeRect(x, y, size, size);
    }

    function drawPlayer(x, y) {
      ctx.fillStyle = '#c8a882';
      ctx.fillRect(x + 4, y, 16, 16);
      ctx.fillStyle = '#fff';
      ctx.fillRect(x + 8, y + 5, 4, 4);
      ctx.fillRect(x + 14, y + 5, 4, 4);
      ctx.fillStyle = '#222';
      ctx.fillRect(x + 10, y + 6, 2, 3);
      ctx.fillRect(x + 16, y + 6, 2, 3);
      ctx.fillStyle = '#4a2a0a';
      ctx.fillRect(x + 3, y, 18, 5);
      ctx.fillStyle = '#44aa88';
      ctx.fillRect(x + 2, y + 18, 20, 18);
      ctx.fillStyle = '#1a3a8a';
      ctx.fillRect(x + 3, y + 36, 8, 20);
      ctx.fillRect(x + 13, y + 36, 8, 20);
    }

    // Sky
    ctx.fillStyle = '#87ceeb';
    ctx.fillRect(0, 0, 600, 400);

    // Draw ground blocks
    for (let x = 0; x < 600; x += 32) {
      drawBlock(x, 288, 'grass');
      drawBlock(x, 320, 'dirt');
      drawBlock(x, 352, 'dirt');
      drawBlock(x, 384, 'stone');
    }

    // Draw the player standing on the ground
    drawPlayer(284, 232);
  </script>
</body>
</html>

🏆 Challenges — Try These!

Add a new block type called 'sand' with the color '#dccc6e'
Give your character arms (small rectangles on the sides of the body)
Change the shirt color — try making it red or purple!
Draw a second character at a different position — try drawPlayer(100, 232)
Can you add a "wood" block type with brown color for a tree trunk?

📝 What We Learned

Variables store values we can use and change (let and const)
Functions are reusable sets of instructions
Parameters let us pass different values into functions
if/else if lets code make decisions
We can build complex drawings from simple rectangles!

← Lesson 1: Hello, Canvas! 📚 All Lessons Lesson 3: Animation →

130 Widgets