前言
本次我们要来完成javascript中小球碰撞的效果,代码特别简单,让我们一起来看一下吧!
一、页面基本结构( html 和 css)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
//页面初始化
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
//设置一个区域,让小球在里面弹
.box{
width: 80%;
height: 720px;
margin: 50px auto;
border: 2px solid #ccc;
background-color: #Fff;
position: relative;
}
//做一个小球
.boll{
width: 70px;
height: 70px;
border-radius: 50%;
background-color: teal;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<div class="boll"></div>
</div>
</body>
</html>
基本结构就两个div,是不是特别简单
二、js代码
<script>
//获取刚才的两个div,一个是区域盒子,一个是小球
var box = document.querySelector('.box');
var boll = document.querySelector('.boll');
//页面加载完毕后执行bollMove函数
window.onload = bollMove;
function bollMove(){
//设置一个不间断执行的计时器
setInterval( move,10 )
//声明两个变量,用来控制小球的水平移动 和 垂直移动
var juliX = 0;
var juliY = 0;
//再声明两个变量,当做开关,让小球在碰壁后回弹
var Lft = true;
var Rgt = true;
//声明一个函数,里面就是小球运动的主要逻辑,此函数会被上边的计时器不间断运行
function move(){
//判断向右移动的开关是否为true
if( Lft ){
//默认值是true,执行以下代码,控制水平移动的变量,值增加。
juliX += 10;
//把变量赋值给小球的left,别忘了加'px',这样小球的位置就会发生变化,开始移动。
boll.style.left = juliX + 'px';
//判断小球水平移动距离是否贴边,也就是是否到达临界值
if( juliX >= box.clientWidth - boll.clientWidth ){
//如果条件成立,开关变为false,执行向左移动的逻辑
Lft = false;
}
//如果向右开关变为false,则会执行else里的逻辑,逻辑跟上边的逻辑基本一样
//只不过控制水平移动变为了减值
}else{
juliX -= 10;
boll.style.left = juliX + 'px';
if( juliX <= 0 ){
Lft = true;
}
}
//小球垂直方向的移动,逻辑同上
if( Rgt ){
juliY += 10;
boll.style.top = juliY + 'px';
if( juliY >= box.clientHeight - boll.clientHeight ){
Rgt = false;
}
}else{
juliY -= 10;
boll.style.top = juliY + 'px';
if( juliY <= 0 ){
Rgt = true;
}
}
}
}
</script>
总结
碰壁反弹的逻辑并不复杂,完成这样效果的方法也是多种多样,这里也是给大家提供一个思路。
小球移动并不困难,关键是在处理临界值,也就是小球移动到边界的逻辑处理,解决好临界值问题,这样类似的简单小逻辑,也就难不倒你了。