Ball & Slider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="grid" id="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="box" id="box">
<div id="ball"></div>
<div id="slider"></div>
</div>
<script src="main.js"></script>
</body>
</html>
---------------------------------------------------
var ball = document.getElementById("ball");
var x=1;
var y=1;
//moving ball
function moveball(){
var leftBall=parseInt(window.getComputedStyle(ball).getPropertyValue("left"));
var topBall=parseInt(window.getComputedStyle(ball).getPropertyValue("top"));
ball.style.left =(leftBall+(10*x))+ "px";
ball.style.top =(topBall-(10*y)) + "px";
}
// changeDirection
function changeDirection(){
var leftBall=parseInt(window.getComputedStyle(ball).getPropertyValue("left"));
var topBall=parseInt(window.getComputedStyle(ball).getPropertyValue("top"));
if(topBall<0 || topBall>innerHeight){
y=-y;
}
else if(leftBall>innerWidth || leftBall<0){
x=-x;
}
}
//start function
function start(){
moveball();
changeDirection();
}
setInterval(start,100);
------------------------------------------body{
background-color: gray;
}
#grid{
}
.grid{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.grid div{
background-color: brown;
width: 10%;
height: 20px;
margin: 20px;
}
#box{
}
.box{
top: 80%;
position: fixed;
left: 40%;
}
#ball{
position: fixed;
width: 30px;
height: 30px;
background-color: black;
border-radius: 50%;
}
#slider{
width: 120px;
height: 20px;
background-color: chartreuse;
position: fixed;
}
Comments
Post a Comment