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...
Made with Slides.com