Ndex,
Это тоже без проблем.
<style>
html, body, #game {
width: 100%;
height: 100%;
position: relative;
}
.square {
position: absolute;
background: red;
border: solid 1px #000;
}
</style>
<div id="game">
<div id="controls">
<div data-direction="left" class="control">Налево</div>
<div data-direction="top" class="control">Вверх</div>
<div data-direction="down" class="control">Вниз</div>
<div data-direction="right" class="control">Вправо</div>
</div>
</div>
<script>
/**
* Объект квадрата
* @param {Number} x
* @param {Number} y
* @param {{x: number, y: number}} size
* @constructor
*/
var Square = function Square(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.node = null;
this.createNode();
this.setStyle();
};
/**
* Создаем элемент
*/
Square.prototype.createNode = function () {
this.node = document.createElement("DIV");
this.node.className = "square";
document.querySelector("#game").appendChild(this.node);
};
/**
* Добавляем к элементу стили
*/
Square.prototype.setStyle = function () {
this.node.style.left = this.x + "px";
this.node.style.top = this.y + "px";
this.node.style.width = this.size.width + "px";
this.node.style.height = this.size.height + "px";
};
/**
* Проверяем есть ли уже такой квадрат
* @param {{x: number, y: number}} coords
* @return {boolean}
*/
Square.prototype.hitTest = function (coords) {
return this.x == coords.x && this.y == coords.y;
};
/**
* Объект игры
* @constructor
*/
var Game = function Game() {
this.collection = [];
this.node = document.querySelector("#game");
this.squareSize = {
width: 10,
height: 10
};
this.activeSquareCoords = {
x: 300, y: 300
};
this.start();
this.setHandlers();
};
/**
* Назначаем обработчики на кнопки управления
*/
Game.prototype.setHandlers = function () {
var that = this;
Array.prototype.forEach.call(this.node.querySelectorAll(".control"), function (control) {
control.addEventListener("click", function () {
var direction = this.getAttribute("data-direction");
if (that.hitTest(that.get()[direction])) {
var check = function (coords) {
that.activeSquareCoords = coords;
if (that.hitTest(that.get()[direction])) {
check(that.get()[direction]);
} else {
that.addSquare(that.get()[direction]);
}
};
check(that.get()[direction]);
} else {
that.addSquare(that.get()[direction]);
}
}, false)
});
};
/**
* Проверяем наличие объекта с данными координатами в массиве квадратов
* @param {{x: number, y: number}} coords
*/
Game.prototype.hitTest = function (coords) {
return this.collection.some(function (square) {
return square.hitTest(coords);
});
};
/**
* Создаем первый квадрат, запускаем игру
*/
Game.prototype.start = function () {
this.addSquare(this.activeSquareCoords);
};
/**
* Добавляем квадрат
* @param {{x: number, y: number}} coords
*/
Game.prototype.addSquare = function (coords) {
this.collection.push(new Square(coords.x, coords.y, this.squareSize));
this.activeSquareCoords = {
x: coords.x, y: coords.y
};
};
/**
* Получаем объект смещений квадрата
* @return {{top: {x: number, y: number}, left: {x: number, y: number}, right: {x: number, y: number}, down: {x: number, y: number}}}
*/
Game.prototype.get = function () {
return {
top: {
x: this.activeSquareCoords.x,
y: this.activeSquareCoords.y - this.squareSize.height - 2
},
left: {
x: this.activeSquareCoords.x - this.squareSize.width - 2,
y: this.activeSquareCoords.y
},
right: {
x: this.activeSquareCoords.x + this.squareSize.width + 2,
y: this.activeSquareCoords.y
},
down: {
x: this.activeSquareCoords.x,
y: this.activeSquareCoords.y + this.squareSize.height + 2
}
}
};
var game = new Game();
</script>
Изучайте, возьмите как образец. Это начало ООП на javascript.
