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?

HTML:
represent blocks, game board
JavaScript:
move blocks, score points, show game info
CSS:
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

Description:
Forgot to check if any block was beside falling block when user tried to move
Result:
Could keep piling falling block over top of existing blocks—looked like a single block
Description:
To plummet a block, was changing vertical position from 0 to 5, for example, all at once
Result:
Blocks immediately disappeared, didn't get to watch last block fall into place

More Sample Bugs

Description:
Forgot to ignore user keypresses when game was paused
Result:
User could keep moving blocks around while paused
Description:
Neglected to check how far away a placed block was compared to the falling block
Result:
Hit ← or → once, falling block would zoom all the way to the far side

Summary

  • 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

Links

Questions?