zoukankan      html  css  js  c++  java
  • 小球碰撞demo (基于html5)

    地址如下:http://www.adanghome.com/js_demo/5/

    做了个小球的碰撞墙壁反弹的小demo,基于html5的,所以请用chrome浏览。

    动画没有用css3来实现,感觉css3的动画虽然可以做简单的补间动画,也能做逐帧式动画,但对于属性依赖脚本实时变化的动画就很无能为力了。

    拖拽用的是html5的drag事件,比起纯js模拟实现的drag,html5的drag有很头痛的地方,拖拽有默认事件,drag方和drop方都有,比如拖拽完之后,物体自动回到原来的位置,物体在移动过程中只是有一个代理在移动,本身并没有移动,所以dom节点的坐标其实并没有变,而html和flash不同的是,你不能直接得到鼠标的位置,只能通过mousemove事件,得到event对象的坐标,所以不得不对drag事件监听,即时地移动dom节点,又比如把默认的事件都给阻止了,在firefox下又莫名其妙地拖拽图片就自动跳新窗口了。总之,像css3的resize一样,有它的局限性,虽然做一些简单地drag操作容易了,但做复杂效果就不方便了。

    本打算给小球加上小球间的碰撞的,但发现对算法还是不够了解,作罢了,以后有时间再来完善吧。

  • 相关阅读:
    Excel表格函数逻辑排错
    MobaXterm体验最好的SSH客户端
    Excel中的常用函数
    Shell 知识点2020
    Linux 知识点2020
    Python知识点2020
    es6 模版字符串
    es6对象定义简写
    es6解构赋值
    ES6 let const关键字
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426643.html
Copyright © 2011-2022 走看看