js运动小球碰壁反弹

1、触碰窗口壁沿反弹，同时改变颜色

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>碰壁反弹</title><style>#box {margin: 50px auto 0;width: 800px;height: 600px;border: 2px solid #ccc;position: relative;}#subbox {width: 50px;height: 50px;position: absolute;border-radius: 50%;top: 0;left: 0;background-color: lightblue;}</style>
</head><body><div id="box"><div id="subbox"></div></div></body></html>
<script>var box = document.getElementById('box');var subbox = document.getElementById('subbox');var leftMax = 800 - subbox.clientWidth;var topMax = 600 - subbox.clientHeight;// 定时器var lTor = null;// 每次变化的像素值var lengLeft = 5;var lengTop = 5;console.log(topMax);console.log(leftMax);function leftToRight() {var Left = subbox.offsetLeft + lengLeft;var Top = subbox.offsetTop + lengTop;if (Left >= leftMax) {Left = leftMax;lengLeft = -lengLeft;changeColor(subbox);} else if (Left <= 0) {Left = 0;lengLeft = -lengLeft;changeColor(subbox);};if (Top >= topMax) {Top = topMax;lengTop = -lengTop;changeColor(subbox);} else if (Top <= 0) {Top = 0;lengTop = -lengTop;changeColor(subbox);}subbox.style.top = Top + "px";subbox.style.left = Left + "px";}function changeColor(obj) {var a = Math.floor(Math.random() * 255);var b = Math.floor(Math.random() * 255);var c = Math.floor(Math.random() * 255);obj.style.background = "rgb(" + a + "," + b + "," + c + ")";return obj;}box.onclick = function () {// clearInterval(lTor);lTor = setInterval(function () {leftToRight();}, 25)}
</script>

js运动小球碰壁反弹相关推荐

小球碰壁反弹加分_Javascript：Canvas的小球碰壁反弹
(萌新),我今天在网上看了看如何在Canvas画布上做出小球碰壁反弹的效果,然后自己试做一下,感觉良好,不知道还有什么需要改良. 首先我的思路是: 1.在body创建一个canvas标签,设置宽:50 ...
小球碰壁反弹加分_用Java实现小球碰壁反弹的简单实例(算法十分简单)
用Java实现小球碰壁反弹的简单实例(算法十分简单) 核心代码如下: if(addX){ x+=3; }else{ x-=3; } if(addY){ y+=6; }else{ y-=6; } if( ...
js 小球碰壁反弹and小球碰撞
好像好几天没有更博了呢,最近有点变懒了,这样不好,不好~~我们要做热爱学习的好孩子,嘻嘻,今天下午补上... 我们在学习js的时候,一个很经典的案例就是小球的碰壁反弹效果啦~简单的小球碰壁效果可以慢慢 ...
小球碰壁反弹加分_js中小球碰壁反弹
二. 整个浏览器可视区域的碰壁反弹 margin:0; padding:0; } #bounce{ height: 50px; width: 50px; border-radius: 50%;/*ba ...
小球碰壁反弹加分_高中物理竞赛典型例题精讲——小球盖子不断反弹速度
04-02-11_小球盖子不断反弹速度本期高中物理竞赛试题,我们共同来研究一个动量守恒定律在复杂运动过程中的综合应用实例,本题的物理场景虽然简单,但是题目的设计者将一个原本简单的运动过程通过一个非常 ...
小球碰壁反弹加分_汇编课程设计——小球碰壁
汇编语言程序设计课程设计说明书一.需求分析功能需求: 对小球的描绘. 移动以及碰撞反弹的运动情况. 画球的主要思路是画出圆心相同. 半径依次递减的圆组合起来即可得到一个球, 其核心算法是 Br ...
小球碰壁反弹加分_canvas实现碰壁反弹（小球）
Document canvas { box-shadow: 0 0 5px red; display: block; margin: 20px auto; } var cv = document.qu ...
c语言小球反弹碰壁发出声音,求VB小球碰壁反弹的代码,谢谢
匿名用户 1级 2012-03-26 回答加一个picture1,timer1 Option Explicit Private Const BallR = 200 Private Const Bal ...
用Java实现小球碰壁反弹
核心代码如下: if(addX){ x+=3; }else{ x-=3; } if(addY){ y+=6; }else{ y-=6; } if(x<=0||x>=(width-50)){ ...

js运动小球碰壁反弹

js运动小球碰壁反弹

js运动小球碰壁反弹相关推荐

最新文章

热门文章