CSS-Tricks

Learning Canvas: Making a Snake Game

Chris Coyier — Thu, 23 Jun 2011 12:31:17 +0000

Note from the editor: The following is a guest post by Nick Morgan aka Skilldrick. I don't know much about canvas, so it's a pleasure to be able to share an article about a current web technology that is outside of my current range of knowledge.

//AN_Xml:

Of all the new elements being added in HTML5, I think canvas is one of the most exciting. Canvas gives you a fixed-size drawing surface and a selection of basic commands to draw on that surface.

//AN_Xml:

In this tutorial I'm going to show you how to make a simple snake game using canvas. You know, like you used to get on your Nokia phone.

//AN_Xml:

Making the canvas and our first rectangle

//AN_Xml:

Let's make a element, and draw something on it. In this code snippet, I've created the canvas element, set its dimensions, and
//AN_Xml:drawn a pink rectangle on it.

//AN_Xml:

The first thing to note here is that we don't call drawing methods on the canvas, but on its drawing context. Currently canvas only has one context, which we acquire by calling .getContext('2d').

//AN_Xml:

First we set the fill style of the context, which takes the form of a CSS colour, e.g. #f00 or rgba(100, 100, 100, 0.5). Then we call fillRect, which takes the coordinates of the top-left hand corner of the rectangle, its width, and its height. Notice that x/y coordinates in canvas start at the top-left hand corner of the canvas - x increases to the right and y increases downwards.

//AN_Xml:

Making a game loop

//AN_Xml:

Now, canvas wouldn't be too much fun if you couldn't make things move. The standard way to make movement in a game is with the game loop. This is a function that gets called at a fixed interval to update the state of the game and display the changes.

//AN_Xml:

I've started adding in some organisation to the code now. To keep the global scope clear, I'm only using one global variable, called JS_SNAKE. I'm then making an object called game which will hold all the game-related functions. game is an object with one public method, init, and a number of private variables and functions.

//AN_Xml:

The loop basically does three things. First, it updates the game's state (in this case adding 2 to the x position and 4 to the y). Then it updates the display, taking into account the updated state. Finally, it calls setTimeout, passing the gameLoop function and the time to wait until calling it again.

//AN_Xml:

This results in a function called every 500ms which will draw a rectangle in a different position each time. We need to call clearRect each time to clear the canvas, otherwise we'd be drawing over the previous frame each time.

//AN_Xml:

Drawing a snake

//AN_Xml:

Now comes the fun bit: drawing the snake. The snake is a collection of square blocks. Each frame we add a new head and remove the tail, thus moving the snake forward.

//AN_Xml:

The snake object has two public methods, advance and draw. advance moves the snake one square to the right, and draw actually draws the snake to the canvas.

//AN_Xml:

advance makes a copy of the head of the snake, moves it forward by 1, then adds the new head to the front of the position array and removes the tail (using unshift and pop, respectively).

//AN_Xml:

draw calls an internal function, drawSection, which takes a block position and draws a square. At the beginning of draw we save the context, and at the end restore it. Saving the context saves its previous settings, so any changes we make can be reverted. In this case, I want to change the fillStyle to #33a, but I want it to revert to whatever it was before when draw has finished.

//AN_Xml:

Moving the snake

//AN_Xml:

We now need to hook up the keyboard so we can control the snake. I'm not going to go into detail on the code, but it's fairly straightforward.

//AN_Xml:

There's a new function called in game.init() which sets the event handlers. So far, the only event we care about is keydown. If the key pressed is any of the arrow keys (keycodes 37, 38, 39 or 40), then we tell the snake to set a new direction.

//AN_Xml:

setDirection checks to see if the new direction is valid. This is to stop going back on yourself, e.g. pressing left when you're travelling right. If the new direction is valid, then it sets nextDirection to the new direction. This is then used in advance so we know where the new head position should be.

//AN_Xml:

Adding an apple

//AN_Xml:

Now the snake needs something to eat, so let's give it an apple.

//AN_Xml:

There's not much to this, except we're drawing a circle for the first time. To draw a circle in canvas, you need to start a new path, then draw a circle, and then fill the path. To start the path, call beginPath() on the context. To draw the circle call arc() on the context. arc takes 6 arguments, the x coordinate of the centre, the y coordinate, the starting angle, the finishing angle, and a boolean indicating whether to draw clockwise or not. The angle is measured in radians, and 360° is 2 * pi radians.

//AN_Xml:

Finishing it off

//AN_Xml:

Now that you know the basics you can view the source code of the final snake game and see what's
//AN_Xml:going on. It adds the technicalities of collision detection and score-keeping.

//AN_Xml:

(For those playing at home, remember to click into the canvas area so that it can capture your keyboard events. It's presented here in an iframe which cannot receive events from the outside page.)

//AN_Xml:

Advertise here with BSA

Learning Canvas: Making a Snake Game is a post from CSS-Tricks

Sprite Cow

Chris Coyier — Wed, 22 Jun 2011 03:16:07 +0000

Making a really good CSS sprite image usually isn't trivial work. There are all kinds of tools to help with it. My favorite of them has been SpriteMe. I describe my typical workflow for using that here. Sprite Cow might be my new favorite though, can't wait to try it. With it, you design your own sprite (♥) and you use the sweet Sprite cow interface to get precise CSS background positions for the different parts of it.

//AN_Xml:

Direct Link to Article — Permalink

Advertise here with BSA

Sprite Cow is a post from CSS-Tricks

WebKit CSS Reflections

Chris Coyier — Sun, 19 Jun 2011 18:41:32 +0000

Tons of examples and information from Joshua Johnson.

//AN_Xml:

Direct Link to Article — Permalink

Advertise here with BSA

WebKit CSS Reflections is a post from CSS-Tricks

Screen Resolution ≠ Browser Window

Chris Coyier — Fri, 17 Jun 2011 18:08:14 +0000

When I tweeted this and then followed up with this, I got comments like this. That comment has a perfectly valid point.

//AN_Xml:

We often talk about screen resolution, which is not the relevant statistic when thinking about what space our website's visitors have available. The relevant statistic is browser window size. So why do we talk about screen resolution so much? Well probably because in the most popular analytics software in the world, Google Analytics, it's the only data you get.

//AN_Xml:

(The Google Analytics team is aware of this)

//AN_Xml:

And so, what are we to do? Well, start measuring browser size, for one.

//AN_Xml:

But first, a word.

//AN_Xml:

What if we figured out all kinds of data about our visitors browser sizes. What is to be done with this data once we have it? If @beep has taught us anything, it's that we can and should accomodate to browsers of any shape and size.

//AN_Xml:

But still, having information is never a bad thing. Smarter men and women than me may see things I do not and think of reasonable actions to take based on this data.

//AN_Xml:

Getting the Data

//AN_Xml:

Since Google Analytics can't currently help us, we'll need to run some JavaScript on the page ourselves to get the data. jQuery makes it easy to measure sizes as well as make and Ajax call to POST the data to a script that can save it:

//AN_Xml:

$.ajax({
//AN_Xml:  type: "POST",
//AN_Xml:  url: "/savedata.php",
//AN_Xml:  data: {
//AN_Xml:    width        : $(window).width(),
//AN_Xml:    height       : $(window).height(),
//AN_Xml:    screen_width : screen.width,
//AN_Xml:    screen_height: screen.height
//AN_Xml:  }
//AN_Xml:});

//AN_Xml:

Now we just need that script savedata.php to be ready to accept and save that data. First we need a database, so here's a simple structure for one:

//AN_Xml:

I'm no MYSQL expert, but this is what exporting the structure from phpMyAdmin gave me:

//AN_Xml:

CREATE TABLE `data` (
//AN_Xml:  `id` int(11) NOT NULL auto_increment,
//AN_Xml:  `width` int(11) NOT NULL,
//AN_Xml:  `height` int(11) NOT NULL,
//AN_Xml:  `screen_width` int(11) NOT NULL,
//AN_Xml:  `screen_height` int(11) NOT NULL,
//AN_Xml:  KEY `id` (`id`)
//AN_Xml:) ENGINE=MyISAM AUTO_INCREMENT=72141 DEFAULT CHARSET=utf8 AUTO_INCREMENT=72141 ;

//AN_Xml:

And now my wicked primitive script for saving the POSTs:

//AN_Xml:

That's what I did on CSS-Tricks for one day. If you'd like, here's the complete data I collected as SQL.

//AN_Xml:

Looking At The Results

//AN_Xml:

Remember: ALL of this data was collected from css-tricks.com. So it's a bunch of designer nerds, probably. It's only relevant to this site and sites with very similar audiences.

//AN_Xml:

First, the borin' ol screen resolution data. I got this by querying 500 random samples of data and laying div's of that size on top of each other with as light of gray as I could make. Incidently, its rgba(0,0,0,0.004), because rgba(0,0,0,0.003) is pure white (weird).

//AN_Xml:

Notice the rather hard lines. Monitors only come in so many sizes. Makes sense. Here's what happens when we do the same thing with browser window sizes though:

//AN_Xml:

Much more blurry. Also makes sense. Even as I write this my browser is at some very arbitrary sizing, probably about 80% of my screen resolution. Click those images above to see them bigger. You'll notice that whatever visible hard edges there are in the browser size version, they are exactly 20px narrower than the screen size counterpart. Interesting.

//AN_Xml:

If I tint the screen sizes red and the browser sizes green and put them on top of each other, this is what we get:

//AN_Xml:

Notice on the outside edges the tint stays red. Not a lot of people who have extremely wide monitors have their browser window open that wide. I know I don't. Let's look at the stats for "full screen" browsers. How many people browser full screen, or with their browser window "maximized" so to speak. Well if you query only for entries where the window and the screen resolution are exactly the same, very few, less than 1%, but it get's interesting:

//AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml:

Totally full screen	0.85%
Within 50px of full screen	1.06%
Within 100px of full screen	9.67%
Within 200px of full screen	61.18%

//AN_Xml:

So very few people browse full screen, but the majority of people browse pretty close to full screen. As speculation, it's likely the Windows folks are the ones browsing full screen, as that's much more natural behavior on that operating system. But now "full screen" is a big deal in OS X Lion, maybe that will start effecting this stuff.

//AN_Xml:

If we put this stuff to a spread and use the entire data set, here's one way to break it down:

//AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml:

Width Range	Browser Window	Screen Resolution
0px - 500px	1.13%	1.02%
501px - 800px	2.01%	1.06%
801px - 1000px	2.84%	0.07%
1001px - 1200px	14.91%	6.86%
1201px - 1400px	40.65%	35.57%
1401px - 1600px	17.38%	17.17%
1601px - 2000px	20.41%	34.34%
2000px+	0.66%	3.91%

//AN_Xml:

So where is mobile in all this? Despite reports of massive growth in mobile browsing, which I do not doubt, CSS Tricks has very little mobile traffic.

//AN_Xml:

Let's wrap it up with some quick hits:

//AN_Xml:

The most popular screen resolution is 1680 x 1050 with almost 13% of visits having a monitor of that size.
Predictably, there is no one browser window size that is far above all others, but leading the pack is 1349 x 667 at 0.75% of visits.
The most popular screen resolution ratio is 16:10 with 46% of visits having that. Maybe because a lot of video is 16:9 and monitor makers wanted people to watch that but still have room for some OS chrome? 16:9 is next with 29%, 5:4 with 12%, and 4:3 with 8%.
All of those ratios are wider than tall. Turns out only 2% of visitors have screens that are taller than wide (or at least that report that way).
Actual browser windows also tend to be wider than tall, with only 3% of visits having dimensions that are taller than wide.
Average number of pixels per screen = 1,539,515
Average screen resolution = 1526 x 967
Average browser window size = 1366 x 784

//AN_Xml:

Huge Thanks

//AN_Xml:

To Jamie Bicknell of Rentedsmile Web Design for helping me wrassle together the MYSQL queries and PHP needed to do anything useful with the data.

//AN_Xml:

Advertise here with BSA

Screen Resolution ≠ Browser Window is a post from CSS-Tricks

Dropp

Chris Coyier — Fri, 17 Jun 2011 01:09:33 +0000

My buddies at Sense Labs just released a really cool iPhone app called Dropp. Allows you to leave location-based messages anywhere on Earth that people receive when they visit that location. Leave them privately for your friends, or publicly. Such a cool simple idea that could be used for so many things, from scavenger hunts, to marketing, to romance.

//AN_Xml:

Direct Link to Article — Permalink

Advertise here with BSA

Dropp is a post from CSS-Tricks

Useful :nth-child Recipes

Chris Coyier — Thu, 16 Jun 2011 11:02:21 +0000

I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have!

//AN_Xml:

In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers. But it should be fairly obvious how to alter them to get similar selections.

//AN_Xml:

Select Only the Fifth Element

//AN_Xml:

li:nth-child(5) {
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

To select the first element, you can use :first-child, or I bet you can guess how to alter the above to do it as well.

//AN_Xml:

Select All But The First Five

//AN_Xml:

li:nth-child(n+6) {
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

If there were more than 10 elements here, it would select all of them beyond 5.

//AN_Xml:

Select Only The First Five

//AN_Xml:

li:nth-child(-n+5) {
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

Select Every Fourth, Starting At The First

//AN_Xml:

li:nth-child(4n-7) {  /* or 4n+1 */
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

Select Only Odd or Even

//AN_Xml:

li:nth-child(odd) {
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

li:nth-child(even) {
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

Select The Last Element

//AN_Xml:

li:last-child {
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

Selects the 10th because we have 10 elements here, but if there was 8 it would select the 8th, or if there were 1,290 it would select the 1,290th.

//AN_Xml:

Select the Second to Last Element

//AN_Xml:

li:nth-last-child(2) {
//AN_Xml:    color: green;
//AN_Xml:}

//AN_Xml:

Selects the 9th because we have 10 elements here, but if there were 30 elements it would select the 29th.

//AN_Xml:

Browser Support

//AN_Xml:

Interestingly enough, :first-child was supported by IE 7, but it's not until IE 9 where the rest of this stuff is supported. Other than IE there isn't much browser support concern, and if you are worried about IE, then use Selectivizr. If browser support stuff is interesting or important for you, definitely check out When can I use... which tracks this stuff very well.

//AN_Xml:

Advertise here with BSA

Useful :nth-child Recipes is a post from CSS-Tricks

CSS Lint

Chris Coyier — Wed, 15 Jun 2011 21:10:13 +0000

New tool by Nicholas Zakas and Nicole Sullivan to analyze your CSS and tell you that you are doing a bad job. It's an amazing tool to help you understand how to write better CSS. To nitpick, I'd say that warnings like "Don't use ID selectors" is a bit harsh and biased toward Nicole's own OOCSS style, but hey, it's her creation. The project is on GitHub, so if you find errors or want to make your own version, do it up there.

//AN_Xml:

Direct Link to Article — Permalink

Advertise here with BSA

CSS Lint is a post from CSS-Tricks

Just One Of Those Things You Need To Understand About JavaScript

Chris Coyier — Wed, 15 Jun 2011 12:00:47 +0000

Ever since I've published the article Dynamic Page / Replacing Content, I've gotten quite a few emails that come in from people who are trying to use it in conjunction with some other JavaScript stuff and having trouble. Most of the time, it's some kind of lightbox effect. One of their pages has a bunch of thumbnails on it, and when they load that page in, the lightbox effect doesn't work.

//AN_Xml:

The problem is that when the thumbnails are loaded onto the page (via Ajax, i.e. jQuery's .load() function) they do not have any events bound to them.

//AN_Xml:

/* Your lightbox plugin */
//AN_Xml:$("photos a").ceebox();  
//AN_Xml:
//AN_Xml:/* Basics of Ajax */
//AN_Xml:$("nav a").click(function(e) {
//AN_Xml:    e.preventDefault();
//AN_Xml:    $("#main-content").load(this.href);  /* Thumbnails loaded from here */
//AN_Xml:});

//AN_Xml:

The way that the lightbox plugin (probably) works is that it binds click events to the elements you passed in that selector (the thumbnails) when the page loads, and those click events do the lightbox action. Since the newly loaded thumbnails have no click event, the lightbox action does't work.

//AN_Xml:

One way to fix it is to call the lightbox plugin after the content loads, in the callback function of the load function:

//AN_Xml:

$("photos a").ceebox();  
//AN_Xml:
//AN_Xml:$("nav a").click(function(e) {
//AN_Xml:    e.preventDefault();
//AN_Xml:    $("#main-content").load(this.href, function() {
//AN_Xml:
//AN_Xml:              /* Callback function */
//AN_Xml:              $("photos a").ceebox();  /* Call this again */
//AN_Xml:
//AN_Xml:    });
//AN_Xml:});

//AN_Xml:

A little repetitive, but that'll do the trick.

//AN_Xml:

A Better Way with Delegate

//AN_Xml:

While this is "just how JavaScript works" it's a known pain in the butt. Since jQuery is a library that exists to ease pains like this, of course it has a better way. That way is the .delegate() function, where instead of binding events to the individual elements, you bind an event to an element higher up the DOM tree, which isn't likely to be replaced via Ajax, which watches for those clicks.

//AN_Xml:

This relies on something called event bubbling, which is a neat and important concept in JavaScript (really: the DOM model). If you click on a thumbnail, it will trigger a click event on that element, then a click event on it's parent element, and a click event on it's parent's parent element, all the way up to the root element. Because of this, we can watch for clicks on deeper-down elements from higher-up elements.

//AN_Xml:

Unfortunately with our lightbox example, you would have to alter the plugin itself to get it to use delegate instead of binding directly to the elements. Definitely do-able but trickier, since you probably aren't as intimately familiar with that plugin's code as you are your own.

//AN_Xml:

Listen to Remy Sharp

//AN_Xml:

As this article was drafting, Remy Sharp put out a video screencast about this exact topic. He's way better at explaining it than me, so please go watch that.

//AN_Xml:

Advertise here with BSA

Just One Of Those Things You Need To Understand About JavaScript is a post from CSS-Tricks

The Stats That Matter: Your Site’s Stats

Chris Coyier — Tue, 14 Jun 2011 20:42:56 +0000

Just because I thought it was interesting, I shared this on Twitter this morning:

//AN_Xml:

95% of traffic to CSS-Tricks has a screen resolution of larger than 1024x768.

//AN_Xml:

And I got all kinds of responses like: That's such a skewed statistic!!!

//AN_Xml:

How are my own stats on my own website skewed?

//AN_Xml:

OK, I know what they meant, they meant that that 95% number isn't indicative of most websites, it's only CSS-Tricks visitors. So people shouldn't quote that number out of context or use it to inform design decisions on other websites.

//AN_Xml:

But that highlights an interesting point. Who cares what the global average of internet user screen size is? The only stats that matter are your own. Unless you are starting a new project from scratch and need a baseline, in which case I think you are better off finding a related website and kindly asking for their numbers than using a global average.

//AN_Xml:

That said, I'm not sure that particular statistic will inform my design decisions either. As I tinker with a redesign, I plan to support all screens large and small.

//AN_Xml:

Advertise here with BSA

The Stats That Matter: Your Site’s Stats is a post from CSS-Tricks

New at Wufoo

Chris Coyier — Tue, 14 Jun 2011 14:08:05 +0000

Couple of things I wanted to share from Wufoo land.

//AN_Xml:

Developers: We've released the Wufoo Form Embed Kit, which is a way you can build form embedding integration with other apps easily. As in, you don't have to learn our APIs or do custom design work. Would make for neat CMS plugins!

//AN_Xml:

Designers: If you didn't know you could apply your own custom CSS to Wufoo forms and completely transform their appearance, you can, and here's a tutorial getting you up to speed. And did you know you can customize the look of radio buttons and checkboxes with just CSS?

//AN_Xml:

Advertise here with BSA

New at Wufoo is a post from CSS-Tricks