Auto tetris

HTML

<div id="auto-tetris"></div>

<div class="description"><span class="results">Squares left: <span id="left">200</span></span><br/><br/>Test UI for tetris algorithm. Just 2 figures: 1x4 and 2x2. Just implement function getColumnNumberForLeftFigureSquare(w, h) that finds the best place for current figure (column number for left square). And wait for the results. Size of tetris: 10 x 20.<br/><br/><a href="http://habrahabr.ru/post/230229/">Post your code here</a></div>

CSS

.description {
    float: left;
    font-size: 12px;
    text-style: italic;
    margin: 10px;
    width: 150px;
}
.results {
    font-size: 18px;
}
#auto-tetris {
    float: left;
    width: 200px;
    height: 400px;
    position: relative;
    border: 1px solid #333;
}
.fig {
    position: absolute;
}
.fig.top {
    top: 0;
    left: 50%;
    background: #333;
}
.fig-1-1 {
    width: 80px;
    height: 20px;
}
.fig-1-1.top {
    margin-left: -40px;
}
.fig-1-2 {
    width: 20px;
    height: 80px;
}
.fig-1-2.top {
    margin-left: -10px;
}
.fig-2-1, .fig-2-2 {
    width: 40px;
    height: 40px;
}
.fig-2-1.top, .fig-2-2.top {
    margin-left: -20px;
}

JavaScript

// Function should return integer from 1 to 10. It is a number of column in which will be left square of figure.


function getColumnNumberForLeftFigureSquare(w, h) {
    function can_place(w, h, pos){
        if ((cols[pos]+h) > 20) return false;
        if ((pos + w) > 10) return false;
        
        // Solid Placement?
        var errors = 0;
        var heights = cols.slice(pos, pos+w);
        var maxH = Math.max.apply(Math, heights);
        for (var i=0;i<heights.length;i++){
            if (heights[i]!=maxH) errors+=1;
        }
        return errors;
    }
    
    // You can use 3 vars: w, h (size of figure), cols
    var move = 0;
    
    for (var maxError=0; maxError < w; maxError++){
        if (move) break;
        var minH = 100;
        for (var i=0; i<10; i++){
            var tmp = can_place(w, h, i)
            if (tmp === maxError){
                if (cols[i] < minH) {
                    move = i+1;
                    minH = cols[i];
                }
            }
            
        }
    }    
    if (!move){ 
        console.log('PAnic');
        move = getRandomInt(1, 6);
    }
    return move
}

var interval,
    cols = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0], // contains filled height for each column (10 columns)
    left = 200,
    speed = 100; // Score

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
}

function getRandomColor() {
    var hex = Math.floor(Math.random() * 0xFFFFFF);
    return "#" + ("000000" + hex.toString(16)).substr(-6);
}

function createRandomFigure() {
    var t = document.getElementById('auto-tetris'),
        l = document.getElementById('left'),
        f = getRandomInt(1, 3), // 1 - 1x4 or 2 - 2x2
        o = getRandomInt(1, 3), // 1 - horizontal or 2 - vertical
        c = 'top fig fig-' + f + '-' + o,
        d = document.createElement('div'),
        h = 2,
        w = 2;

    if (f == 1) {
        if (o == 1) {
            w = 4; h = 1;
        } else {
          ...