CTEC 200 ยท Innovation and Creative Coding

Learn to Code by Hand

Five short primers in JavaScript. Each one teaches a handful of ideas you try out on the page, then ends with a game you type yourself, line by line.

  1. A steel bank-vault door, open a crack, with gold light spilling out Course image created with generative AI using OpenAI tools, with direction and curation by the course instructor. PRIMER 1

    Values and Decisions

    Variables, text and numbers, true or false, if / else. Then build Vault Cracker: a safe that picks a secret code and gives hints as the player guesses.

    • 8 concepts
    • 7-step build
    • Typed by hand
    • Saves as you go
    Start Primer 1 →
  2. A glowing runner lapping a circular track with five green checkpoints Course image created with generative AI using OpenAI tools, with direction and curation by the course instructor. PRIMER 2

    Loops

    Doing something over and over without typing it over and over. Then build Block Hopper: a platformer level where every floor, stair and coin comes from a loop.

    Start Primer 2 →
  3. A row of four metal lockers, the first one lit green and open, then an empty outlined space Course image created with generative AI using OpenAI tools, with direction and curation by the course instructor. PRIMER 3

    Lists

    Keeping many values in one place, and why the first one is number zero. Then build Beat Builder: a drum machine made of your lists, which you then play as a rhythm game.

    Start Primer 3 →
  4. A brass machine on a conveyor: two parts go in, one glowing green part comes out Course image created with generative AI using OpenAI tools, with direction and curation by the course instructor. PRIMER 4

    Functions

    Naming a piece of code, handing it values, and getting an answer back. Then build Monster Duel, where your functions are the rules of the fight.

    Start Primer 4 →
  5. A glowing orange ball bouncing across a dark floor, with a trail of fading copies Course image created with generative AI using OpenAI tools, with direction and curation by the course instructor. PRIMER 5

    Making Things Move

    Animation, keyboard input and collisions. Then write Brick Breaker, a real-time arcade game, almost entirely by hand.

    Start Primer 5 →