Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 6.11: Project: Tic-Tac-Toe

This is the game that will be used as a project for the end of the chapter. The goal of this project is not for the creation of the game but to use the CSS layout properties to lay out the game and instructions. In my version, I am taking advantage of flex, grid, and media queries to have a game that will adjust its size and layout based on the display resolution (and orientation if applicable).

The game play is your typical hotseat tic-tac-toe game. Player X clicks on an empty tile, then Player O does the same. This continues until a horizontal, vertical, or diagonal line of the same symbol is formed in which case that player is the winner. In the case that the board is filled with no winner, we say it is the cat’s game.

The big thing here is to name your tiles in a way that it is easy to access them so you can quickly check to see if they are a winning combination.

While you are certainly welcome to create a computer opponent, this is overkill for this project and is easier to do with arrays and objects which will be covered in the next chapter.

Chapter contents

Chapter 6 Contents

6.1 Layout Cheat Sheets

This chapter's summary cheat sheet.

6.2 The Layout problem

Why layout is complicated for web pages.

6.3 Display blocks

The basic display types.

6.4 Flexible Boxes

A box that contains other components and sizes them to fit the available space.

6.5 Grid

A flexible grid where you can lay out your design.

6.6 Grid Templates

Using templates to make laying out components in a grid easy.

6.7 Multiple columns

Using the columns attributes to easily allow for multiple columns.

6.8 Floating

Having images (or other blocks) have text wrap around them.

6.9 Position

There are other ways of placing elements by using the position attribute.

6.10 Media Queries

Altering CSS based on the properties of the device the page is being rendered on.

6.11 Project: Tic-Tac-Toe

The project for this chapter.

6.12 Project Solution

Solution for this chapter's project

← previous section
Media Queries
next section →
Project Solution
Table of Contents