练习要求：创建 100以内(也不要太多)的随机个数的 大小不等的 颜色随机的泡泡 速度不同 对窗口有碰撞反应 泡泡之间 无需 碰撞反应
小球运动
思路：
第一步：写好css和html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.ball{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 10px 30px red inset;
}
.small{
position: absolute;
top: 20%;
left: 15%;
width: 30%;
height: 10%;
border-radius: 50%;
background: #fff;
transform: rotate(-35deg);
opacity: 0.4;
}
</style>
</head>
<body>
<div class="container">
<!-- 可以先不注释，等写好第四步（创建好了生成的随机个小球再注释） -->
<div class="ball">
<div class="small">
</div>
</div>
</div>
</body>第二步：封装一个生成随机数的方法
// 封装一个随机数
function randomNum(min,max){
return Math.floor(Math.random()*(max+1-min)+min);
}第三步：获取包裹所有小球的最外层div和当前浏览器的宽高
<div class="container">
<!-- <div class="ball">
<div class="small">
</div>
</div> -->
</div>
let container = document.querySelector(".container") //获取节点
,browerWidth = document.documentElement.clientWidth //获取页面的宽度
,browerHeight = document.documentElement.clientHeight //获取页面的高度
;
第四步：写一个在当前窗口大小上生成随机个小球（创建随机个节点）、随机大小、随机颜色、随机速度的函数
// 球的动画
function ballAnimation(){
let frag = document.createDocumentFragment() //创建一个文档碎片（仓库）
,ballNum = randomNum(10,50) // 获取10-100内随机个泡泡
,ballTop //球距离顶部最大值
,ballLeft //球距离最左边最大值
;
for(let i = 0;i<=ballNum;i++){ //每一次循环创建一个球节点（ball节点）（创建一i个小球）
let ball = document.createElement("div")
,small = document.createElement("div")
,posX //创建当前球的随机x轴的位置的变量
,posY //创建当前球的随机Y轴的位置的变量
,ballSize //创建球的随机大小的变量
,ballColor //创建球的随机颜色的变量
,ballSpeedX //创建球在X轴上的随机速度和方向的变量
,ballSpeedY //创建球在Y轴上的随机速度和方向的变量
,arr = [-1,1]; //使用数组来保存 -1，1 随机获取 -1，1 来随机方向 randomNum(0,1) 来获取数组下标
;
//为节点添加类
ball.classList.add("ball");
small.classList.add("small");
ballSize = randomNum(50,100) //获取球的随机大小（宽高）
ballColor = `rgb(${randomNum(131,255)},${randomNum(67,205)},${randomNum(100,180)})`; //获取球随机颜色
ballLeft = browerWidth - ballSize; //浏览器宽度 - 球宽度 = 球距离最左边最大值
ballTop = browerHeight - ballSize; // 浏览器高度 - 球高度 = 球距离最顶部最大值
posX = randomNum(0,ballLeft) //获取当前球的随机x轴的位置 随机数的范围在 0~球距离最左边最大值
posY = randomNum(0,ballTop) //获取当前球的随机Y轴的位置 随机数的范围在 0~球距离最顶部最大值
ball.style.boxShadow = `0px ${ballSize * 0.1}px ${ballSize * 0.3}px ${ballColor} inset`; //设置当前节点的阴影
ball.style.width = ballSize +"px"; //设置添加的节点的宽
ball.style.height = ballSize + "px";//设置添加的节点的高
// 球出现的初始位置
ball.style.left = posX + "px";
ball.style.top = posY + "px";
ball.appendChild(small);
frag.appendChild(ball);
ballSpeedX = randomNum(1,4)*arr[randomNum(0,1)]; //获取球在X轴上运动的随机速度和方向
ballSpeedY = randomNum(1,6)*arr[randomNum(0,1)]; //获取球在Y轴上运动的随机速度和方向
// 必须写在下面，因为写在上面的时候，这些变量都没赋值（undefined）
let obj = {
ballTop, //这样的写法等同于 "ballTop":ballTop 属性名是字符串ballTop，属性值是ballTop变量 当属性名和变量名一样时就这样简写
ballLeft,
ball,
posX,
posY,
ballSize,
ballColor,
ballSpeedX,
ballSpeedY
}
// 执行第五步：球运动起来的函数
ballRun(obj); //把obj对象传过去
}
container.appendChild(frag); //将创建的元素节点一口气添加
}
ballAnimation(); //执行这个函数第五步：创建让球运动起来的函数
// 运动起来的函数
function ballRun(obj){ //用函数套起run函数来，因为把变量写在外面，比写在里面节省性能，因为一个球的run函数在一直执行，写在里面就每执行一次就创建一下把变量
// 解构赋值
let {
ballTop,
ballLeft,
ball,
posX,
posY,
ballSize,
ballColor,
ballSpeedX,
ballSpeedY
} = obj;
function run(){
posX += ballSpeedX;
posY += ballSpeedY;
// 到页面窗口发生变化时，更新一下 ballLeft ballTop 运动范围
ballLeft = browerWidth - ballSize; //浏览器宽度 - 球宽度 = 球距离最左边最大值
ballTop = browerHeight - ballSize; // 浏览器高度 - 球高度 = 球距离最顶部最大值
if(posX >= ballLeft || posX<=0){
// 把pox设置为临界值
// posX = Math.min(posX,ballLeft);
// posX = Math.max(0,posX); 简写如下
posX = Math.max(0,Math.min(posX,ballLeft));
ballSpeedX = -ballSpeedX; //运动方向取反
ballColor = `rgb(${randomNum(131,255)},${randomNum(67,205)},${randomNum(100,180)})`; //获取球随机颜色
ball.style.boxShadow = `0px ${ballSize * 0.1}px ${ballSize * 0.3}px ${ballColor} inset`; //设置当前节点的阴影
}
if(posY >= ballTop || posY<=0){
// 把pox设置为临界值
// posY = Math.min(posY,ballTop);
// posY = Math.max(0,posY); 简写如下
posY = Math.max(0,Math.min(posY,ballTop));
ballSpeedY = -ballSpeedY; //运动方向取反
ballColor = `rgb(${randomNum(131,255)},${randomNum(67,205)},${randomNum(100,180)})`; //获取球随机颜色
ball.style.boxShadow = `0px ${ballSize * 0.1}px ${ballSize * 0.3}px ${ballColor} inset`; //设置当前节点的阴影
}
ball.style.left = posX + "px";
ball.style.top = posY + "px";
requestAnimationFrame(run); //请求动画帧，可以让这个run函数一直执行
}
run();
}总代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.ball{
position: absolute;
width: 100px;
height: 100px;
border-radius: 50%;
box-shadow: 0 10px 30px red inset;
}
.small{
position: absolute;
top: 20%;
left: 15%;
width: 30%;
height: 10%;
border-radius: 50%;
background: #fff;
transform: rotate(-35deg);
opacity: 0.4;
}
</style>
</head>
<body>
<div class="container">
<!-- <div class="ball">
<div class="small">
</div>
</div> -->
</div>
</body>
<script>
let container = document.querySelector(".container") //获取节点
,browerWidth = document.documentElement.clientWidth //获取页面的宽度
,browerHeight = document.documentElement.clientHeight //获取页面的高度
;
// 窗口监听（窗口调整大小时触发事件）
window.onresize = ()=>{
browerWidth = document.documentElement.clientWidth; //获取页面的宽度
browerHeight = document.documentElement.clientHeight; //获取页面的高度
}
// 球的动画
function ballAnimation(){
let frag = document.createDocumentFragment() //创建一个文档碎片（仓库）
,ballNum = randomNum(10,50) // 获取10-100内随机个泡泡
,ballTop //球距离顶部最大值
,ballLeft //球距离最左边最大值
;
for(let i = 0;i<=ballNum;i++){ //每一次循环创建一个球节点（ball节点）
let ball = document.createElement("div")
,small = document.createElement("div")
,posX //创建当前球的随机x轴的位置的变量
,posY //创建当前球的随机Y轴的位置的变量
,ballSize //创建球的随机大小的变量
,ballColor //创建球的随机颜色的变量
,ballSpeedX //创建球在X轴上的随机速度和方向的变量
,ballSpeedY //创建球在Y轴上的随机速度和方向的变量
,arr = [-1,1]; //使用数组来保存 -1，1 随机获取 -1，1 来随机方向 randomNum(0,1) 来获取数组下标
;
ball.classList.add("ball");
small.classList.add("small");
ballSize = randomNum(50,100) //获取球的随机大小（宽高）
ballColor = `rgb(${randomNum(131,255)},${randomNum(67,205)},${randomNum(100,180)})`; //获取球随机颜色
ballLeft = browerWidth - ballSize; //浏览器宽度 - 球宽度 = 球距离最左边最大值
ballTop = browerHeight - ballSize; // 浏览器高度 - 球高度 = 球距离最顶部最大值
posX = randomNum(0,ballLeft) //获取当前球的随机x轴的位置 随机数的范围在 0~球距离最左边最大值
posY = randomNum(0,ballTop) //获取当前球的随机Y轴的位置 随机数的范围在 0~球距离最顶部最大值
ball.style.boxShadow = `0px ${ballSize * 0.1}px ${ballSize * 0.3}px ${ballColor} inset`; //设置当前节点的阴影
ball.style.width = ballSize +"px"; //设置添加的节点的宽
ball.style.height = ballSize + "px";//设置添加的节点的高
// 球出现的初始位置
ball.style.left = posX + "px";
ball.style.top = posY + "px";
ball.appendChild(small);
frag.appendChild(ball);
ballSpeedX = randomNum(1,4)*arr[randomNum(0,1)]; //获取球在X轴上运动的随机速度和方向
ballSpeedY = randomNum(1,6)*arr[randomNum(0,1)]; //获取球在Y轴上运动的随机速度和方向
// 必须写在下面，因为写在上面的时候，这些变量都没赋值（undefined）
let obj = {
ballTop, //这样的写法等同于 "ballTop":ballTop 属性名是字符串ballTop，属性值是ballTop变量 当属性名和变量名一样时就这样简写
ballLeft,
ball,
posX,
posY,
ballSize,
ballColor,
ballSpeedX,
ballSpeedY
}
// 球运动起来的函数
ballRun(obj); //把obj对象传过去
}
container.appendChild(frag); //将创建的元素节点一口气添加
}
ballAnimation();
// 封装一个随机数
function randomNum(min,max){
return Math.floor(Math.random()*(max+1-min)+min);
}
// 运动起来的函数
function ballRun(obj){ //用函数套起run函数来，因为把变量写在外面，比写在里面节省性能，因为一个球的run函数在一直执行，写在里面就每执行一次就创建一下把变量
// 解构赋值
let {
ballTop,
ballLeft,
ball,
posX,
posY,
ballSize,
ballColor,
ballSpeedX,
ballSpeedY
} = obj;
function run(){
posX += ballSpeedX;
posY += ballSpeedY;
// 到页面窗口发生变化时，更新一下 ballLeft ballTop 运动范围
ballLeft = browerWidth - ballSize; //浏览器宽度 - 球宽度 = 球距离最左边最大值
ballTop = browerHeight - ballSize; // 浏览器高度 - 球高度 = 球距离最顶部最大值
if(posX >= ballLeft || posX<=0){
// 把pox设置为临界值
// posX = Math.min(posX,ballLeft);
// posX = Math.max(0,posX); 简写如下
posX = Math.max(0,Math.min(posX,ballLeft));
ballSpeedX = -ballSpeedX; //运动方向取反
ballColor = `rgb(${randomNum(131,255)},${randomNum(67,205)},${randomNum(100,180)})`; //获取球随机颜色
ball.style.boxShadow = `0px ${ballSize * 0.1}px ${ballSize * 0.3}px ${ballColor} inset`; //设置当前节点的阴影
}
if(posY >= ballTop || posY<=0){
// 把pox设置为临界值
// posY = Math.min(posY,ballTop);
// posY = Math.max(0,posY); 简写如下
posY = Math.max(0,Math.min(posY,ballTop));
ballSpeedY = -ballSpeedY; //运动方向取反
ballColor = `rgb(${randomNum(131,255)},${randomNum(67,205)},${randomNum(100,180)})`; //获取球随机颜色
ball.style.boxShadow = `0px ${ballSize * 0.1}px ${ballSize * 0.3}px ${ballColor} inset`; //设置当前节点的阴影
}
ball.style.left = posX + "px";
ball.style.top = posY + "px";
requestAnimationFrame(run); //请求动画帧
}
run();
}
</script>
</html>
969
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
