Skip to main content

Posts

Showing posts from July, 2010

Paper Rock Scissors: Day 3

Now we're demonstrating how fun interfaces can be built without the use of Flash. This is a growing importance, as open web technologies like HTML5 and CSS3 become more supported and capable, and as devices like Android phones and Apple iPads are more widespread, where Flash is un- or under-supported and web technologies are increasingly useful for performance. The prototype of Paper Rock Scissors worked, but we need something that actually looks nice. This is what I came up with a couple hours of messy around. It doesn't take much to clean up a web game, though it can take a lot more to make it really polish and appear shiny. That is true of any design. The theme has a few threads that tie it together. Your are represented by a blue glow, on your score and on your selections. The enemy is represented by a red glow, so the progress of the game is clear without overloading it with any textual messages or any heavy graphics. I've notched the selections, like

Blink

EDIT: Please don't do this. The <blink> is back. Thankfully, for you Firefox users, this won't work. All of my webkit using readers see a blink tag, doing its blinking, which webkit does not implement. This is all thanks to an evil snippet of CSS: @-webkit-keyframes blinkit { from { opacity: 1.0; } 50% { opacity: 0.0; } to { opacity: 1.0; } } blink { -webkit-animation: blinkit 500 linear 0 infinite normal; } We can use our powers for good or for evil. Sometimes, evil is just fun! EDIT: This might not work for everyone, even in webkit browsers. It works less reliably when I actually post it, but it is still fun!

Paper Rock Scissors: Day 2

Yesterday I wrote about the little tech-demo Paper Rock Scissors game I prototyped in the morning. Today, I've replaced its crude AJAX polling with a comet solution, cleaned up the UI, and added a real-time chat for the players, in about two hours this afternoon. You can try it out with the other readers of the blog right now. Give it a try, if anyone else is around. Very simple. Nothing flashy. The point was to show off how comet can improve a project that needs it. The prototype yesterday had a 500ms interval updating the game state, so twice a second it would ask the server if the score changed, if the other player made a move yet, etc. This is a terrible way to make multi-user interactions! The server would quickly get bogged down by all that polling and anything other than Paper Rock Scissors would take a lot more fine-grained polling than 500ms, increasing the load a lot. The solution, in HTTP land, is that we replace several polls per second with a single poll th

Paper Rock Scissors: Day 1

I’m building a Facebook game. Now, don’t worry, you haven’t lost me to the giant beast, my friends. No, I’m just doing a little project, for fun, to both test and demonstrate a number of technologies. I figured something really simple, like Paper Rock Scissors, would be the perfect target. I have the game playable in about three hours this morning. I have more work to do. The point of this is to demonstrate a number of technologies I am trying to push as an expertise, because they are all things we know well and which I think are ready to have their day in the sun, so I can see a lot of need for this coming in. Even such a simple game is demonstrating all of these things. A comet server to push events to the game client in the browser HTML5 to build a game UI that is flashy, but without Flash Housing a web app as a Facebook app, for promotion and integration purposes Utilizing HTML5 for mobile gaming platforms Today, I have a playable prototype that matches up players, updat