Building a Web Game

Using JavaScript, HTML, and CSS

by Sarah Vessels

What game are we building?

  • Blicblock from The Sims 4
  • Like Tetris meets Bejeweled
  • Falling blocks in different colors
  • Match blocks to make them disappear and score points
  • Blocks fall faster as you score more points
Blicblock in The Sims 4

My Sim playing Blicblock

What are we writing?

represent blocks, game board
move blocks, score points, show game info
style blocks and game board

How do you get started?

  • Identify things in the game, e.g., blocks, a score
  • Figure out how to make stuff happen, e.g., drop blocks automatically, increase speed
  • Decide how you will make it look like a real game, e.g., images and/or CSS

Represent Things

  • Need to display things on the page, like the current score
  • Let the user do stuff, like move blocks left and right
  • Things need to interact, e.g., when the user makes a match, increment the score and remove the blocks
  • Display things with HTML elements, styled with CSS and added dynamically to the page with JavaScript

Represent a Block

  • Use an HTML <div> tag
  • Add some CSS classes to it to style its position and color
  • Blocks on a game board : points on a positive, 2D graph
  • Use JavaScript to change its class when it moves,
    e.g., replace pos-0-0 with pos-0-1

JavaScript Makes it Dynamic

  • For example:
    • It's easy to make a page using just HTML that has five blocks on it
    • JavaScript lets us have an unknown number of blocks
  • With JavaScript, say things like:
    • "every second, add a new block to the page"
    • "if the user makes a match, remove those blocks"
    • "if the user presses ←, move block to the left"

CSS Makes It Pretty

Web page with stylesheets disabled

BlicblockJS without CSS

Web page with stylesheets enabled

BlicblockJS with CSS

Use JavaScript Functions

Write a function to:

  • Encapsulate some code and give it a name
  • Call that same chunk of code multiple times, just by calling its name
  • e.g., drop_block()
  • Easier to read a function name and understand than to see several lines of code

JavaScript Lets Us Interact

  • setInterval - run a function every so often,
    e.g., drop_block()
  • Bind a function to user actions like keypress,
    e.g., run move_left() when the user presses ←
  • Remember things about the user, such as their personal high score, using localStorage

Overview of BlicblockJS

  • game_loop() function drops blocks, removes matches, increments score
  • JavaScript inserts more HTML into the page to represent new blocks
  • setInterval runs game_loop() every few milliseconds
  • JavaScript listens for user to press keys: move blocks, drop current falling block, pause/resume game
  • Functions handle side effects of user doing stuff

Some Sample Bugs

Forgot to check if any block was beside falling block when user tried to move
Could keep piling falling block over top of existing blocks—looked like a single block

To plummet a block, was changing vertical position from 0 to 5, for example, all at once
Blocks immediately disappeared, didn't get to watch last block fall into place

More Sample Bugs

Forgot to ignore user keypresses when game was paused
User could keep moving blocks around while paused

Neglected to check how far away a placed block was compared to the falling block
Hit ← or → once, falling block would zoom all the way to the far side


  • Define what objects your game is made of
  • Represent those objects using HTML
  • Use JavaScript to add and remove HTML, get user input, and manipulate things on the page
  • Use JavaScript functions to make your code more readable
  • Make it look good with CSS