Create a Game Character with HTML5 and JavaScript

http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/

by tilt • 15 years ago

107 16 15 years ago

sushumna• 15 years ago

This is excellent.

jechen• 15 years ago

This guy's HTML5 tutorials are freaking amazing, honestly can't express how grateful I am to people who's willing to put in the extra effort to help others learn. The servers are being hammered, though.

tilt• 15 years ago

Quote!

Yeah I think HN did some hurt :b

wlievens• 15 years ago

Can't read the page because the twitter shoutbox gives an error...

jasonkester• 15 years ago

Amazing that anybody would actually put 3rd party API code on the main execution path for rendering their site. What's the best case result? That your website renders correctly after only a 1 second pause?

This sort of widget is best lopped off entirely, or if you think it's absolutely essential, it's something that you load from javascript after all your resources have finished loading and rendering.

Never put your users' experience into the hands of a 3rd party. Other people's code is, nearly without exception, non-debugged, brittle garbage. Wrap it in four layers of try/catch and for the love of jebus, keep it out of your critical path.

lemming• 15 years ago

Hell is other people's code?

bschaefer• 15 years ago

The cached version works perfectly: http://webcache.googleusercontent.com/search?sourceid=chrome...

jqueryin• 15 years ago

And here's the straw that broke the camel's back:

    file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=williamMalone) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /home/content/w/i/l/willieohwillie/html/twitter/twitter-cacher.php on line 86

    Fatal error: Cannot use string offset as an array in /home/content/w/i/l/willieohwillie/html/header.php on line 319

Add some error handling and skip showing your timeline when this arises and be on your merry way.

mrspeaker• 15 years ago

Errrgh! That's a shame his site died - a great tutorial on giving character to your characters. When the player sprite is standing still he independently (and subtly) adds breathing motion and limb motion, and blinking.

If you make games, then bookmark it and come back later!

messel• 15 years ago

thanks for the review. I hit the site was about to give up but will review it later. Bringing life to characters through animation is well worth checking out for a budding clientside coffeescripting, canvas slinging, html5'er

The google web cache was viewable: http://webcache.googleusercontent.com/search?q=cache:QKa7OUg...

gcr• 15 years ago

CoralCDN mirror: http://www.williammalone.com.nyud.net/articles/create-html5-...

Edit: nevermind, it doesn't cache the javascript so the example doesn't actually work

gary4gar• 15 years ago

All just because of twitter :-(

Warning: file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_n...) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.1 400 Bad Request in /home/content/w/i/l/willieohwillie/html/twitter/twitter-cacher.php on line 86

Fatal error: Cannot use string offset as an array in /home/content/w/i/l/willieohwillie/html/header.php on line 319

f1gm3nt• 15 years ago

I think this is a better example of why you need to have code in place to fail gracefully.

try { file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_n...); } catch (Exception $e) { }

if ($contents = @file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_n...) { //stuff }

benologist• 15 years ago

How would you handle the collision detection on this?

canistr• 15 years ago

Site looks to be back up and it looks great. Thanks!

BioX• 15 years ago

Wow, this is a very cool site. Thanks for the post.

Create a Game Character with HTML5 and JavaScript

Related Stories