HTML games programming from the ground up: Index

This is a series of posts charting my efforts to create simple browser-based games in HTML.

This index explains what I cover in each part of HTML games programming from the ground up. Select a post title to see that post. It also includes download links for the starter files for each part of the project. This makes it easier for you to review my progress at any point.

First steps

• Introduction
• Setting up a development environment
• Opening HTML files in a browser
• HTML elements
• Opening and closing tags
• The paragraph element (p)
• The heading elements (h1 to h6)
• The ordered list (ol) and unordered list elements (ul)
• The list item element (li)
• HTML attributes
• The type attribute for ordered lists
• HTML document structure
• The document type declaration
• The html element
• The head element
• The body element
• The title element
• The meta element
• The charset attribute for meta elements
• The utf-8 character set
• The lang and dir attributes for the html element

Starter files from the end of First steps: first steps

Links and images

• Hypertext
• The anchor element (a)
• Absolute and relative links
• Block-level and inline elements
• The image element (img)
• The superscript element (sup)
• The subscript element (sub)

Starter files from the end of Links and images: links and images

Style sheets

• Whether image elements (img) are block-level or inline elements
• Cascading Style Sheets (CSS)
• The link element
• CSS rules
• CSS selectors
• CSS declarations
• CSS properties
• CSS values
• Element selectors
• The font-family property
• Generic fonts
• The max-width property
• The margin property
• The auto value
• The color property
• The background-color property
• Named colours
• Hex colours
• The text-align property
• The border-radius property
• The padding property
• The text-decoration property
• Pseudo-classes
• The :hover pseudo class
• The font-weight property
• The class attribute
• Class selectors

Starter files from the end of Style sheets: style sheets

Forms and JavaScript

• HTML forms
• The form element
• The input element
• The label element
• Radio buttons
• Submit buttons
• The id attribute
• Form methods, GET and POST
• The script element
• The alert function
• Reading and analysing query strings
• Variables
• The let statement
• Strings and string concatenation
• The if statement
• Comparison expressions

Starter files from the end of Forms and JavaScript: forms and javascript

Document Object Model (DOM)

• The border CSS property
• The font-size CSS property
• CSS selectors sharing the same rule
• CSS: selecting elements with an attribute set to a particular value
• HTML comment blocks <!– –>
• The display CSS property
• The Document Object Model (DOM)
• The document object
• JavaScript objects
• Dot notation
• The document.querySelector function
• Complex decisions with if … else if … else
• The classList object
• The classList.remove function
• External js (JavaScript) files
• Event listeners and the document.addEventListener function
• The DOMContentLoaded event

Starter files from the end of Document Object Model (DOM): document object model

Modifying HTML with JavaScript

• Passing arguments to event listeners
• The innerHTML property
• Checkbox fields
• Loops
• The for loop
• Arithmetic expressions
• Ternary operators
• Iterators
• The done property of iterators
• The logical NOT (!) operator

Starter files from the end of Modifying HTML with JavaScript: modifying html with javascript

Data with JSON

• Adding classes with add
• The increment operator (++)
• The disabled property
• Hyper Text Transfer Protocol (HTTP)
• Setting up a lightweight local web server with Web Server for Chrome
• JavaScript Object Notation (JSON)
• More on objects
• Arrays
• The difference between local and global variables
• Creating variables with var
• Namespaces and naming collisions
• Asynchronous HTTP requests with fetch
• Promises
• Creating promise chains with then
• Arrow functions
• Catching errors with catch
• Chrome developer tools
• Outputting to the console with console.log and console.error
• The button element
• The div element
• The span element
• Using this
• The createAttribute function
• The setAttributeNode function
• Getting array size with length
• The createElement function
• The appendChild function

Starter files from the end of Data with JSON: data with json

Capturing user input with events

• Listening for click events
• The event object
• The target property of the event object
• The contains function
• The value of this in event listeners
• The disabled state of elements
• The logical OR operator (||)
• The logical AND operator (&&)
• Truth tables
• The break statement
• The while loop
• The firstChild property
• The removeChild function

Starter files from the end of Capturing user input with events: capturing user input with events

Quiz game – solutions to final challenges

Final files for the quiz game: html quiz game

Starting the Tic Tac Toe game

• Deferring work on the final user interface
• Flex box
• Representing a game board and pieces
• More on validating user input
• Checking for game events

Starter file from the end of Starting the Tic Tac Toe game: Starting the Tic Tac Toe game

Creating a simple AI player

• Creating a simple AI player without lookahead
• The limitations of board game AI without lookahead

Starter file from the end of Creating a simple AI player: Creating a simple AI player

Improving the AI player

• Refactoring the game using an object-oriented paradigm
• Classes in JavaScript and their restrictions
• The Minimax algorithm
• Building an improved AI with lookahead

Starter file from the end of Improving the AI player: Improving the AI player

Next part coming soon …