← codeonline.io

codeonline for classrooms

Teach coding by making games — in plain English. No installs, no logins required, works on the devices you already have.

Try it now Open the tutorial Command reference 🖨 Printable cheat sheet

Why it works in a real classroom

Nothing to install

Runs in any browser — locked-down school Chromebooks, lab PCs, or student phones. It’s also an offline app (PWA) and an Android APK, so spotty Wi-Fi won’t stop a lesson.

Reads like English

move player with arrows, when player picks up any coin. The syntax wall that stops most beginners is gone — great for younger students and English-language learners.

Instant, visual feedback

Type a line, press Run, see it move. Built-in sprite, sound, and map editors mean students make something they’re proud of in one period.

Multiplayer built in

Tag, Light Cycles, Online Pong and more — two students, two phones, same room. A ready-made group activity that no other beginner tool offers out of the box.

FreeNo account to codeOffline-capablePhone + ChromebookAges ~8+

Lesson 1 — “Make your first game” (45 minutes)

Goal: every student leaves with a tiny game they wrote and can share.
You need: one device per student (or per pair), a browser, the URL codeonline.io. No setup, no accounts.

Warm-up (5 min)

Open codeonline.io on the board. Open the Light Cycles (or Tag) demo, play 30 seconds, then click into the editor and show them: it’s just English. Change one word (a color) and Run.

Build together (15 min)

Have everyone type this and press Run:

player is {x: 60, y: 60, image: "hero"}
coins is list of 6 sprites {image: "coin"}
coins are pickups
score is 0

when player picks up any coin
  increase score by 1

to update
  move player with arrows
to draw
  clear screen to dark blue
  each coin in coins
    draw sprite "coin" at coin.x, coin.y
  draw sprite player at player.x, player.y
  write "score {score}" at 2, 2 in white on hud
run game with update and draw

Walk through it line by line — it reads like a description of the game. Click the screen, use the arrow keys, collect coins.

Make it yours (15 min)

Challenge cards — students pick one or more:

Share (10 min)

Each student copies their share link (or, signed in, hits 🌐 publish) and trades with a partner to play. Quick gallery walk: a few volunteers show theirs on the board.

Extension / next lessons: enemies you avoid (hostile tags), a title screen and menus, a two-player multiplayer game, scoring and high-score saving. The reference has a runnable example for every command, and the tutorial is a self-paced path students can follow independently.

Lesson 2 — Add a challenge: enemies (30 minutes)

Goal: add an enemy that chases the player, and lose a life when it catches you. Students see that “enemy AI” and collisions are one line each in fc.

The new ideas

Build on Lesson 1 (or paste this whole game):

world is {width: 128, height: 128}
player is {x: 64, y: 90, image: "hero", speed: 1.5}
coins is list of 6 sprites {image: "coin"}
coins are pickups
score is 0
lives is 3

ghost is {x: 64, y: 16, image: "slime", speed: 0.7}
ghosts is []
add ghost to ghosts
ghosts chase player
ghosts are hostile

when player picks up any coin
  increase score by 1
when player hits any ghost
  decrease lives by 1

to update
  move player with arrows
to draw
  clear screen to dark blue
  each coin in coins
    draw sprite "coin" at coin.x, coin.y
  each g in ghosts
    draw sprite "slime" at g.x, g.y
  draw sprite player at player.x, player.y
  write "score {score}  lives {lives}" at 2, 2 in white on hud
run game with update and draw

Discuss: the slime follows the player because of one English line. Ask students to make it faster (speed), add a second ghost, or end the game (if lives is at most 0 ...). Note the plain-English forms: increase/decrease ... by and comparisons like is at least, is more than read just like the design.

Lesson 3 — A title screen & sharing (20 minutes)

Goal: add a start menu, then share the finished game. Introduces screens (a game can have more than one).

The new ideas

mode is "title"

to screen title
  clear screen to dark blue
  write "COIN HUNT" at 34, 40 in yellow on hud
  write "tap PLAY to start" at 28, 56 in white on hud
  show button "play" at 50, 74

when button "play" is clicked
  go to play

player is {x: 64, y: 90, image: "hero", speed: 1.5}
coins is list of 6 sprites {image: "coin"}
coins are pickups
score is 0
when player picks up any coin
  increase score by 1

to update
  if mode is "play"
    move player with arrows

to screen play
  clear screen to dark green
  each coin in coins
    draw sprite "coin" at coin.x, coin.y
  draw sprite player at player.x, player.y
  write "score {score}" at 2, 2 in white on hud

run game with update and draw

Share it: click 🔗 share to copy a link that opens this exact game in anyone’s browser — or, signed in, 🌐 publish it to the community gallery. Have students trade links and play each other’s.

Privacy & safety

Want it for your school?

A classroom dashboard (rosters, progress, a private class gallery) and a full curriculum are on the roadmap. If you’d like to pilot codeonline with your class or school, get in touch: Kevin Long.

Start with your class →

codeonline.io — a free, plain-English fantasy console for learning to code by making games. Made by Kevin Long.