【案例】自由运动小球

<!DOCTYPE html>

<head>

<title>飞翔的小球</title>

<style>

margin: 0;

padding: 0;

}

#ball{

width: 200px;

height: 200px;

border-radius: 50%;

background: pink;

position: absolute;

}

</style>

</head>

<body>

</body>

//获取元素

var ball = document.getElementById('ball');

//封装随机函数

function rand(m,n){

return Math.floor(Math.random() * (n - m + 1)) + m;

}

//封装改变颜色的函数

function changeBg(){

var r = rand(0,255);

var g = rand(0,255);

var b = rand(0,255);

ball.style.background = 'rgb('+ r +','+ g +','+ b +')';

}

changeBg();

//设置小球运动步径

var stepX = 2;

var stepY = 2;

setInterval(function(){

var newLeft = ball.offsetLeft + stepX;

var newTop = ball.offsetTop + stepY;

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;

if(newLeft >= clientWidth - ball.offsetWidth){

stepX *= -1;

changeBg();

}

if(newLeft <= 0){

stepX *= -1;

changeBg();

}

if(newTop >= clientHeight - ball.offsetHeight){

stepY *= -1;

changeBg();

}

if(newTop <= 0){

stepY *= -1;

changeBg();

}

ball.style.left = newLeft + 'px';

ball.style.top = newTop + 'px';

},20);

</script>

</html>

转载于:https://www.cnblogs.com/sherryStudy/p/ballFree_move.html

【案例】自由运动小球相关推荐

ae制作小球轨迹运动_利用Ae制作出自由落地运动小球的详细步骤
各位知道在Ae中如何制作出自由落地运动小球呢?不太会操作的用户可以去下文学习下利用Ae制作出自由落地运动小球的详细步骤. 我们先准备好小球图片素材,背景颜色为黑色.导入素材,新建合成.将素材拖拽的合成 ...
js运动小球碰壁反弹
js运动小球碰壁反弹 1.触碰窗口壁沿反弹,同时改变颜色 <!DOCTYPE html> <html lang="en"><head><m ...
Simscape基础教程之实例（一）——使用Simscape三维物理仿真自由落体小球碰撞平面
一. 简介本实例使用MATLAB/Simulink里面的simscape,实现自由落体小球碰撞平面的三维物理仿真,可用于新手入门simscape的参考示例. 二. 准备工作需要安装的工具箱 (1) ...
便利贴--12{酷炫背景，小球随鼠标移动，可自由设置小球属性}
便利贴--12{酷炫背景,小球随鼠标移动,可自由设置小球属性} html 资源下载 0积分 html 之前做的拿出来分享下 <!DOCTYPE html> <html>< ...
3dmax：3dmax三维VR渲染设置之高级灯光渲染(经典案例—自由光灯光点光源制作吊灯效果)图文教程
3dmax:3dmax三维VR渲染设置之高级灯光渲染(经典案例-自由光灯光点光源制作吊灯效果)图文教程目录自由光灯光点光源制作吊灯效果自由光灯光点光源制作吊灯效果
3dmax：3dmax三维VR渲染设置之高级灯光渲染(经典案例—自由灯光线光源制作灯槽效果)图文教程
3dmax:3dmax三维VR渲染设置之高级灯光渲染(经典案例-自由灯光线光源制作灯槽效果)图文教程目录自由灯光线光源制作灯槽效果自由灯光线光源制作灯槽效果
【Simscape】用Simscape实现三维物理仿真（一）——创建一个自由落体小球
仿真文件下载:https://download.csdn.net/download/ReadAir/12230623 准备:MATLAB R2019a 1 打开MATLAB 2 打开Simulink ...
自由运动物体的运动代码
//I/O口以及其他信号啥的 ARCHITECTURE ONE OF SPORTS IS SIGNAL HCNT:STD_LOGIC_VECTOR(0 to 9); SIGNAL VCNT:STD_L ...
canvas笔记-绘制运动小球（落地弹起，遇边回弹）
程序运行截图如下: 就是这个球,遇到底端及左右两边都可以弹源码如下: canvas4.html <!DOCTYPE html> <html lang="en"& ...
学习C语言十天了，我实现了仿真自由落体小球『C/C++图形库EasyX』
文章目录

【案例】自由运动小球

【案例】自由运动小球相关推荐

最新文章

热门文章