小编Ram*_*ind的帖子

我正在使用 Javascript 创建一个七巧板益智游戏。我需要检测用户何时用手指画了一个圆圈（或类似圆形的形状）。我已经能够收集数百（如果不是数千）x 和 y 点：

 var touchX = event.targetTouches[0].pageX - canvas.offsetLeft;
 var touchY = event.targetTouches[0].pageY - canvas.offsetTop;

然后我将每个 x 和 y 坐标推入一个数组：

    touchMoveX.push(touchX);   
    touchMoveY.push(touchY);

然后我遍历每个数组并创建两个点：

    for(var i = 0; i < touchMoveX.length; i++)
      {
        for(var l=0; l < touchMoveY.length; l++)
        {
            var xPosition = touchMoveX[i];
            var yPosition = touchMoveY[l];

            var v1x = touchMoveX[i];
            var v2x = touchMoveX[i + 1];
            var v1y = touchMoveY[l];
            var v2y = touchMoveY[l + 1];

然后使用这两个点，我使用以下公式计算出这两个点之间的角度（以度为单位）：

 var v1 = {x: v1x, y: v1y}, v2 = …

我正在学习javascript和css3游戏,我正在研究外星人游戏.游戏是一个猜谜游戏,你输入X和Y位置的猜测,导弹使用css3过渡向外星人移动.当导弹到达外星人时,爆炸应该出现; 但我很难确定转换何时结束.目前,当您进行X和Y猜测并且导弹起飞时,爆炸就会出现.当css3转换结束时,如何使用Javascript检测爆炸？

这是我目前拥有的:

样式表:

#explosion
{
  width: 20px;
  height: 20px;
  position: absolute;
  display: none;
  background-image: url(../images/explosion.jpg);
}

#alien
{
  width: 20px;
  height: 20px;
  position: absolute;
  top: 20px;
  left: 80px;
  background-image: url(../images/alien.jpg);
}

#missile
{
  width: 10px;
  height: 10px;
  position: absolute;
  top: 240px;
  left: 145px;
  background-image: url(../images/missile.jpg);
  /*Transition*/
  -webkit-transition: all 0.5s ease-out 0s;
  -moz-transition: all 0.5s ease-out 0s;
  transition: all 0.5s ease-out 0s;
}

和Javascript:

if(guessX >= alienX && guessX <= alienX + 20)
{
  //Yes, it's within the X range, …

我的导航嵌套在左侧屏幕的div中,当用户向下滚动页面并到达像素296时,左侧导航缓慢显示,其宽度朝向右侧增长.

我现在拥有的是半工作.当用户向下滚动页面时,会出现嵌套在div中的导航,但我希望它能够向右慢慢动画并且不会发生.不确定我做错了什么.我遇到问题的具体方法是:

$("#slidebottom").animate({ width: "100" }, 'slow');

但这是我的整个代码:

$(window).scroll(function(){

  var wintop = $(window).scrollTop(), docheight = $(document).height(), 
  winheight =    $(window).height();

  var bottomHeight = $("#slidebottom").height();
  var zeroheight = 0;

  if  (wintop > 296) {
    bottomHeight = $('#slidebottom').height(docheight);
    $("#slidebottom").animate({ width: "100" }, 'slow');

  }

  if( wintop < 296)
  {
    bottomHeight = $('#slidebottom').height(zeroheight);    
    //$("#slidebottom").animate({ width: "0" }, 'slow');
  }
});