图文解析JavaScript如何实现弹弹球效果的过程

弹弹球的最终效果:
03

本文将用图文的方式,解析实现弹弹球效果的关键代码部分。

如表格所示:
弹弹球效果

参数说明:
box.style.top: 小球距离顶部的距离
speed: 表示小球的速度。(speed += 5) 表示小球每次执行操作的时候,速度加5。这从小球每次的speed值可以很直观的看出,不难理解。

关键在于:这里小球距离地面的高度为100px;所以当box.style.top值为100px时,表名小球触地了,这个时候,speed速度值应该反向。

Select Code
1
2
3
4
if(tmp >= 100) {
	speed = -speed;
	tmp = 100;
}

02

举例:小球下落,每次速度加5,到达地面速度为20。这时速度speed值反向,变成-20;然后speed+=5,此时的速度值为-15(负数表示球的运行方向是:向上)。

向上,直到速度变为0,球在上升到最高后,speed值再变为正数,球下落。

01

JS代码如下:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var box = document.getElementById('box');
var timer;
function start()
{
	var speed = 0;
	if (!timer){
		timer = setInterval(function(){
			speed += 5;
			var tmp = parseInt(box.style.top) + speed;
			if(tmp >= 100) {
				speed = -speed;
				tmp = 100;
			}
			box.style.top = tmp + 'px';
			console.log(box.style.top);
			console.log(timer);
		},100);
	}
}

function stop()
{
	clearInterval(timer);
	timer = undefined;
	console.log(timer);
}

完整源代码:https://github.com/webjust/case-study/blob/master/Javascript/002/jump_ball_javascript.html

JavaScript的setInterval()函数写一个来回移动的小球剖析

小球来回移动实现步骤:

小球来回移动1

原理:通过绝对定位,定位小球相对文档的位置,使用left值定位。所以控制小球来回移动,就是(不停的)改变left值的大小。

setInterval()

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

我们假设:小球每秒移动一次,移动到100px然后返回,那么left值的变化过程是(单位是px):

0,10,20,30,40,50,60……100 (每次移动累+10)
然后返回
100……60,50,40,30,20,10,0 (每次移动累-10)

小球来回移动2

Select Code
1
2
3
4
5
6
7
8
9
//每次移动的像素的大小
	step = 10;
	num += step;
	if(num==100 || num==0){
		step = -step;
	}

	//小球的left值
	box.style.left = num + "px";

解释:通过在当num值在最大和最小时,step变为正、负数。而变为累加、累减。

代码:

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="box" style="left:0;"></div>

	var box = document.getElementById('box');
	var num=0;
	var step = 10;
	setInterval(function(){
		//在console面板输出num值
		console.log(num);
		box.style.left = num + "px";
		num += step;
		
		//在title输出num值
		document.title = box.style.left;
		
		if(num==100 || num==0){
			step = -step;
		}
	},1000);