Делать было нечего, вот моя простыня. Не претендует на образец написания, но общие идеи, надеюсь, передам.
Алсо, подписи будут чуть позже
Писалось под хром
P.S.S. доиграл до 18, хехе
String.prototype.noPx = function(){//решил написать функцию, которая поможет избавиться от мерзких `px`
//впрочем, вышло все равно костыльно, переделывать - лень
var str = this.toString();
if(str.substr(-2,2) === 'px'){
return str.substr(0,str.length-2)*1;
}
return 0;
}
var Target = function(){//создаем класс для цели
var self = this;//дабы удобнее было ссылаться на себя
var direction = 1;//куда летим?
var difficulty = document.getElementById('score').innerHTML*1;
//небольшой модификатор сложности ;)
this.obj = document.createElement('div');
this.obj.setAttribute('id','target');
document.body.appendChild(this.obj);
setInterval(function(){
var x = self.obj.style.left.toString().noPx();
//x = x.noPx();
if(x > 100){//летать будем в диапазоне (0...100)px
direction = -1;
}else if( x < 0){
direction = 1;
}
x += (2 + difficulty) * direction;//инкрементим позицию по Х с заданным знаком
self.obj.style.left = x + 'px';
}, 40);
}
var Bullet = function(from){
var self = this;
this.obj = document.createElement('div');
this.obj.setAttribute('class','bullet');
this.obj.style.left = from.obj.style.left;
document.body.appendChild(this.obj);
setInterval(function(){//тут мы слушаем, что случается с нашей пулей
//а также, производим с ней необходимые манипуляции
var bot = self.obj.style.bottom.noPx();
var top = $(self.obj).position().top;
if(top < 0){
$(self.obj).trigger('collect');
}
var pos = $(self.obj).position();
var tar = document.getElementById('target');
if(tar){//Собственно вот тут и начинаем проверять коллизии объектов
var tar_pos = $(tar).position();//получаем позицию цели
if(Math.abs((pos.left+2) - (tar_pos.left+15)) < 15){
/*(тут небольшая хитрость - точнее костыль
в идеале, надо было бы к координатам прибавлять половины
ширины и высоты элементов, при этом получая их центр)
примерно найдем центр элементов, что пули, что объекта
Далее, смотрим, если расстояние по Х между этими центрами
меньше половины цели, то значит у нас есть попадание по Х, проверяем дальше*/
if(Math.abs((pos.top - 7) - (tar_pos.top-5)) < 10){
/*
Тоже самое делаем и по Y, правда я решил немного расширить диапазон
попадания, из-за того, что пуля может просто "перескочить" цель
из-за большого инкремента по Y
*/
document.body.removeChild(tar);//Удаляем сбитую цель
var target = new Target();//тут же создаем новую, мы же азартные ребята, играем на счет, верно?
$(document).trigger('hit');//Триггерим событие попадания
}
}
}
//console.log(top);
bot += 20;//Тут инкрементим позицию пули по оси Y
self.obj.style.bottom = bot + 'px';
}, 50);
}
var Cannon = function(){
var self = this;
this.loaded = true;
this.obj = document.createElement('div');
this.obj.setAttribute('class','cannon loaded');
this.fire = function(){//Стреляем
if(self.loaded){//Только если заряжены
self.loaded = false;
var bullet = new Bullet(self);//Стреляем собссно пулей(забавно, да?)
self.reload();//перезаряжаемся
}
}
this.reload = function(){//вот таким образом
self.obj.classList.remove('loaded');
setTimeout(function(){
self.loaded = true;
self.obj.classList.add('loaded');
}, 1000);
}
document.body.appendChild(this.obj);//прикручиваем пушку к документу
self.obj.addEventListener('click', self.fire, false);//следим за тем, когда нажмут на курок
$(document).on('collect', '.bullet', function(){//собираем пульки, улетевшие за горизонт
$(this).remove();
});
$(document).on('hit', function(){//а тут увеличиваем счетчик, для удовлетворения нашего самолюбюия
var score = $('#score').text();
$('#score').text(++score);
})
}
var tar = new Target();//Создаем пушку
var can = new Cannon();//Создаем цель
#target{
display: block-inline;
position: absolute;
left: 0px;
width: 30px;
height: 10px;
background-color: red;
}
#score_wrap{
float: right;
}
.cannon{
display: block-inline;
position: absolute;
bottom: 0px;
left: 50px;
width: 7px;
height: 35px;
background-color: lightblue;
}
.cannon.loaded{
border-bottom: 10px solid green;
}
.bullet{
display: block-inline;
position: absolute;
bottom: 0px;
left: 50px;
width: 5px;
height: 15px;
background-color: yellow;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="score_wrap">Score <span id='score'>0</span></span>
Более детальные объяснения(многие из которых - личное мнение):
Итак, во-первых, для меня такие вещи легче и разумнее делать через Объекты, в нашем случае это:
var Target = function(){//Здесь, Target - имя своеобразного класса в JS
this.param = ...//А здесь мы перечисляем его свойства и методы
//т.е. то, что он имеет в себе, и что умеет делать
...
}
Делается это для того, чтобы сделать сущности(объекты) более самостоятельными, закладывая всю логику их работы в них самих же, а не устраивая хитросплетения функций между ними. Так же удобно обращаться к их свойствам и методам, можно создавать несколько экземпляров одного и того же объекта(как например, мы создаем пули и цели) и все они будут вести себя идентично, что в нашем случае также удобно.
Продолжая основную идею, внутри каждого объекта(его функции), мы задаем скажем так, Главную функцию, которая и будет выполнять все основные действия с нашим объектом. Но, так, как нам необходимо производить эти действия во времени, мы эту функцию объявили через setInterval(функция, промежуток_в_мс)
.
Таким образом, наша функция выполняется с определенной периодичностью, наблюдая за тем, пересекаются ли объекты, какие у кого координаты, и так далее. При этом, чем меньше промежуток, тем "плавнее" будут изменения на экране(но при этом и быстрее), однако, это приведет к повышению ресурсоемкости скрипта. Поэтому, не каждой такой функции нужно задавать минимальные промежутки выполнения.