Learning the basics of JavaScript with a Tetris game

I want to get a better feeling for how JavaScript works and how to use it well. I coded up this Tetris game, and have iterated over the code base and improved it a couple of times now.

I hope the state of the code is fairly good at this point, but also that someone more familiar with the language can suggest further improvements.

I've deliberately avoided the use of any kind of supporting framework to get a feel for JS in general, instead of learning a specific tool.

Game running in jsfiddle.

Minimal HTML that can start the game:

Actual game code:

```
/**
* @file
* Tetris game.
*/

var Tetris = (function() {
"use strict";

/**
* Initialize the game.
*/
function Tetris() {
var state,
renderer,
keyboard,
gameLoopTimerID;

var gameLoop = function() {
if (state.block.replace === true) {
state.block = new Block(state);
if (state.gameField.check_direction(state.block)) {
clearInterval(gameLoopTimerID);
gameOver();
this.init(state.canvas_id);
}
}

down.call(this);

renderer.draw(state);
};

var right = function() {
if (state.block.x 0) {
var hit_something = state.gameField.check_direction(state.block, "l");

if (!hit_something) {
state.block.x--;
renderer.draw(state);
}
}
};

var up = function() {
state.block.orientation += 90;
if (state.block.orientation >= 360) {
state.block.orientation -= 360;
}
renderer.draw(state);
};

var down = function() {
state.block.down();

renderer.draw(state);

clearInterval(gameLoopTimerID);
gameLoopTimerID = setInterval(
(function(self) {
return function() {
gameLoop.call(self);
};
})(this),
calculate_loop_timer(state.loop_timer, state.level)
);

};

/**
* Function for decrementing the timer interval as the level goes up.
* @TODO How expensive is pow()? Could it ever be worthwhile to memoi

From a one-time reading:

-
Functions left, right, up and down do model changes and deal with the view. Ideally, you would have a controller functionality that calls those functions when required, and afterwards the controller can then call renderer.draw(state).

-
I don't think you have to memoize pow().

-
Magic numbers are present in render_debug_grid. I am guessing those values ought to be based on blockSize.

-
For initializing, if you are willing to deal with falsey values, you could just create the x arrays, and treat undefined as false, or otherwise you could create a y array and slice it x times.

-
I think the code would be cleaner if check_direction was called with the offsets straight away instead of deriving them from u/r/d/l.

-
There is some copy-pasted code in check_hit_bottom and check_direction, which you could make DRY'er.

-
As per your comment, it is not clear for the casual reader what function update_render_offsets does, nor any other function under it in Block.

StackExchange Code Review Q#23873, answer score: 3