图文解析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