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: http://phillihp.com/projects/html5-and-webgl/. There will be a link back to here once completed.

Play WebGL Tetris here: http://phillihp.com/projects/html5-and-webgl/creating-tetris-with-opengl-and-webgl/tetris-v1/ (You need an HTML5 browser).

Introduction

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

• Gesture detection for touch screen browsers (iOS / Android) – http://code.google.com/p/html5-slides/issues/detail?id=24
• Game completed
• Stat Count & Stat Views
• Next Object to Appear

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.
http://phillihp.com/projects/creating-tetris-with-opengl-and-webgl/tetris-v0-2/

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: http://phillihp.com/projects/html5-and-webgl/creating-tetris-with-opengl-and-webgl/tetris-v1/ (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: https://wiki.mozilla.org/Mobile/Platforms/Android

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.