Learning Canvas: Making a Snake Game
27 Comments
In this tutorial we’ll learn the basics of the canvas element. How to draw to it, create loops which redraw it allowing animation, and in the end, wind up with a basic playable “Snake” game.
In this tutorial we’ll learn the basics of the canvas element. How to draw to it, create loops which redraw it allowing animation, and in the end, wind up with a basic playable “Snake” game.
The only statistic you get in most web analytics software is screen resolution. But there is a pretty good chance you just read this sentence in a browser that isn’t open to the full size of your monitor. If you are looking at size analytics for you website, browser size is far more relevant. In this article we figure out how to get that data, and then look at some of the results gathered from css-tricks.com.
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!
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.
The problem is that when the thumbnails are…
Just because I thought it was interesting, I shared this on Twitter this morning:
95% of traffic to CSS-Tricks has a screen resolution of larger than 1024×768.
And I got all kinds of responses like: That’s such a skewed statistic!!!
How are my own stats on my own website skewed?
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…
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.
Tons of examples and information from Joshua Johnson.
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.
HTML5 has a bunch of form-specific features that all make forms on the web better. Browser support for the features is all over the map, but many of the features can be thought of as progressive enhancement, so if it works, great, the form is better, if not, whatever. In this screencast we look at all the new types, attributes, and elements and finish up looking at real world forms and how they could be better if they used these HTML5 features.
Links from the video: