Auto tetris

by Yve Gotnone

HTML

<div class="description">
    Test UI for tetris algorithm. Just 2 figures: 1x4 and 2x2. Just implement function getColumnNumberForLeftFigureSquare() that finds the best place for current figure (column number for left square). And wait for the results. Size of tetris: 10 x 20.
</div>

<div id="auto-tetris"></div>
<div class="results">
    Squares left: <span id="left">200</span>
</div>

CSS

.description {
    width: 100%;
}
.results {
    padding: 20px
}
#auto-tetris {
    float: left;
    width: 200px;
    height: 400px;
    position: relative;
    border: 1px solid #666;
}
.fig {
    background: #d14;
    position: absolute;
}
.fig.top {
    top: 0;
    left: 50%;
}
.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) {
    // - You can use 3 vars: w, h (size of figure), cols
    // - I sure will
    var fieldWidth = 10;
    // Loops, what else..
    var minHeight = Math.min.apply(null, cols),
        maxHeight = Math.max.apply(null, cols); // optimized, yay!
    for(var y=minHeight; y<maxHeight; y++) {
        for(var x=0; x<=fieldWidth-w; x++) {
            for(var wx=0, rowIsFree = true; wx<w; wx++) {
                if(cols[x+wx]>y)
                    rowIsFree = false;
            }
            if(rowIsFree)
                return x+1; // free place found
        }
    }
    return 1; // nothing found
}

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

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

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 {
            w = 1; h = 4;
        }
    }

    d.className = c;
    t.appendChild(d);

    setTimeout(function() {
        var r = checkResults();
        if (r) {
            var cn   = getColumnNumberForLeftFigureSquare(w, h),
                newH = 0,
                end  = cn + w - 1,
                wi   = 0,
                maxH = 0;

            if (end > 10 || cn <= 0) {
                alert('Incorrect algorithm. Figure can not be inserted here.');
                clearInterval(interval);
                return;
            }

       ...