js碰壁反弹，小球碰撞，代码超级简单

扼流挽

于 2024-04-20 09:17:06 发布

阅读量234

点赞数 3

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/Zbz00720/article/details/137987452

版权

本文介绍了如何通过简单的HTML和CSS创建页面结构，然后利用JavaScript编写代码实现小球在区域内碰撞反弹的效果，重点讲解了小球移动的逻辑和处理边界条件的方法。

摘要由CSDN通过智能技术生成

文章目录

前言
一、页面基本结构( html 和 css)
二、js代码
总结

前言

本次我们要来完成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>

总结

碰壁反弹的逻辑并不复杂，完成这样效果的方法也是多种多样，这里也是给大家提供一个思路。
小球移动并不困难，关键是在处理临界值，也就是小球移动到边界的逻辑处理，解决好临界值问题，这样类似的简单小逻辑，也就难不倒你了。

扼流挽

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js碰壁反弹，小球碰撞，代码超级简单

本次我们要来完成javascript中小球碰撞的效果，代码特别简单，让我们一起来看一下吧！碰壁反弹的逻辑并不复杂，完成这样效果的方法也是多种多样，这里也是给大家提供一个思路。小球移动并不困难，关键是在处理临界值，也就是小球移动到边界的逻辑处理，解决好临界值问题，这样类似的简单小逻辑，也就难不倒你了。
复制链接

扫一扫