98-232

Game Development

(on the Web!)

Taught by Will Crichton

TA'd by James Yang

WHO AM I?

Sophomore
CS, Chinese
Four-year web dev
JS enthusiast
Debater

I'M 12 and what is this?

We'll learn to make 2D and 3D games in the browser.
We'll use fancy HTML5 technologies (Canvas, WebGL).

There will be a lot of programming.

If you are actually 12 or cannot program, please leave.

COURSE OVERVIEW

Timeline: 2D before midterm, 3D after
Homework: same as midterm and final!
Projects: design a (very) basic game
Content: mostly coding, some theory
Policy notes:

2 absences max
Collaboration on projects
Plagiarism

Contact

I have free time occasionally!

Email: willcrichton@cmu.edu
Phone: 515-314-9085
GChat: willpc1545
Dorm: Roselawn 7

LET'S BEGIN!

Intro to HTML

adapted from Kosbie's 15-237 slides

HTML: HyperText Markup Language

Defines the structure (not look!) of a document

Server gives HTML, browser displays

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 -- they define what's inside

Tags have attributes for more specificity

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

Try to avoid inline anything!

<a href="#" style="text-decoration: underline; color: white;" onclick="return prompt('are you sure?');">Click me</a>

A BAsic document

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

Link

That's it!

We don't need much more HTML for this class.

<a>: anchor for links
<div>: generic block wrapper
<span>: generic inline wrapper
<script>: because, y'know, JavaScript

There's cool HTML5 stuff, too, but don't worry about that.

INTRO TO CSS

Now we can structure a document,

but how does it look pretty?

cASCADING STYLE SHEETs

Style: how the document looks

Cascading: styles piles on

CSS is a series of ~~tubes~~ rules.

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

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

CSS SELECTORs

Selectors are patterns, like regex.

Patterns are defined by:

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

Styles can be complicated.

#container > h2 + div.column form:last-child input[type="text]

selector samples

header .column a

div#container

div.box a.link

PSEUDO-SLIDE

CSS selectors can have pseudo-classes.

These capture element states/positions.

a { 
    color: white; 
}

a:hover {
    color: red;
}

div:last-child {
    margin-right: 0;
}

CSS properties

Declarations are key-value pairs (properties)

under a selector.

There are 50+ in regular CSS...

And double that in CSS3.

p {
    font-size: 24px;    
    color: white;
    background: #2222;
}

common properties

Properties can set:

position: absolute/relative/fixed
background
color
fonts
margin/padding
width/height

And more recently:

Border radius
Box shadows
3D transformations... whoah

The cascade

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

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

What if that?

Some styles cascade from parent to children.

Some get overridden based on specificity.

Generally, later styles > earlier styles.

what happenS?

body {
    background: blue;
    font: 14px Arial;
    color: green;
}

div {
   width: 50px;
   color: white;
   text-align: justify;
}

p {
    padding: 5px;
    font-family: 'Comic Sans', cursive;
}

WHERE DOES MY CSS GO?

CSS can be put in a few places.

Bad inline:

<p style="color: green;">Text!</p>

More ok inline (still not good):

<style>
            p { 
                color: green; 
            }
        </style>

In a separate file (best!):

<link href="styles.css" rel="stylesheet" type="text/css" />

Layouts

Block: take whole width, usually containers

Inline: inline with text/other inline elements

Inline-block: inline with text but block properties

Float: blocks take minimum width

BOX MODEL

In CSS, everything is a box. Everything.

These boxes have four properties:

aside: css frameworks

Smart people have made cool frameworks

for easy CSS. Notably, Bootstrap!

Includes styles for:

Basic grid layout
Nav menus
Buttons
Typography
....

THAT'S IT!

Like HTML, you won't need too much CSS.

If you do have problems,

most of your needs can be filled by Google.

http://bit.ly/1vTezE

But wait!

there's more...

Week 1

By Will Crichton