Smashinglabs

Sebastian Poręba's blog

This is a summary page for a Three.js 3D Tetris tutorial. I thought of it as an alternative way of learning Three.js and as a source of HTML5 game development tips. The game itself is not so great, but it’s quite good for the first project. You can play it at http://fridek.github.com/Threejs-Tetris/ if your browser supports WebGL.

Part 1 – Introduction and game loop

After this part you should:

  • Know how to setup a renderer and scene with Three.js.
  • Understand what a game loop is and
  • why requestAnimationFrame is great.
  • Know that if it looks good, it’s good.

Grab source from github

Part 2 – Static blocks and keeping score

After this part you should:

  • Know the difference between connected and separated geometries.
  • Understand basics of materials and how to mix them.
  • Understand what exactly does position mean in Three.js.

Grab source from github

Part 3 – Adding and moving a block

After this part you should:

  • Know that numerics are passed by value and objects by reference.
  • Understand life cycle of a Tetris block.
  • Know how to merge geometries and the difference between mesh and geometry.
  • Know how to bind keyoboard events.

Grab source from github

Part 4 – Collision detection

After this part you should:

  • Know what enum is and how to emulate it in JavaScript.
  • Know how to detect different types of collision in Tetris.
  • Be familiar with shorthands for
    • if conditional: test ? if_true : if_false
    • long scope resolution: var tmpVal = some.long.obj.val
    • boolean as a parameter: myFunc((foo === 42))
  • Understand 3D math – transforming vectors (positions) with matrices.

Grab source from github

Part 5 – Audio and scoring

After this part you should:

  • Know how to detect and manage completed slices.
  • Know basics of Audio API.
  • Know how to have fun.
  • Start writing your own game.

Grab source from github

Many thanks to @TeMPOraL_PL for beta testing and spell-checking this tutorial!

  • RSS
  • Facebook
  • Twitter

FAQ about Wordpress

If you are a template developer: I don't mind anyone using ...

gMap 3.3.3 released

In the late evening an international number called my mobile. ...

Talks for Google Dev

First one from Google I/O Extended event in Krakow, about ...

Talks and lectures w

Bret Victor - Inventing on Principle Very inspiring talk about tools ...

3D Tetris with Three

[include file="ThreejsTetrisMenu.php"] Completed slices and score counting This function will be quite ...

FAQ about Wordpress

If you are a template developer: I don't mind anyone using ...

gMap 3.3.0 released

As always, you can download it from github. I had a ...

Lecture for GTUG: Ja

My main topics were: Optimization in general DOM Reflow/repaint Garbage collector JIT Google Closure (Compiler/Tools/Library) You can ...

Unit testing for jQu

In part 1 I described basics of unit testing in ...

Unit testing for jQu

There are few testing frameworks dedicated for frontend that are ...