可移动的div与移动的圆圈碰撞

时间:2013-11-16 10:26:24

标签: jquery html css

我想将速度圈从低变为高,并在我的方形div崩溃机智时发出警报 但我不知道该怎么做 这是一种你必须避免与圈子崩溃的游戏 如果坠毁提醒你输了 这是我的代码

$(function()
{
function randomNum(max)
{
    var num = Math.ceil(Math.random()*max);
    return num;
};
function randomcolor()
{
    var r = randomNum(255);
    var g = randomNum(255);
    var b = randomNum(255);
    var color = 'rgb('+r+','+g+','+b+')';
    return color;
};
function makeNewPosition()
{

// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 50;
var w = $(window).width() - 50;

var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);

return [nh,nw];    

};

animateDiv();



function animateDiv(){
 $('.abi').each(function() {
 var newq = makeNewPosition();
 var oldq = $(this).offset();
 var speed = calcSpeed([oldq.top, oldq.left], newq);
 $(this).css('background-color', randomcolor());
 $(this).animate({ top: newq[0], left: newq[1] }, speed,function(){ animateDiv(); });

 });

};



function calcSpeed(prev, next) 
{

var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);

var greatest = x > y ? x : y;

var speedModifier = 0.1;

var speed = Math.ceil(greatest/speedModifier);

return speed;
};
});
function endMove() {
$(this).removeClass('movable');
}
  function startMove() {
   $('.movable').on('mousemove', function(event) {
  var thisX = event.pageX - $(this).width() / 2,
      thisY = event.pageY - $(this).height() / 2;

   $('.movable').offset({
    left: thisX,
    top: thisY
  });
});
}
$(document).ready(function() {
$("#containerDiv").on('mousedown', function() {
$(this).addClass('movable');
startMove();
}).on('mouseup', function() {
$(this).removeClass('movable');
endMove();
 });

 });

0 个答案:

没有答案