Archive for the 'Fun' Category

It’s Gmail: The Game!

TechCrunch reports on a Googler, Paul Truong, who created an HTML5-based game for Gmail called Galactic Inbox using his 20% time:
When you start it up, a little Gmail logo envelope guy pops out of a “20% Projects Lab” and starts flying. Essentially, he’s a spaceship and can shoot objects coming his way. It’s simple, but [...]

The CSS3 Song

Don’t be bummed it’s Monday, ‘cuse the CSS3 Song is here to cheer you up:

How can you go wrong with lyrics like this:
CSS3
Web animation done properly
CSS3
Degrading gracefully
I had a dream, an awesome dream
People surfing in the park
On Windows, Linux and Mac
And their page load speeds were oh-so-high
No big JavaScript library
Just to show some eye-candy
CSS3
Web animation [...]

It’s Friday. Take the time to learn the Web with a splash of French, German, and Irish

The week has been long. Much code has been written. There is much more to do, but Friday is for relaxing a little. Take some time, sit back and watch, as three fantastic videos are available for you:
French: Paul Rouget of Mozilla, shows you the future
Paul builds the best demos. ever. At the Mozilla Summit [...]

Guess the color. Hex geekery.

How hex geeky do you feel today? Take a sec to guess the hex!

Liquid Particles

Sit back and enjoy:

The bulk of the code is just:
PLAIN TEXT
JAVASCRIPT:

function run()
{
        ctx.globalCompositeOperation = “source-over”;
        ctx.fillStyle = “rgba(8,8,12,.65)”;
        ctx.fillRect( 0 , 0 , canvasW , canvasH );
        ctx.globalCompositeOperation = “lighter”;
       
        mouseVX    = mouseX - prevMouseX;
  [...]

IE thinks our universe is flat

Alex Girón, of CSS Beauty, has been playing with CSS3 goodness. His current experiment recreates our solar system spinning around using border-radius, transforms, and animations.
The experiment runs beeeautifully on WebKit Nightly, but for some reason it lags on Chrome.
Alex gives us the deatils:
border-radius
PLAIN TEXT
CSS:

ul.solarsystem li.sun {
    width: 40px;
    height: 40px;
    -webkit-border-radius: 20px;
  [...]

Slither

Slither is a Web port of the age old Snake game.
Erik Johnson wrote the game, and had this to say about the project (available here on GitHub):

We’ve seen a million varieties of snake/nibbles games over the years, especially in Flash; however, I haven’t come across many that are implemented using Canvas. I’ve used it to [...]

Torus: 3D Tetris Fun

Nearly 4 years ago, Ben Joffe created a fun Tetris-like game called Torus that takes the classic and makes it cylindrical. He just updated the game now that browsers can power his canvas game sooo much better.

Smooth falling motion

Smooth left/right motion

Row clear animation

Slightly higher playing field

Visual indication of death zone

“Sparkling” blocks

New points system

New piece types [...]

Vim spreads through the browsers

On Firefox we have Vimperator and now on Chrome we have Vimium:

Vi users rejoice! ;)

From Whisper to Shout; A new form of volume control

David Friedman calls is “silly”, but he has created something simple and fun in his new form of volume control that moves from whisper to shout as you change the volume.

The code (which works on Firefox and Opera right now) uses different tracks for each level:
PLAIN TEXT
HTML:

 

<audio id=”apA” autobuffer=”true” onTimeUpdate=”update();”>

        <source src=”ogg/Volume1.ogg” [...]