Поэтому я решил написать Тетрис. Не уверен, что получится реализовать все нюансы и всю функциональность, но для тренировки будет достаточно. Кроме того параллельно буду описывать в блоге каждый шаг. Должен получиться неплохой курс JavaScript продвинутого уровня.
Если вы только-только решили заняться программированием, советую пройти начальный курс, например, этот: Основы программирования. Видеокурс
Если же вы уже готовы двигаться дальше, добро пожаловать под кат.
Как вы уже поняли, писать будем на JS. Подготовим каркас для нашей игры.
<html>
<head>
<title>Tetris</title>
<style>
#tetris {
display: inline-block;
width: 264px;
height: 440px;
border: 2px solid #000;
line-height: 0px;
background: #000;
}
#tetris b, #tetris i {
display: inline-block;
width: 20px;
height: 20px;
background: #000;
border: 1px solid #333;
}
#tetris i {
background: #fff;
border-color: #999;
}
</style>
</head>
<body>
<div id="tetris"></div>
</body>
</html>Тег b у нас будет отвечать за свободную клетку, а тег i — за занятую.Теперь пора познакомиться с понятием «Объект». Объект — это массив, каждый элемент которого обозначен не порядковым номером, а собственным именем. Элементы объекта называются свойствами.
Давайте создадим объект Tetris со свойствами «ширина» и «высота»
var Tetris = {
width: 12,
height: 20
};Получить свойство объекта можно, указав название свойства через точкуconsole.log(Tetris.width);А теперь сравните с этим кодом:
print($resource->pagetitle);Тут тоже выводится свойство объекта $resource с названием pagetitle. Различие только в синтаксисе — в PHP свойства доступны через стрелочку, а в JS — через точку. На самом деле, объекты есть практически во всех языках программирования и понимание объектов везде одинаковое.
Свойством объекта может быть не только какое-то значение, но и другой объект. Добавим нашему объекту свойство pitch — это будет игровое поле.
var Tetris = {
width: 12,
height: 20,
pitch: {}
};Теперь пора задуматься. Ширина и высота — это свойства чего? Ширина и высота может быть не у самого тетриса, а у игрового поля. А у тетриса могут быть разве что настройки. Давайте перенесем ширину и высоту внутрь объекта pitch, а тетрису добавим настройки.var Tetris = {
config: {
pitchID: "tetris",
freeBrick: "<b></b>",
filledBrick: "<i></i>"
},
pitch: {
width: 12,
height: 20
}
};Кроме игрового поля в тетрисе есть «кирпичики». Так как кирпичики складываются на игровом поле, сделаем их свойством поляvar Tetris = {
config: {
pitchID: "tetris",
freeBrick: "<b></b>",
filledBrick: "<i></i>"
},
pitch: {
width: 12,
height: 20,
bricks: []
}
};В самом начале игры на поле нет ни одного кирпичика. Значит, все клетки пустые. Заполним массив bricks нулями.for (var i = 0; i < Tetris.pitch.height; i++) {
Tetris.pitch.bricks[i] = [];
for (var j = 0; j < Tetris.pitch.width; j++) {
Tetris.pitch.bricks[i][j] = 0;
}
}Ну, а теперь, пора что-то и нарисовать уже.// Найдем на странице элемент, в котором будем рисовать тетрис
var tetrisDom = document.getElementById(Tetris.config.pitchID);
// Очистим на всякий случай его
tetrisDom.innerHTML = '';
// И пробежимся по массиву кирпичиков
for (var i = 0; i < Tetris.pitch.bricks.length; i++) {
for (var j = 0; j < Tetris.pitch.bricks[i].length; j++) {
// Добавляя на игровое поле пустой или заполненный кирпичик
// (если в массиве кирпичиков 1, ставим заполненный кирпичик, если 0 - пустой)
tetrisDom.innerHTML += Tetris.pitch.bricks[i][j]
? Tetris.config.filledBrick
: Tetris.config.freeBrick;
}
}У меня получилось что-то типа этого (http://jsfiddle.net/ilyautkin/aavju3jd/):
Хм… Негоже начинать игру как только пользователь открыл страницу. Добавим кнопку «Старт».
<style>
#start-btn {
display: block;
width: 30%;
margin: 70% auto 0;
padding: 20px;
background: #eee;
text-align: center;
cursor: pointer;
}
#start-btn:hover {
background: #fff;
}
</style>
<div id="tetris">
<span id="start-btn">START</span>
</div>Кнопка не будет относиться к игровому полю — она как бы над ним. Поэтому добавим кнопку к объекту Tetrisvar Tetris = {
// ...
startBtn: document.getElementById('start-btn')
};И начнем рисовать только после нажатия кнопкиTetris.startBtn.onclick = function () {
var tetrisDom = document.getElementById(Tetris.config.pitchID);
tetrisDom.innerHTML = '';
for (var i = 0; i < Tetris.pitch.bricks.length; i++) {
for (var j = 0; j < Tetris.pitch.bricks[i].length; j++) {
tetrisDom.innerHTML += Tetris.pitch.bricks[i][j]
? Tetris.config.filledBrick
: Tetris.config.freeBrick;
}
}
}Думаю, теперь можно считать каркас нашего тетриса готовым. Вот, что получилось у меня: http://jsfiddle.net/ilyautkin/aavju3jd/2/При открытии страницы показывается игровое поле и кнопка «Старт». После нажатия на кнопку отрисовывается первый кадр игры — с игровым полем, заполненным пустыми кирпичиками.
На следующем уроке познакомимся с методами объектов.
Объектная
А для чего строка в первом цикле и далее в коде?
У нас же при создании объекта Tetris есть пустой массив.
Спасибо за материал!
Спасибо!