加入收藏 | 设为首页 | 会员中心 | 我要投稿 广州站长网 (https://www.020zz.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 模式 > 正文

JS向量旋转实现网页图片移动和碰撞反弹效果

发布时间:2018-10-04 10:53:12 所属栏目:模式 来源:站长网
导读:上学期好像有一门课叫网页脚本设计,现在仔细想想,发现我好像基本没去上过,书还是新的。期末老师要求交一个作品,做一个网页,附带一个 Java script效果。。。 经过一上午苦学课本语法,稍微明白了这个是个什么东西,就好像C语言里面写函数一样,为了完成

  上学期好像有一门课叫网页脚本设计,现在仔细想想,发现我好像基本没去上过,书还是新的。期末老师要求交一个作品,做一个网页,附带一个Javascript效果。。。

  经过一上午苦学课本语法,稍微明白了这个是个什么东西,就好像C语言里面写函数一样,为了完成作业,我其中搞了一个网页图片移动和碰到边界反弹的效果(比较傻逼,大家不要笑啦。)

  图片移动的原理都是一样的,就好像C#里面Drawimage,不断改变图片在窗口中显示的位置,由于改变速率很快,人的肉眼看上去就好像是连续移动的,这样就有了图片在移动的幻觉。 移动很简单,经过简单测试,我设定10MS刷新一次,每次图片的横纵坐标都+=1,这样效果感觉是最流畅的,关键是如何完成图片遇到四周边框就反弹的效果,这里的反弹遵从物理上的反弹原则。

JS向量旋转实现网页图片移动和碰撞反弹效果

  我们把图片的移动看做一个平面向量 v=[x,y] ,那么在碰撞过程后向量的大小(速率)是不会发生变化的,只是方向变了,所以图片的碰撞可以看成向量的旋转。

  这里要说明一下,经过推导,如果一个向量[x,y]逆时针旋转a弧度 那么旋转后的向量为[x*cos(a)-y*sin(a),x*sin(a)+y*cos(a)]

  证明一下:

JS向量旋转实现网页图片移动和碰撞反弹效果

  设原长度为R的向量v0[x0,y0] 与X轴夹角为a 逆时针旋转b弧度后为向量v1[x1,y1] 现在求v1[x1,y1]

  首先由三角函数定义有: x0=R*cos(a) y0=R*sin(a)

  旋转后 x1=R*cos(a+b) y1=R*sin(a+b)

  分别使用余弦定理 正弦定理

  x1=R*cos(a)*cos(b)-R*sin(a)*sin(b)

  y1=R*sin(a)*cos(b)+R*cos(a)*sin(b)

  --> x1=x0*cos(b)-y0*sin(b)

  y1=x0*sin(b)+y0*cos(b)

  写成矩阵形式 [x1,y1]=[x0,y0]*|cos(b),sin(b)|

  |-sin(b),cos(b)|

  (后面我也会专门介绍矩阵这个强大的数学工具)

  OK 有了上面这个向量旋转公式,问题基本得到解决了,剩下的就是编码工作。

  这里我设计的是向量与坐标轴夹角为PI/4 也就是45度,这样相当于每次碰撞逆时针旋转90度,这个角度很方便,因为每次图片反弹后它与坐标轴的夹角不变,依然45度。

  把上述公式的b换成90度(PI/2)

  简化公式 [x1,y1]=[-y0,x0] 一切顺利搞定。

  我javascript学得不好,所以代码比较烂了,呵呵!其实主要的小成就感还是利用自己学到的数学知识来编写简单程序,大家不要笑就行啦!~

  文章来源:Lr's blog

(编辑:广州站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读