js点击按钮发射小球
<!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>Document</title>
<style>
.game {
position: relative;
width: 800px;
height: 600px;
border: 1px solid rgb(0, 0, 0);
background-color: rgb(224, 255, 255);
margin: 0 auto;
}
.ball {
position: absolute;
border-radius: 50%;
}
body {
height: 100vh;
}
</style>
</head>
<body>
<button class="fire_but">爱国者导弹</button>
</body>
<script>
var game = document.body;
var fire_but = document.getElementsByClassName("fire_but")[0];
var arr = [];
function createBall() {
var ball = document.createElement("div");
ball.className = "ball";
game.appendChild(ball);
arr.push(ball);
ball.leftVal = 3;
ball.topVal = 3;
ball.style.width = "80px";
ball.style.height = "80px";
ball.style.backgroundColor = runcolor();
}
fire_but.onclick = function () {
createBall();
};
function ballMove() {
for (var i = 0; i < arr.length; i++) {
maxTop = document.body.clientHeight - arr[0].clientHeight;
maxLeft = document.body.clientWidth - arr[0].clientWidth;
var Ball = arr[i],
startL = Ball.offsetLeft,
startT = Ball.offsetTop,
Left = startL + Ball.leftVal,
Top = startT + Ball.topVal;
if (Left >= maxLeft || Left <= 0) {
Ball.leftVal = -Ball.leftVal;
Ball.style.backgroundColor = runcolor();
}
if (Top >= maxTop || Top <= 0) {
Ball.topVal = -Ball.topVal;
Ball.style.backgroundColor = runcolor();
}
Ball.style.top = Top + "px";
Ball.style.left = Left + "px";
}
window.onresize = function () {
maxTop = document.body.clientHeight - arr[0].clientHeight;
maxLeft = document.body.clientWidth - arr[0].clientWidth;
console.log(maxTop);
};
setTimeout(function () {
ballMove();
}, 1);
}
ballMove();
function runcolor() {
var r = Math.floor(Math.random() * 256),
g = Math.floor(Math.random() * 256),
b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</html>