原生JavaScript之实战 模拟重力场(篮球)
成品图如下所示:
点击篮球让篮球掉下
搭建HTML+CSS代码
html:
<div id="demo"></div>
css:
div{
width:100px;
height:100px;
background-image:url("../images/lanqiu.png");
background-size: 100px 100px;
position: absolute;
left: 0px;
top: 0px;
border-radius: 50% 50%;
}
js代码(注释都在里面):
var oDiv = document.getElementById('demo');
var timer = null; oDiv.onclick = function (){ //点击篮球触发运动函数
startMove(this);
} function startMove (dom){//运动函数
clearInterval(dom.timer);//清理定时器
var iSpeedX = 6; //横向初速度
var iSpeedY = 8; //竖向初速度
var g = 3; //重力初速度 dom.timer = setInterval(function (){ //开启定时器
iSpeedY += g; //竖向坐标每次加等于本身
var newTop = dom.offsetTop + iSpeedY; //篮球自身纵坐标加上竖向速度值付给newTop
var newLeft = dom.offsetLeft + iSpeedX;//篮球自身横坐标加上横向速度值付给newLeft
if(newTop >= document.documentElement.clientHeight - dom.clientHeight){ //newTop如果大于或等于浏览器窗口高度减去篮球自身高度
iSpeedY *= -1; //当篮球到达窗口底部的时候纵向速度乘以-1,使篮球反向运动 //加上能量损失,让篮球碰到四壁的时候,能量减小
iSpeedY *= 0.8; //纵向速度乘以0.8,会越乘越小
iSpeedX *= 0.8; //横向速度乘以0.8,会越乘越小
newTop = document.documentElement.clientHeight - dom.clientHeight;
//为了防止篮球大于等于底部的时候略过浏览器窗口底边出现滚动条,所以让newTop值直接等于浏览器窗口高度减去自身高度
}
if(newTop <= 0){ //当newTop值反向走到流浪器窗口顶部的时候,即等于0
iSpeedY *= -1; //则继续以纵向速度乘以-1,继续反向运动 //加上能量损失,让篮球碰到四壁的时候,能量减小
iSpeedY *= 0.8;//纵向速度乘以0.8,会越乘越小
iSpeedX *= 0.8;//横向速度乘以0.8,会越乘越小
newTop = 0; //防止略过窗口,直接让newTop值等于0
}
if(newLeft >= document.documentElement.clientWidth - dom.clientWidth){//newLeft如果大于或等于流浪器窗口宽度减去篮球自身宽度
iSpeedX *= -1;//则继续以横向速度乘以-1,继续反向运动 //加上能量损失,让篮球碰到四壁的时候,能量减小
iSpeedY *= 0.8;//纵向速度乘以0.8,会越乘越小
iSpeedX *= 0.8;//横向速度乘以0.8,会越乘越小
newLeft = document.documentElement.clientWidth - dom.clientWidth;
//为了防止篮球大于等于宽度的时候略过浏览器窗口宽度出现横向滚动条,所以让newTop值直接等于浏览器窗口宽度减去自身宽度
}
if(newLeft <= 0){ //当newLeft值反向走到流浪器窗口最左侧的时候,即等于0
iSpeedX *= -1;//则继续以横向速度乘以-1,继续反向运动 //加上能量损失,让篮球碰到四壁的时候,能量减小
iSpeedY *= 0.8;//纵向速度乘以0.8,会越乘越小
iSpeedX *= 0.8;//横向速度乘以0.8,会越乘越小
newLeft = 0;//防止略过窗口,直接让newTop值等于0
}
if(Math.abs(iSpeedX) < 1 && Math.abs(iSpeedY) < 1){ //当横向速度和纵向速度小于1的时候,横向纵向速度等于0
iSpeedX = 0;
iSpeedY = 0;
}
if(iSpeedX == 0 && iSpeedY == 0 && newTop == document.documentElement.clientHeight - dom.clientHeight){
//当横向速度和纵向速度等于0并且newTop值等于窗口高度减去自身高度的时候
clearInterval(dom.timer);//清理定时器,停止运动
}else{//停了运动就跟着停止了
dom.style.top = newTop + 'px';
dom.style.left = newLeft + 'px';
}
},30);//每30毫秒运行一次
}
谢谢观看,如有大佬经过请多指教! 谢谢观看,如有大佬经过请多指教! 谢谢观看,如有大佬经过请多指教!
原生JavaScript之实战 模拟重力场(篮球)的更多相关文章
- 原生javascript之实战 轮播图
成品效果如下图所示: 因为博客园限制图片上传大小被我删了一些帧数,所以图片看起来会有一点卡,现实运行是不会的 搭建HTML和CSS结构 HTML代码如下: <div class="wr ...
- 用原生javascript模拟经典FC游戏公路争霸
#用原生javascript模拟经典FC游戏公路争霸 前几天看了园子里面的随笔 [原生javascript开发仿微信打飞机小游戏](http://www.cnblogs.com/Mr-Nobody/p ...
- 原生javascript模仿win8等待进度条。
一.序言 一直很中意win8等待提示圆圈进度条.win8刚出来那会,感觉好神奇!苦于当时没思路,没去研究.通过最近网上找找资料,终于给搞出来了!先上Demo,献丑了!预览请看:win8进度条. 二.简 ...
- 表单美化-原生javascript和jQuery单选按钮(兼容IE6)
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- 使用原生 JavaScript 操作 DOM
原文:https://www.sitepoint.com/dom-manipulation-vanilla-javascript-no-jquery/ 微软官方放弃了 IE10-,所以现在可以放心使用 ...
- React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块
尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息. ...
- 原生 JavaScript 实现 state 状态管理系统
原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在 ...
- C#构造方法(函数) C#方法重载 C#字段和属性 MUI实现上拉加载和下拉刷新 SVN常用功能介绍(二) SVN常用功能介绍(一) ASP.NET常用内置对象之——Server sql server——子查询 C#接口 字符串的本质 AJAX原生JavaScript写法
C#构造方法(函数) 一.概括 1.通常创建一个对象的方法如图: 通过 Student tom = new Student(); 创建tom对象,这种创建实例的形式被称为构造方法. 简述:用来初 ...
- JavaScript继承的模拟实现
我们都知道,在JavaScript中只能模拟实现OO中的"类",也就意味着,在JavaScript中没有类的继承.我们也只能通过在原对象里添加或改写属性来模拟实现. 先定义一个父类 ...
随机推荐
- uva 10604
状态压缩 奇怪的是A与B混合 和 B与A 混合得到的热量可能不同 #include <cstdio> #include <cstdlib> #include <cmat ...
- Java中的重写
以下内容引用自http://wiki.jikexueyuan.com/project/java/overriding.html: 如果一个类从它的父类继承了一个方法,如果这个方法没有被标记为final ...
- hotswapagent——热更新代码而无需重启生产环境
http://blog.csdn.net/littleschemer/article/details/51645722
- mysql查询今天,昨天,近7天,近30天,本月,上一月数据的SQL
原文:http://www.open-open.com/code/view/1423207309170 select * from ad_proTrack_t where to_days(crt_ti ...
- B/S(WEB)系统中使用Activex插件调用扫描仪实现连续扫描并上传图像(IE文件扫描并自动上传)
IE浏览器下使用Activex插件调用客户端扫描仪扫描文件并山传,可以将纸质档案(如合同.文件.资料等)扫描并将扫描图像保存到服务器,可以用于合同管理.档案管理等. 通过插件方式调用扫描仪扫描并获取图 ...
- 如何利用Fluxion诱惑目标用户获取WPA密码
前言 由于ISP替代了易受攻击的路由器,供渗透测试人员选择的诸如Reaver这样的工具越来越少,对于特定的目标,哪些工具有用与否能够确定的也很少.而如果采用暴力破解WPA密码,可能会需要大量的时间 ...
- 浏览器websocket
使用浏览器,PHP 来构建的应用,发现都是每次浏览器发送一次http 请求,PHP 回一个响应. 这样,后端的PHP 在处理多次http请求是,每次都是不同的进程在处理. 这就加大了开销, 而且,PH ...
- 公布Java桌面程序
我拿了一份桌面工具的开源码,修改动改,在elipse上执行.感觉良好.但到了公布应用程序,就傻眼了. 我竟然不知道咋公布! 呵呵,不愧是Java小白. 假设是微软阵营,直接就编译成exe了. 但jav ...
- [React] {svg, css module, sass} support in Create React App 2.0
create-react-app version 2.0 added a lot of new features. One of the new features is added the svgr ...
- Vs2012在Linux开发中的应用(5):项目属性的定义
VS的项目属性表实际上是由一系列的XML文件定义的,都存放在C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V110\2052文件夹下.我们全然能够 ...