js中小球碰壁反弹
一、 在指定容器内的碰壁反弹 <!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<style type="text/css">
.ball{
height: 60px;
width: 60px;
background: blue;
border-radius: 50%; position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="ball"> </div>
<p style="width: 100%;height: auto;">
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） <br />
offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）<br />
clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）<br />
clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）<br />
style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）<br />
style.height //返回元素的高度（包括元素高度，不包括内边距、边框和外边距）<br />
scrollWidth //返回元素的宽度（包括元素宽度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientWidth相同<br />
scrollHeigh //返回元素的高度（包括元素高度、内边距和溢出尺寸，不包括边框和外边距），无溢出的情况，与clientHeight相同<br />
offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。
所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。<br />
offsetLeft //此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。<br />
scrollLeft //此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也就是元素被滚动条向左拉动的距离。返回值是一个整数，单位是像素。此属性是可读写的。<br />
scrollTop //此属性可以获取或者设置对象的最顶部到对象在当前窗口显示的范围内的顶边的距离，也就是元素滚动条被向下拉动的距离。 返回值是一个整数，单位是像素。此属性是可读写的。
</p> </body>
<script type="text/javascript">
var ball = document.querySelector('.ball'); setInterval(scroll,50); //全局变量，避免进入函数每次都需要重新声明一次
var stepX = 5;
var stepY = 5;
function scroll(){
var scrollW = ball.offsetLeft + stepX;
var scrollH = ball.offsetTop + stepY; if(scrollW >= 800){
stepX *= -1;
}else if(scrollW <= 0){
stepX *= -1;
} if(scrollH >= 400){
stepY = -stepY;
}else if(scrollH <= 0){
stepY = -stepY;
} ball.style.left = scrollW + "px";
ball.style.top = scrollH + "px";
}
</script>
</html>
二、 整个浏览器可视区域的碰壁反弹 <!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#bounce{
height: 50px;
width: 50px;
border-radius: 50%;
/*background: yellow;*/ position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div id="bounce"> </div>
</body>
<script type="text/javascript">
//获取元素
var container = gt("con");//小球所在容器
var bounce = gt("bounce");//反弹的小球 //设置小球随机背景颜色
bounce.style.background = ranColor(); //获取小球在可视区域的滚动范围
//获取可视区域的宽高（不含任务栏）
var aWidth = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var aHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
console.log("可视区域不含任务栏的范围：w："+aWidth + "===h："+aHeight); //减去小球的宽高即为活动范围,此处不加单位，方便moveDistance()方法内if条件判断
var scrollMaxX = (aWidth - bounce.offsetWidth);
var scrollMaxY = (aHeight - bounce.offsetHeight); console.log("小球可滚动的范围：x："+scrollMaxX+"===y："+scrollMaxY); //设置小球滚动，每隔几秒滚动一段距离
// var timer = setInterval(function(){alert("haha")},1000);
var timer = setInterval(moveDistance,30); //设置小球移动
var stepX = 5;
var stepY = 5;
function moveDistance(){
// console.log("进入moveDistance") var currentLeft = bounce.offsetLeft + stepX;
var currentTop = bounce.offsetTop + stepY; //判断小球是否滚动到最大的宽度、高度，如果滚动到最大宽度、高度，设置反弹滚动 *(-1)
if(currentLeft >= scrollMaxX){
currentLeft = scrollMaxX;
stepX *= -1;
bounce.style.background = ranColor();
}else if(currentLeft <= 0){
currentLeft = 0;
stepX *= -1;
bounce.style.background = ranColor();
} if(currentTop >= scrollMaxY){
currentTop = scrollMaxY;
stepY *= -1;
bounce.style.background = ranColor();
}else if(currentTop <= 0){
currentTop = 0;
stepY *= -1;
bounce.style.background = ranColor();
} bounce.style.left = currentLeft + 'px';
bounce.style.top = currentTop + 'px'; console.log(bounce.style.left);
// console.log("离开moveDistance");
} //设置窗口改变监听器;onresize 事件会在窗口或框架被调整大小时发生。
//当浏览器窗口发生改变时，重新获取浏览器当前可视化窗口的尺寸，重新计算小球能移动的最大宽度和高度
window.onresize = function(){
aWidth = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
aHeight = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight; scrollMaxX = (aWidth - bounce.offsetWidth);
scrollMaxY = (aHeight - bounce.offsetHeight);
} //设置小球随机颜色方法
function ranColor(){
var red = parseInt(Math.random()*255);
var green = parseInt(Math.random()*255);
var blue = parseInt(Math.random()*255);
return "RGB(" + red + "," + green + "," + blue + ")";
} //设置通过id获取元素的函数
function gt(e){
return document.getElementById(e);
}
</script>
</html>
js中小球碰壁反弹的更多相关文章
- (NO.00004)iOS实现打砖块游戏(九):游戏中小球与反弹棒的碰撞
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 前一篇博文介绍了物理对象中小球与砖块的碰撞处理,在这一篇中我们再 ...
- 原生js实现多个随机大小颜色位置速度小球的碰壁反弹
文章地址 https://www.cnblogs.com/sandraryan/ 需求:生成n个小球,让他们在一个大盒子中碰壁反弹,要求小球随机颜色,大小,初始位置,运动速度. 思路分析: 创建小球随 ...
- js实现div的碰壁反弹效果
文章地址 https://www.cnblogs.com/sandraryan/ 需求: 写一个div,让div在父级进行匀速运动,碰到父级上下左右的边框,就向反方向运动. 碰壁反弹在游戏制作中很常用 ...
- 初探JavaScript（三）——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- 拾取模型的原理及其在THREE.JS中的代码实现
1. Three.js中的拾取 1.1. 从模型转到屏幕上的过程说开 由于图形显示的基本单位是三角形,那就先从一个三角形从世界坐标转到屏幕坐标说起,例如三角形abc 乘以模型视图矩阵就进入了视点坐标 ...
- 初步揭秘node.js中的事件
当你学习node.js的时候,Events是一个非常重要的需要理解的事情.非常多的Node对象触发事件,你能在文档API中找到很多例子.但是关于如何写自己的事件和监听,你可能还不太清楚.如果你不了解, ...
- js实现小球的弹性碰撞。
前 言 MYBG 小编最近在做自己的个人网站,其中就用到了一个小球碰撞检测的功能,想自己写,无奈本人能力不足啊(毕竟还是一个菜鸟)!!就想着找个插件用一下也好,可是找了好久也没有找到一个比较好用 ...
- (NO.00004)iOS实现打砖块游戏(八):游戏中小球与砖块的碰撞
大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 现在回到GameScene.m中,我们所有的碰撞处理就放在该类中 ...
- 【面试篇】寒冬求职季之你必须要懂的原生JS(中)
互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...
随机推荐
- 土地购买 （斜率优化dp）
土地购买 (斜率优化dp) 题目描述 农夫 \(John\) 准备扩大他的农场,他正在考虑$ N(1 \leqslant N \leqslant 50,000)$ 块长方形的土地. 每块土地的长宽满足 ...
- Today At AntDock 2020年8月21日
前段时间,我在 Mac 上使用 CLion 进行 C++ 编译,但发现 #include<bits/stdc++.h> 居然出了问题,无法使用,Xcode 也不行.我试图查找资料,但一般都 ...
- markdown 绘图利器之granphviz
目录 概述 graphviz 脚本语法结构 图 方向,尺寸,间距 节点 shape 属性 多边形 record-based 的形状 用户定制 label 属性 基本用法 HTML用法 style 属性 ...
- 测试和发布说明（Alpha版本）
Alpha版本测试报告 1.测试中发现的BUG 已修复 服务器无法发送邮件 重复上传同一首歌曲 下载进度无法实时跟进 可以多次点击上传 注册验证码失真 上传结束无法及时清理队列信息 不可重现的BUG ...
- 个人项目wc
github地址:https://github.com/YTFFBX/wc 1.题目描述 Word Count1. 实现一个简单而完整的软件工具(源程序特征统计程序).2. 进行单元测试.回归测试.效 ...
- latex:公式的序号
1.排序单位 在文类book或report中,行间公式是以章为排序单位的,即每一新章节开始,公式序号计数器equation就被清零.比如第1章第3个公式的序号是(1.3),第2章第1个公式的序号是(2 ...
- Java多线程_Future设计模式
Future模式的核心:去除了主函数的等待时间,并使得原本需要等待的时间段可以用于处理其他业务逻辑. Future模式有点类似于商品订单.在网上购物时,提交订单后,在收货的这段时间里无需一直在家 ...
- 温故知新——Spring AOP
Spring AOP 面向切面编程,相信大家都不陌生,它和Spring IOC是Spring赖以成名的两个最基础的功能.在咱们平时的工作中,使用IOC的场景比较多,像咱们平时使用的@Controlle ...
- Python和Nose实现移动应用的自动化测试
今天跟大家聊的是Python和Nose实现移动应用的自动化测试,希望对你们有帮助,有说的不好的地方,还请多多指教! 采用Appium进行自动化的功能性测试最酷的一点是,你可以使用具有最适合你的测试工具 ...
- P4719 【模板】"动态 DP"&动态树分治
题目描述 给定一棵 n 个点的树,点带点权. 有 m 次操作,每次操作给定 x,y,表示修改点 x 的权值为 y. 你需要在每次操作之后求出这棵树的最大权独立集的权值大小. 输入格式 第一行有两个整数 ...