本文实例为大家分享了JS实现躲避粒子小游戏的具体代码,供大家参考,具体内容如下
小项目的实战操作可以帮助我们更好的掌握javascript
躲避例子游戏规则:拖拽红球躲避绿球碰撞,拖拽过程不能触碰容器内壁,以赢得游戏持久度
不积小流,无以成江海。
将页面效果的实现细分成小步实现:页面结构的构建,样式修饰,js中小绿球在容器顶部随机位置生成、小绿球非水平非垂直方向的运动、小绿球碰撞容器内壁后弹性运动、生成多个小绿球、拖拽红球、红球的边界判断、红球与绿球的碰撞检测、“坚持n秒”的定时器实现、清除定时器
创建文本、容器和红球,在此项目下小绿球是动态创建生成的;
为创建的结构设置样式修饰
采用面向对象的编程思维
1.小绿球在容器顶部随机位置生成
用random函数生成 [0,1)内的随机小数再乘以小绿球在水平方向的运动范围,最后floor求整并将整数作为初始时小绿球与容器左壁的距离
2.小绿球非水平非垂直方向的运动
设置X方向的速度值和Y方向的速度值,与(1)相同,采用random函数乘以初始化XY方向的速度值就可以得到随机方向
创建定时器获取并更新小绿球与容器的左壁和上壁的距离以实现小球运动
3.小绿球碰撞容器内壁后弹性运动
小绿球的边界判断,碰撞左壁和右壁时X方向的速度 * -1;碰撞上壁和下壁时Y方向的速度 * -1
通过定时器不断调用构造函数生成多个小绿球,并置于一个数组中
为红球添加点击、拖动、松开事件。记住红球上一页面停留位置,与现在页面停留位置做差得到红球在XY方向的移动距离,分别加上上一停留位置红球与容器左壁和上壁的距离得到现在红球与容器左壁和上壁的距离,不断循环更新上次停留位置和现在停留位置即可
红球和绿球的移动范围都是容器的宽度高度减去自身球面的宽度和高度。触碰边界则重载页面,为了避免页面重载时出现持续触碰边界的情况加了锁
7.红球与绿球的碰撞检测
判断两圆心之间的距离是否小于两圆半径之和
8.“坚持n秒”的定时器实现
1.随机生成小绿球在顶部 位置随机 7.红球和绿球碰撞检测
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
①如果按每组1个红球2个绿球分组,绿球恰好够用,但剩5个红球,说明绿球比红球的2倍少10个.
②如果按每组3个红球和5个分组,红球恰好够用,但剩5个绿球,说明绿球比红球的
解题关键:通过两种分法,找到红球和绿球的倍数关系,用红球的数目表示出绿球的来,进一步利用盈亏计算公式求得解.
解析看不懂?免费查看同类题视频解析
阿里巴巴中国站和淘宝网会员帐号体系、《阿里巴巴服务条款》升级,完成登录后两边同时登录成功。