Изменим алгоритм. Теперь заполненные и пустые клетки будут отличаться только цветом. А метод draw будет только менять цвет нужного кирпичика.
Так как у нас кнопка «Старт» изначально находится внутри игрового поля, значит, при начале игры нам надо очистить HTML, но сделать это только один раз. Вариант только один — перенести этот процесс в метод init
var Tetris = { config: { pitchID: "tetris", brick: "<b></b>", freeBrick: { background: "#000", border: "1px solid #333" }, filledBrick: { background: "#fff", border: "1px solid #999" }, // ... }, // ... init: function() { // ... Tetris.startBtn.onclick = function () { // Очищаем игровое поле Tetris.clearPitch(); Tetris.tick(); } // ... }, // ... clearPitch: function() { var tetrisDom = Tetris.pitch.getDom(); // Очищаем поле tetrisDom.innerHTML = ''; // Рисуем пустые клеточки Tetris.each(Tetris.pitch.bricks, function(i,j){ tetrisDom.innerHTML += Tetris.config.brick; }); }, draw: function() { var tetrisDom = Tetris.pitch.getDom(); Tetris.each(Tetris.pitch.bricks, function(i,j){ // Для удобства определяем переменные со свойствами клеток var fillBG = Tetris.config.filledBrick.background; var freeBG = Tetris.config.freeBrick.background; var fillBorder = Tetris.config.filledBrick.border; var freeBorder = Tetris.config.freeBrick.border; // Рассчитываем порядковый номер клеточки var brickIndex = i * Tetris.pitch.width + j; // И разукрашиваем её в соответствующий цвет if (Tetris.pitch.bricks[i][j] || Tetris.figure.checkCoords(i,j)) { tetrisDom.getElementsByTagName('b')[brickIndex].style.background = fillBG; tetrisDom.getElementsByTagName('b')[brickIndex].style.border = fillBorder; } else { tetrisDom.getElementsByTagName('b')[brickIndex].style.background = freeBG; tetrisDom.getElementsByTagName('b')[brickIndex].style.border = freeBorder; } }); }, // ... }; Tetris.init();Вот это оптимизация — так оптимизация: http://jsfiddle.net/ilyautkin/aavju3jd/22/. Если честно, я не ожидал, что результат будет настолько крутым)
0 комментариев