飞舞的小球
程序员文章站
2022-03-03 22:33:49
...
<!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 + 左右padding
clientHeight 垂直方向 height + 上下padding
offsetWidth 水平方向 width + 左右padding + 左右border-width
offsetHeight 垂直方向 height + 上下padding + 上下border-width
scrollWidth 元素内容真实的宽度,内容不超出盒子高度时为盒子的clientWidth
scrollHeight 元素内容真实的高度,内容不超出盒子高度时为盒子的clientHeight
offsetTop 获取当前元素到 定位父节点 的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>