HTML5/WebGL Tetris (beta soon)

Before you start

Are you running an HTML5 browser? with WebGL? Please follow this link before trying any of the HTML5 scripts: There will be a link back to here once completed.

Play WebGL Tetris here: (You need an HTML5 browser).


I use well known games and applications as an assistant to learn and explore new technologies and programming languages. For HTML5 and WebGL, I’ve chosen to do Tetris. So far, I’ve created Tetris twice, once my freshman year of college in JAVA, and again my Junior year in OpenGL and C++. The previous OpenGL has really helped out, it all came right back to me.

Long Term Goals

  • I’m debating whether or not to make this Open Source and to build a tutorial on how to build the game.
  • If I can get my Kinect project up and configure gestures to keyboard commands, I should be able to allow this game to be controlled via Kinect.

Short Term Goals

Tetris Object Mappings

It’s important to know how the Tetris objects are setup. For this, I simply created a spreadsheet. I’m using all of the original colors.

Tetris Object Mappings PDF

Version 0.2

Some good updates out of this one. New background color, integrated with the template, the game ends, and more.

Version 0.1:

I’ve got many of the major pieces working now. I still need to implement many features. Here’s a current screen shot.

Now, mind you, this is all in 3D. As soon as I say to rotate the entire graphics, you can see the 3D faces show up. You can see minor alternate faces with those lines, and eventually, I’ll have textures added.

Play WebGL Tetris here: (You need an HTML5 browser).

Mobile Browser

I was able to quickly test this using Firefox Fennec on my Android, which is Firefox’s mobile WebGL distribution, and sure enough, got my Tetris to show up there too. Pretty wild!

You can find Fennec here:

Working out the Kinks

I’m working out the kinks at the moment. My code works on my Dell Laptop and my Mac, but my Asus netbook is having trouble. I have yet to even venture into the Firefox space. That’s why we do this, right? Feel free to leave comments with your specs so I can get this completely cross-browser compatible.

16 Responses to HTML5/WebGL Tetris (beta soon)

  1. carte r4 says:

    unemployed smidgen gruff of miracle to notice indubitably the twilight fierce nicely

  2. The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

  3. manhattan says:

    sports book

  4. Martina Neuse says:

    I really appreciate your piece of work, Great post.

  5. I was reading something else about this on another blog. Interesting. Your linear perspective on it is diametrically contradicted to what I read in the first place. I am still reflecting over the various points of view, but I’m leaning to a great extent toward yours. And irrespective, that’s what is so super about modern democracy and the marketplace of thoughts online.

  6. temple says:

    A buddy of mine recommended your blog on Facebook. I can see why. Great post here.

  7. Guillermo Loecken says:

    cool site you have here

  8. CookeAMY says:

    That is good that people are able to receive the business loans and this opens new opportunities.

  9. Pingback: Firefox 4.0 – Quick Look. Enable WebGL! | phillihp's tech blog

  10. When you are new in social bookmarks submission, you will ought to search for the social bookmarking submissions service.

  11. Sean Franco says:

    This is really great! It’s great to make 3D stuffs! :D

  12. Wow! That is so great! Tetris software is amazing. I’m really used in playing Tetris on Facebook. There’s also a feature there wherein you can play against another player coming from other walks of the world. Though I’m no longer a kid and already married, I still do love Tetris.

  13. Gordon says:

    Great post. Keep it rolling.

  14. One of the things that I liked the most about the Tetris project is how you did lay-out the Tetris objects by position and object – that made it a ot easier for me to think the entire project through. I review fishfinders like the c120 raymarine, but I also like programming some games, using C++. Great post!

  15. ginger mickens says:

    Keeping a fresh blog is hard and quite tiresome. You’ve pulled it off well though.

Leave a Reply

Your email address will not be published. Required fields are marked *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>