4 ms·

Create a Game Character with HTML5 and JavaScript

107 points by tilt 15y ago

sushumna 15y ago
This is excellent.
jechen 15y 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 15y ago
  Quote! Yeah I think HN did some hurt :b
wlievens 15y ago
Can't read the page because the twitter shoutbox gives an error...
- jasonkester 15y 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 15y ago
    Hell is other people's code?
- bschaefer 15y ago
  The cached version works perfectly: http://webcache.googleusercontent.com/search?sourceid=chrome&ie=UTF-8&q=cache%3Awww.williammalone.com%2Farticles%2Fcreate-html5-canvas-javascript-game-character%2F1%2F http://webcache.googleusercontent.com/search?sourceid=chrome...
- jqueryin 15y 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 15y 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!
- gcr 15y ago
  CoralCDN mirror: http://www.williammalone.com.nyud.net/articles/create-html5-canvas-javascript-game-character/1/ http://www.williammalone.com.nyud.net/articles/create-html5-... Edit: nevermind, it doesn't cache the javascript so the example doesn't actually work
- messel 15y 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:QKa7OUgxYeAJ:www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/+http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/&cd=1&hl=en&ct=clnk&gl=us&source=www.google.com http://webcache.googleusercontent.com/search?q=cache:QKa7OUg...
hootmon 15y ago
Warning: file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=williamMalone 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
gary4gar 15y ago
All just because of twitter :-( Warning: file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=williamMalone 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 15y 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_name=williamMalone http://api.twitter.com/1/statuses/user_timeline.xml?screen_n...); } catch (Exception $e) { } OR if ($contents = @file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=williamMalone) http://api.twitter.com/1/statuses/user_timeline.xml?screen_n...) { //stuff }
canistr 15y ago
Site looks to be back up and it looks great. Thanks!
benologist 15y ago
How would you handle the collision detection on this?
BioX 15y ago
Wow, this is a very cool site. Thanks for the post.

107 points by tilt 15y ago

This is excellent.

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 15y ago
Quote! Yeah I think HN did some hurt :b

wlievens 15y ago

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

jasonkester 15y 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 15y ago
  Hell is other people's code?
bschaefer 15y ago
The cached version works perfectly: http://webcache.googleusercontent.com/search?sourceid=chrome&ie=UTF-8&q=cache%3Awww.williammalone.com%2Farticles%2Fcreate-html5-canvas-javascript-game-character%2F1%2F http://webcache.googleusercontent.com/search?sourceid=chrome...
jqueryin 15y 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 15y 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!

gcr 15y ago
CoralCDN mirror: http://www.williammalone.com.nyud.net/articles/create-html5-canvas-javascript-game-character/1/ http://www.williammalone.com.nyud.net/articles/create-html5-... Edit: nevermind, it doesn't cache the javascript so the example doesn't actually work
messel 15y 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:QKa7OUgxYeAJ:www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/+http://www.williammalone.com/articles/create-html5-canvas-javascript-game-character/1/&cd=1&hl=en&ct=clnk&gl=us&source=www.google.com http://webcache.googleusercontent.com/search?q=cache:QKa7OUg...

hootmon 15y ago

Warning: file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=williamMalone 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

gary4gar 15y ago

All just because of twitter :-( Warning: file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=williamMalone 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 15y 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_name=williamMalone http://api.twitter.com/1/statuses/user_timeline.xml?screen_n...); } catch (Exception $e) { } OR if ($contents = @file_get_contents(http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=williamMalone) http://api.twitter.com/1/statuses/user_timeline.xml?screen_n...) { //stuff }

canistr 15y ago

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

benologist 15y ago

How would you handle the collision detection on this?

BioX 15y ago

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