ECMAScript 5与6笔记：Web运动与游戏开发基础.pdfVIP

运动与游戏开发

引言

一、为什么要学习运动框架

在我们进行web页面开发的过程中，如何与用户进行友好、有趣的交互，是

须考虑的问题。比如：导航条中滑动的动画特效、点击加入购物车按钮通过抛物线

加入右侧购物车的动画特效，当然还有一些网页游戏的开发：、打砖块等。那

么我们要实现这些好玩又有趣的动画，就需要我们对动画的基础【运动】炉火纯青，那么

这个部分的学习，我们会对运动展开学习，并且通过大量的实例来帮助大家完成这个阶段

的学习。

二、运动原理

Js运动，本质来说，就是让web上DOM元素动起来。而想要DOM动起来，改变

其自身的位置属性，比如左边距，上边距，等。动画的原理就是把不同状态

的物体，串成连续的样子，就像一本书，画了几个小人，然后一翻书，就看见小人在动。js

动画也一样。不同状态的DOM，用定时器控制，就能得到动画效果。

那么我们首先来看一下如何实现运动:

方法：

1.运动的物体使用绝对定位

2.通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如

向右或左移动可以使用offsetLeft（offsetRight）来控制左右移动。

步骤：

1、开始运动前，先清除已有定时器（因为：是连续点击按钮，物体会运动越

来越快,造成运动）

2、开启定时器，计算速度

3、把运动和停止隔开（if/else),判断停止条件，执动

三、定时器

在javascritp中，有两个关于定时器的函数，它们是：


1.倒计定时器：timer=setTimeout(函数名,time);


2.循环定时器：timer=setInterval(函数名,time);

function()是定时器触发时要执行的是的函数，可以是一个函数，也可以是几

个函数，或者javascript的语句也可以，单要用;隔开；delaytime则是间隔的时间，

以毫秒为单位。


倒计时定时器就是在指定时间后触发，而循环定时器就是在间隔时间到来时

反复触发，其区别在于：前者只是作用一次，而后者则不停地作用。


倒计时定时器一般用于页面上只需要触发一次的的情况，比如点击某按钮后页面

在一定时间后跳转到相应的站点，也可以用于判断一个浏览者是不是你的站点上的“老

客”，如果不是，你就可以在5秒或者10秒后跳转到相应的站点，然后以后再来

可以在某个地方按某一个按钮就可以快速进入。


循环定时器一般用于站点上需要从复执行的效果，比如一个javascript的滚动条

或者状态栏，也可以用于将页面的背景用飞雪的来表示。这些需要隔一段时

间运行一次。


有时候我们也想去掉一些加上的定时器，此时可以用clearTimeout(timename)来

关闭倒计时定时器，而用clearInterval(timename)来关闭循环定时器。

四、运动研究

1.运动：匀速运动（让物体动起来）

对定时器的使用


给DIV加绝对定位


offsetLeft

问题：到达某个特定位罝停止


解决：做判断，符合条件时关掉定时器(存定时器timer)


速度变慢(一般不动时间,而是改数字-速度)


用变量存速度

问题：取7时，offsetLeft没有等于300的时候,div停不下来


解决:=300//停在301

问题：到300后点击按钮还继续走


：点击按钮,执行函数,开定时器(执行当前函数一至少执行一次)


解决:加else(没有到达目标之前才执行)

问题：连续点击，速度变快


：每点击一次就开一个定时器，点击几次就有几个定时器同时工作


解决：保证每次只有一个定时器工作,先cearlnterval()

示例1（