Skip to main content

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 cards pulled away to mark your choice. Thanks to new implementations of CSS3 transform rules, we have great possibilities we can employ. You really know when a selection lost.

Oh no! Their rock beat your scissors. Too bad.

The player doesn't even need any introduction or instructions. You won't know when the game first loads who is blue and who is red, but the first thing you'll see is you own click making a choice glow blue, and you'll know through experience. Learning by discovery trumps a rule book any day of the week. This is enforced when the scores start reflecting the game, and you can see who is who without any of the labels the game originally had.

I did need to put some more information into the game. Maybe you glanced away when the other player made their pick and missed the animation. You'll want some log of the moves that happened. Still, I didn't want this to clutter up the screen and the chatlog made the most obvious sense to put it, already being a sort of timeline. You probably want the last one or two game events that happened, not the older ones, so I think a nice looking solution was found: the game messages fade as they get older, and the chat content stays visible, uncluttered. The result looks really nice after a few rounds of chat and play.

I'd rather play a game with a stranger while I chat. Maybe I've stumbled upon something more fun than Omegle.
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.

Give it a try and play with the other readers.



Labels:

Comments

Post a Comment

Popular posts from this blog

CARDIAC: The Cardboard Computer

I am just so excited about this. CARDIAC. The Cardboard Computer. How cool is that? This piece of history is amazing and better than that: it is extremely accessible. This fantastic design was built in 1969 by David Hagelbarger at Bell Labs to explain what computers were to those who would otherwise have no exposure to them. Miraculously, the CARDIAC (CARDboard Interactive Aid to Computation) was able to actually function as a slow and rudimentary computer.  One of the most fascinating aspects of this gem is that at the time of its publication the scope it was able to demonstrate was actually useful in explaining what a computer was. Could you imagine trying to explain computers today with anything close to the CARDIAC? It had 100 memory locations and only ten instructions. The memory held signed 3-digit numbers (-999 through 999) and instructions could be encoded such that the first digit was the instruction and the second two digits were the address of memory to operat...
1 comment
Read more

Statement Functions

At a small suggestion in #python, I wrote up a simple module that allows the use of many python statements in places requiring statements. This post serves as the announcement and documentation. You can find the release here . The pattern is the statement's keyword appended with a single underscore, so the first, of course, is print_. The example writes 'some+text' to an IOString for a URL query string. This mostly follows what it seems the print function will be in py3k. print_("some", "text", outfile=query_iostring, sep="+", end="") An obvious second choice was to wrap if statements. They take a condition value, and expect a truth value or callback an an optional else value or callback. Values and callbacks are named if_true, cb_true, if_false, and cb_false. if_(raw_input("Continue?")=="Y", cb_true=play_game, cb_false=quit) Of course, often your else might be an error case, so raising an exception could be useful...
1 comment
Read more

How To Teach Software Development

How To Teach Software Development Introduction Developers Quality Control Motivation Execution Businesses Students Schools Education is broken. Education about software development is even more broken. It is a sad observation of the industry from my eyes. I come to see good developers from what should be great educations as survivors, more than anything. Do they get a headstart from their education or do they overcome it? This is the first part in a series on software education. I want to open a discussion here. Please comment if you have thoughts. Blog about it, yourself. Write about how you disagree with me. Write more if you don't. We have a troubled industry. We care enough to do something about it. We hark on the bad developers the way people used to point at freak shows, but we only hurt ourselves but not improving the situation. We have to deal with their bad code. We are the twenty percent and we can't talk to the eighty percent, by definition, so we need to impro...
4 comments
Read more