98-232

Game Development
on the WEb

Taught by Will Crichton

TA'd by Abhishek Chadha and Bram Wasti

who am i?

Junior
CS, Chinese
Five-year web dev
JS enthusiast

what is this?

Making 2D and 3D games
Learning HTML, CSS, JS
Exploring HTML5
Programming heavy!

course overview

Timeline: 2D before midterms, 3D after
Homework/Exams: none
Projects: a game! (willcrichton.net/stuco)
Policy:

Try not to miss class
Collaboration on project
Plagiarism

contact

Email: willcrichton@cmu.edu
Phone: 515-314-9085
FB: just search me up
Dorm: Roselawn 7

slides

slid.es/willcrichton

Let's begin!

intro to html

HTML: HyperText Markup Language

Defines the structure of a document

Browser renders HTML + CSS +JS

HTML Syntax

HTML documents are a bunch of tags.

<h2>HTML Syntax</h2>
<p class="fragment">
  HTML documents are a bunch of <strong>tags</strong>
</p>

Tags are organized as a tree

html tags

Tags are semantic and have attributes

<a href="hello.html" class="fancyLink">Click me!</a>

hello world

<!DOCTYPE html>
<html>
    <head>
        <title>Placeholder Title</title>
    </head>
    <body>
        Hello, world!
    </body>
</html>

relevant tags

div/span: organizatoin
a: anchor, or link
ul/ol + li : lists
p: paragraph
h1/.../h6 : header
img: image

code time

Make a business card!

It should include:

Name
Email
Phone number
Address
Profession
Picture

intro to css

CSS: Cascading Style Sheets
Defines everything HTML does not
Declarative language

with css...

without css...

making styles

CSS is a series of selectors and properties.

Selectors define which elements to change.

Properties define how to change them.

body {
  background: white;  font: 12px "Comic Sans";
}

#logo a {
  margin-top: 10px;
}

selectors

Selectors are patterns that match

sets of elements, defined by:

Hash tags (#) for ID, #container
Periods (.) for classes, .box
Spaces indicate parent-child, .box p

properties

Properties are stylistic attributes
of an element, such as:

font-size
color
width
background
border-radius
... and so on

cascading

body {
    font-family: "Helvetica";    color: pink;
}

p {
    font-family: "Comic Sans";}

Some styles cascade from parent to child.

Some get overridden based on specificity.

Generally, later styles > earlier styles.

layouts

Block: max width, usually containers
Inline: text, links, bold, etc.
Inline-block: inline but w/ height, e.g. images
Float: blocks take minimum width

Box model

In CSS, everything is a box. Everything.

Block/inline-block boxes have four properties:

COde time

Style your business card! It should:

have a non-white background
be in a fixed-width container
be centered on the page
have a border around it
have something special (be creative!)