2.3 可以移动的方块
2.31 物理模型和面向对象
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
2.311 这个模型很简单: 物体的属性:速度(包含 x 分量和 y 分量,这里设置为一个0-5的随机数) 物体的方法:运动 环境属性:运动阻尼 f, 和窗口边缘碰撞弹性系数 k, 重力加速度 g
2.312 注意 obj.move 那个方法(函数)的写法
2.32 让方块动起来
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
代码开始变难了啊,呵呵。请仔细阅读注释。
2.321 说到底只不过是个物理过程的算法表达而已。其中移动的实现和前面 2.22 节的拖动是类似的。
2.322 注意感觉这里代码中 this 的使用。我在 Obj.move 中使用 this 的时候,this指的就是 Obj
2.323 注意我把 Obj 放在了函数外面。这时候它就是一个全局变量。这是为了后面使用 setInterval 而准备的。很多菜鸟在用定时器的时候常常发现“找不到对象”的错误,请注意一下变量的定义域问题。
2.324 菜鸟注意学习内置对象 Math 的方法
2.33 让方块停下来
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
在方块上按下鼠标,它会停下来,弹起鼠标,它就继续跑了,呵呵。
2.331 没人注意到 2.211 绑定事件 - 回字的四种写法只举出了三种绑定事件的方法吗?呵呵,这里是第四种: obj.onmousedown=function(){ this.stop(); }
2.332 我把 setInterval 改成了 setTimeout, 并且将定时器的句柄保存在了 obj 的属性里。这种使用定时器的做法是值得菜鸟借鉴的。
2.4 大结局 - 可以抛出的方块
运行代码框
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
用鼠标按住方块,然后移动鼠标,同时松开鼠标,看看效果吧,呵呵
这个例子算结束了,哈哈。不作讲解了,各位自己看吧。
经典论坛讨论: http://bbs.blueidea.com/thread-2708979-1-2.html
出处:蓝色理想
责任编辑:blue
上一页 网页制作前台之javascript [2] 下一页
◎进入论坛网页制作、网站综合版块参加讨论
|