原生js写篮球的运动轨迹！

最新推荐文章于 2023-07-05 21:16:43 发布

Absolon_

最新推荐文章于 2023-07-05 21:16:43 发布

阅读量1.4k

点赞数 1

分类专栏：原生js 原生js操作文章标签：原生js篮球运动轨迹原生js

本文链接：https://blog.csdn.net/Absolon_/article/details/87717370

版权

原生js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

原生js操作

3 篇文章 0 订阅

订阅专栏

首先写css样式

html,body,#box{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #app{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: url('./img/timg.jpg');
            background-size:100% 100%;
            border-radius: 50% 
        }

html 布局简单布局
<divid=“box”>
<divid=“app”></ div>
</ div>
重点 js代码

window.onload = function () {
			// js 第一步先获取元素
            var oApp = document.getElementById('app');
            var oWidth = document.documentElement.clientWidth-100;
            var oHeight = document.documentElement.clientHeight-100;
            // 设置一个开关，防止点击两次
            var flog = true;
            //事件绑定到body
            document.body.onclick = function (){ 
            // 开关为 true的时候执行函数
                if(flog){
                   drag();
                }
                flog = false;
            }

                function drag(){
                //开始 left top都是为0的  创建一个对象 x 为left y为 top；
                    var arr ={
                                x:0,
                                y:0,
                                oSeedx:ran(-5,5),//left 随机的运动方向 
                                oSeedy:ran(-5,5);//top 随机的运动方向
                            };
                    setInterval(() => {
                        arr.y+=arr.oSeedy;
                        arr.x+=arr.oSeedx;
                        // 当left的值小于0的，就数去屏幕了 所以把oSeedx的值 乘以-1 正的就便成负的 负的话就便成正的
                            if(arr.x<=0){
                                arr.x = 0;
                                arr.oSeedx *=-1;
                            }
                            if(arr.y <= 0){
                                arr.y = 0;
                                arr.oSeedy *= -1;
                            }
                            if(arr.x >=oWidth ){
                                arr.x = oWidth;
                                arr.oSeedx *= -1
                            }
                            if(arr.y >= oHeight){
                                arr.y = oHeight;
                                arr.oSeedy *=-1;
                            }
                        //把每次改变后的值 添加到盒子里
                       oApp.style.top = arr.y +'px';
                       oApp.style.left = arr.x +'px'; 
                    } , 30)
                }
			
			// 随机数的函数
            function ran(m,n){
                return parseInt(Math.random()*(m-n)+n);
            }
        }

全部代码

<!DOCTYPE html >
<html lang="en">
<head>
    <style>
        html,body,#box{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #app{
            width: 100px;
            height: 100px;
            position: absolute;
            top: 0;
            left: 0;
            background: url('./img/timg.jpg');
            background-size:100% 100%;
            border-radius: 50% 
        }
    </style>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload = function () {
            var oApp = document.getElementById('app');
            var oWidth = document.documentElement.clientWidth-100;
            var oHeight = document.documentElement.clientHeight-100;
            var flog = true;
            document.body.onclick = function (){ 
                if(flog){
                   drag()
                }
                flog = false;
            }

                function drag(){
                    var arr ={
                                x:0,
                                y:0,
                                oSeedx:ran(-5,5),
                                oSeedy:ran(-5,5)
                            };
                    setInterval(() => {
                        arr.y+=arr.oSeedy;
                        arr.x+=arr.oSeedx;
                            if(arr.x<=0){
                                arr.x = 0;
                                arr.oSeedx *=-1;
                            }
                            if(arr.y <= 0){
                                arr.y = 0;
                                arr.oSeedy *= -1;
                            }
                            if(arr.x >=oWidth ){
                                arr.x = oWidth;
                                arr.oSeedx *= -1
                            }
                            if(arr.y >= oHeight){
                                arr.y = oHeight;
                                arr.oSeedy *=-1;
                            }
                        
                       oApp.style.top = arr.y +'px';
                       oApp.style.left = arr.x +'px'; 
                    } , 30)
                }

            function ran(m,n){
                return parseInt(Math.random()*(m-n)+n);
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <div id="app"></div>
    </div>
</body>
</html>

本文章为个人写的没有转载！！！！

Absolon_

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js写篮球的运动轨迹！

首先写css样式html,body,#box{width: 100%;height: 100%;margin: 0;padding: 0;}#app{width: 100px;height: 100px;position: absolute;top: 0;left: 0;background: url(’./img/timg.jpg’);background-size:...
复制链接

扫一扫