点击小球运动js代码（js小球跟随鼠标移动）

本篇文章给大家谈谈点击小球运动js代码，以及js小球跟随鼠标移动对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、使用js画小球沿直线运动
• 2、如何使用javascript实现小球是沿着操场跑道轨迹运动
• 3、用C#编写窗口类小球碰撞程序怎么写啊。就是3个小球在窗口里碰撞点击小球开始运动，小球碰到小球原路返回
• 4、如何用js使小球来回弹动
• 5、actionscript 3.怎么做一个小球点击会放大在点击会缩小，求代码

使用js画小球沿直线运动

js: 

html: 

准备属性值：

   本文使用js画直线，运用到css中的一些属性。

绘制的步骤：

    在本例中，绘制直接使用鼠标。点击获得起始点，拖动到终点获得结束点，鼠标松开就绘制图形。

获得起始点：

获得结束点：

绘制直线：

    使用了jquery中的animate()方法。

   js: 

   html: 

小球的属性：

创建小球：

使小球运动：

    将之前的画直线的方法封装成一个固定起点和终点的类。

js: 

html: 

如何使用javascript实现小球是沿着操场跑道轨迹运动

操场轨迹上下两边为直线，左右为半圆。

选择用纯css分成四段控制动画，最终效果如图：

详细分析：

创建HTML：

HTML非常简单，2个div嵌套，里面的point就是点，调整外面的layout的top，left和rotate做出动画效果。

div class="layout"

div class="point"/div

/div

核心css：

去掉了浏览器兼容用的代码。

把动画分成四个部分：上方直线-右边半圆-下方直线-左边半圆。

最巧妙的地方在于，layout其实是一个长方型，把点放在长方型的一头，通过旋转layout使点旋转，去掉代码中注释的红色背景就能看到如下效果：

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

}

}

完整代码:

html

head

style 

.point{

width:10px;

height:10px;

background:blue;

position:relative;

border-radius:5px;

margin:0 auto;

}

.layout{

width:10px;

height:150px;

position:relative;

margin-left:100px;

margin-top:50px;

/*background:red;*/

animation-name:rotate;

animation-duration:2s;

animation-timing-function:linear;

animation-iteration-count:infinite;

animation-direction:alternate;

animation-play-state:running;

animation-direction:normal;

/* Chrome: */

-webkit-animation-name:rotate;

-webkit-animation-duration:2s;

-webkit-animation-timing-function:linear;

-webkit-animation-iteration-count:infinite;

-webkit-animation-play-state:running;

-webkit-animation-direction:normal;

/* Firefox: */

-moz-animation-name:rotate;

-moz-animation-duration:2s;

-moz-animation-timing-function:linear;

-moz-animation-iteration-count:infinite;

-moz-animation-direction:alternate;

-moz-animation-play-state:running;

-moz-animation-direction:normal;

/* Opera: */

-o-animation-name:rotate;

-o-animation-duration:2s;

-o-animation-timing-function:linear;

-o-animation-iteration-count:infinite;

-o-animation-direction:alternate;

-o-animation-play-state:running;

-o-animation-direction:normal;

}

@-webkit-keyframes rotate{

0%  {  left:0px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

25% { left:150px; top:0px; 

transform:rotate(0deg);

-ms-transform:rotate(0deg);  /* IE 9 */

-moz-transform:rotate(0deg);  /* Firefox */

-webkit-transform:rotate(0deg); /* Chrome */

-o-transform:rotate(0deg);  /* Opera */

}

50% { left:150px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

75% { left:0px; top:50px; 

transform:rotate(180deg);

-ms-transform:rotate(180deg);  /* IE 9 */

-moz-transform:rotate(180deg);  /* Firefox */

-webkit-transform:rotate(180deg); /* Chrome */

-o-transform:rotate(180deg);  /* Opera */

}

100%{ left:0px; top:0px; 

transform:rotate(360deg);

-ms-transform:rotate(360deg);  /* IE 9 */

-moz-transform:rotate(360deg);  /* Firefox */

-webkit-transform:rotate(360deg); /* Chrome */

-o-transform:rotate(360deg);  /* Opera */

}

}

/style

/head

body

div class="layout"

div class="point"/div

/div

/body

/html

用C#编写窗口类小球碰撞程序怎么写啊。就是3个小球在窗口里碰撞点击小球开始运动，小球碰到小球原路返回

如标题所示

相互碰撞的小球交换相互速度（完全弹性碰撞）

鼠标拖拽窗口 随着窗口的增大或减小 小球的大小和速度（速度的模）随机变化

下面是我写的一个函数 请问如何实现上述要求 谢谢 //x,y分别表示小球水平和竖直的速度

bool collision(TShape* sh1, TShape* sh2) {

float x1 = sh1-Left + sh1-Width/2.0;

float y1 = sh1-Top + sh1-Height/2.0;

float x2 = sh2-Left + sh2-Width/2.0;

float y2 = sh2-Top + sh2-Height/2.0;

if (sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2)) = sh1-Width/2.0 + sh2-Width/2.0)

return true;

else

return false;

}

如何用js使小球来回弹动

你好，

可以通过判断小球边缘和窗口高度来实现

例如垂直下落，给小球y方向的初速度和加速度（模拟重力加速度），当小球的小边缘接触窗口底部时，将 y = -y；加速度不反向；当达到最高点及y方向速度为零，将y再反向向下落。

来回弹动关键在于 对边缘的判断，和速度方向的判断和计算

actionscript 3.怎么做一个小球点击会放大在点击会缩小，求代码

btn.addEventListener(MouseEvent.CLICK, fl_ClickToPlayStopSound);

var fl_ToPlay:Boolean = true;

function fl_ClickToPlayStopSound(evt:MouseEvent):void

{

if(fl_ToPlay)

{

ball_mc.scaleX=2;//小球x,y同时放大2倍

ball_mc.scaleY=2;

}

else

{

ball_mc.scaleX=0.2;//小球x,y同时缩小大0.2倍

ball_mc.scaleY=0.2;

}

fl_ToPlay = !fl_ToPlay;

}

关于点击小球运动js代码和js小球跟随鼠标移动的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。