CSS3 Pong Animation with jQuery

I started working on this a few weeks ago and forgot to ever post the finished result! Following on from the CSS Domo, I decided to look at CSS3 animations/transitions just to see what could be done.

The answer? Not… more than you’d expect. Don’t end up reinventing the wheel with this or anything because you’ll end up just giving yourself headaches.

I found a cool article, CSS3 Pong: Insane Things to Do with CSS #17, which outlines how to use CSS3 properties to make a Pong animation, which they eventually manage to make somewhat playable. I reached the part where you set the animation duration (speed for the ball movement, paddle movement, etc.) and foolishly thought, “Hey what if you could change the speed of the animation and slow it down yourself by clicking buttons?”

Well, I tried, and also made it look a bit less retro. csspong

Here’s the demo: somethingoriginal.net/CSS3Pong

(JSFiddle)

The ball, paddles, and court are all just divs. I defined the keyframes for each animation (leftright, updown, twitchy) as mentioned in the original article, and then added two impact animations so the paddles would change colour when hit. If you slow it down enough though, you’ll see they, uh, actually just change colour as the ball approaches :)

Then using jQuery, when a button is clicked (faster, slower, etc.), I assigned the new x and y speeds and passed this onto an animate method which sorts everything out.

Once we get into the animate method, I assign the new x and y speeds, and re-append the new updated CSS.

As for browser compatibility:

  • Chrome OK
  • Firefox OK
  • Safari - eh, sometimes certain elements, such as the paddles, don’t update as expected. A hesitant OK
  • IE10 - The animations do work! They just don’t speed up. Or slow down. Yeah. :(

Snags:

  • Transform3D, which I was using for the left/right movement etc., is lovely and great and nice for hardware acceleration.
  • It is not so nice when you are using jQuery to manually add/remove the inline animation-duration properties, as you can see in the code above, because sometimes it simply does not update in certain browsers - the previous animation properties (including duration, which defeated the purpose of changing the speed) seem to continue, or in some cases, only the ball speed updates and the paddles don’t.
  • Even if you manually inspect the CSS you can see the new animation properties are there, they just haven’t been applied. I found sometimes leaving the tab and returning fixed this.
  • Unfortunately because of this I had to resort to using left: top: etc. for -webkit animations
  • Because CSS3 animations have so many vendor prefixes, I had a look at prefix free which seems pretty cool, and I’ll definitely be using it again.

Perhaps there could have been a better way to do this (definitely not using CSS, haha!), but it was an interesting enough learning exercise all the same :) Protip: If you’re ever looking at something like this save yourself the trouble and consider using HTML5′s canvas, or, if you’re going all-out and want to make an actual game, maybe WebGL (“WebGL is a cross-platform, royalty-free web standard for a low-level 3D graphics API based on OpenGL ES 2.0, exposed through the HTML5 Canvas element as Document Object Model interfaces”).

So, there you have it, have a go at improving it if you wish :)

PS I have added SweetCaptcha as I was starting to get over 30 spam comments to “approve” per day and I have not quite got around to wanting to pay for Askimet. I chose SweetCaptcha (I swear they’re not paying me to write this) because I can’t get enough of the cute tiny pictures and it seems more intuitive than typing in a load of garbled letters. Hope that’s cool!

Pure CSS Domo

As you may know, I love Domo:

Domo

Now, that was relevant, honest. I’ve been doing a lot of CSS3/HTML5 stuff recently, and am trying to iron out a few kinks thanks to years of self-taught bad practice, not really realising I was doing anything wrong until I’d started placement, where everything is real and very easily breakable. I read a .NET magazine article earlier about a pure CSS3 TARDIS someone had made  and decided to have a go myself at doing something similar with Domo. After all, he’s a pretty easy shape. I went for the Progressive Enhancement approach of outlining all of the HTML structures required before even touching the CSS.

somethingoriginal.net/Domo

and there’s a link to the JSFiddle there too.

Now, I figured someone out there will find it useful if I explain how I’ve structured it, so here’s an overview:

domo

The triangle-shaped divs were relatively easy to do, and instructions can be found here. This works because when the two adjacent sides (left/bottom, left/top, right/bottom, right/top) are joining with different border colours, the edge is diagonal giving a 3D border corner effect. Therefore, because one of these colours is set to transparent, this results in the triangle edge.

As this was a learning exercise, I was hoping to make more use of psuedo classes, such as using :before and :after for the additional row above/below each set of teeth, like that CSS TARDIS tutorial mentions, unfortunately I didn’t make much progress with this and was possibly using it in the wrong way. There are a few ways this could be made more efficient, so please let me know if you’ve spotted any mistakes or could suggest any improvements :)

On mobile devices

I also had a go at looking at <meta name=”viewport” … > to see how responsive I could make this for mobile browsers, however this was trickier than I’d hoped as I’d already made Domo a sticky footer with a fixed width and glued him to the bottom of the page (d’oh). I ended up setting a restriction on initial-scale and maximum-scale, although not entirely ideal. I’ll know for next time!

Update

Been super busy with work recently, however I’ve rejigged the layout a bit (based it on WordPress Twenty Twelve rather then Twenty Eleven), and I should be posting some new things soon :) There’s a really cool plugin for Google fonts (here) that I’ve added, that let’s you add them automatically and choose which CSS elements to apply them to, so I’d suggest checking that out if you’ve been using Cufon or something similar for WordPress in the past.

I’ve also a bit of training to do for work so no doubt the practice projects I make as a result of that will end up here haha. I need to do more amigurumi too!

Slime amigurumi

Finally got around to do some more amigurumi after the QCS formal! :D

I stumbled across the pattern for a green Maplestory slime (), and just couldn’t resist. I actually started this back in January, but completely ran out of time to do anything and decided to force myself to finish it this weekend. It’s been a few years since I’ve played the game (I keep redownloading it but then have a fleeting moment of realisation before I hit play haha), but this wee guy is an old favourite.

BE9jbhNCAAA4qok

If you’re interested, I used the pattern linked from this page, although I just stuck in my own eyes, and probably could have made the ball a little smaller! Mouth was stitched on using thick black embroidery thread.

Here’s a few in-progress snaps, including a lobotomy and a pic of the original eyes I was going to use:

Ahh lobotomy!

Oh nooo, braaaaaains!

“mffmfmfmfmpfmpfmf” = give me a mouth!

If I ever decide to do another Maplestory one, this guy will probably be next! 

Sun part of the sun & moon layout complete!

SomethingOriginalSun

Finally done :) I hope to add some PHP and JS stuff tomorrow to set a default stylesheet and allow for toggling between ‘night’ and ‘day’ mode.

I deliberated a lot over the font colour choice before realising “It’s ok, it kinda works”. I think I wasted more time on that bokeh effect than justifiable as you can’t really see it too much.

Zzz, good night.