收藏
PHPz批改状态：合格
老师批语：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>飞舞的小球</title></head><style>*{margin:0;padding: 0;}html,body{width: 100%;height: 100%;position: relative;}.desktop{width: 1200px;height: 700px;position: absolute;top: calc(50% - 350px);left: calc(50% - 600px);/*background-color: wheat;*/display: flex;justify-content: space-between;flex-direction: column;align-items: center;}button{margin: 0 auto;background-color: white;width: 80px;height: 50px;border-radius: 5px;box-shadow: 0 5px 5px #dbdbdb;}button:hover{background-color: darkred;color: white;}.game_desktop{width: 95%;height: 95%;border-radius: 18px;background-color: wheat;box-shadow: 0 30px 30px #666666 ;margin: 10px 0 10px 0;position: relative;}.ball{position: absolute;border-radius: 50%;}</style><body><!--clientWidth 水平方向 width + 左右paddingclientHeight 垂直方向 height + 上下paddingoffsetWidth 水平方向 width + 左右padding + 左右border-widthoffsetHeight 垂直方向 height + 上下padding + 上下border-widthscrollWidth 元素内容真实的宽度，内容不超出盒子高度时为盒子的clientWidthscrollHeight 元素内容真实的高度，内容不超出盒子高度时为盒子的clientHeightoffsetTop 获取当前元素到 定位父节点 的top方向的距离offsetLeft 获取当前元素到 定位父节点 的left方向的距离--><div id="desktop" class="desktop"><button onclick="begin()">点击开始</button><div class="game_desktop" id="game_desktop"></div></div></body><script>var desktop= document.getElementById("desktop");var game_desktop= document.getElementById("game_desktop");var game_clintWith = game_desktop.clientWidth - 10 ;var game_clintHeight = game_desktop.clientHeight - 10;//设置垂直位置//设置垂直移动速度var i=0;//设置执行速度var z =100;function begin() {createBall();var ballid= "ball"+i;var ball = document.getElementById(ballid);var radius = parseInt(ball.style.width.substr(0,ball.style.width.indexOf('px')));//设置水平/垂直位置 保持和生成泡泡的位置一致var x = radius + game_clintWith * 0.5;var y = radius + game_clintHeight * 0.5;//设置随机方向var lr = Math.random() < 0.5 ? -1*Math.random() : Math.random() ;//设置移动速度var sy=lr * Math.ceil(10*Math.random());var sx =lr * Math.ceil(10*Math.random());setInterval(function () {x += sx;y += sy;ball.style.left= x + 'px';ball.style.top = y + 'px';var balloffsetTop=ball.offsetTop;var balloffsetleft=ball.offsetLeft;if(balloffsetTop >= game_clintHeight- radius || balloffsetTop <=0 ){sy = -sy;}if( balloffsetleft >= game_clintWith- radius || balloffsetleft <=0){sx = -sx;}if(ball.style.marginLeft === '0px'){sx = -sx;}},z);}function createBall() {var ids= 'ball' + ++i ;var newBall = document.createElement("div");var clolor=['0','red','green','blue',"#666666","#555222","#252525","pink","yellow","#909090","#121212"];var ballColor=clolor[Math.ceil(10*Math.random())];var ballWh=Math.ceil(5*Math.random())*Math.ceil(15*Math.random());if(ballWh<10){ballWh *= 10;}newBall.className="ball";newBall.style.backgroundColor=ballColor;newBall.style.width= ballWh + 'px';newBall.style.height= ballWh + 'px';newBall.style.top= ballWh + game_clintHeight * 0.5 + 'px';newBall.style.left= ballWh + game_clintWith * 0.5 + 'px';newBall.id=ids;game_desktop.append(newBall)}</script></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
