策略：
1.绘制一张图
2.在途中添加圆球
3.让圆球移动
4.左右移动，小于最左往右移动，大于最右网左移动
5.上下移动，小于top，向下，大于bottom 向上
写这个完全是锻炼游戏思想
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" cnotallow="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" cnotallow="ie=edge">
<title>弹力球游戏</title>
</head>
<style>
body {
margin: 0px;
padding: 0px;
}
.main {
width: 350px;
height: 500px;
position: absolute;
border: 1px solid #000;
margin: 20px;
}
.qq {
top: 30px;
left: 30px;
width: 15px;
height: 15px;
background: #000;
position: absolute;
border-radius: 15px;
}
input{
position:absolute;
margin-top:530px;
margin-left:150px;
}
h3{
margin-left:150px;
}
</style>
<body>
<h3>无线弹力</h3>
<div class="main"></div>
<input type="button" value="加一个球球" notallow="game.addQ();" />
</body>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var game = {
addQ: function () {
$(".main").append("<span class='qq'> </span>");
},
init: function () {
game.addQ();
game.move();
},
move: function () {
window.setInterval(function () {
$(".main span").each(function (k, y) {
if (game.params.arr[k] == undefined) {
game.params.arr.push([true, true]);
}
if (Number($(this).css("left").split("px")[0]) >= 336) {
game.params.arr[k][0] = false;
} else if (Number($(this).css("left").split("px")[0]) <= 0) {
game.params.arr[k][0] = true;
}
if (Number($(this).css("top").split("px")[0]) >= 490) {
game.params.arr[k][1] = false;
} else if (Number($(this).css("top").split("px")[0]) <= 0) {
game.params.arr[k][1] = true;
}
if (game.params.arr[k][0]) {
$(this).css("left", (Number($(this).css("left").split("px")[0]) + 3) + "px");
} else {
$(this).css("left", (Number($(this).css("left").split("px")[0]) - 3) + "px");
}
if (game.params.arr[k][1]) {
$(this).css("top", (Number($(this).css("top").split("px")[0]) + 2) + "px");
} else {
$(this).css("top", (Number($(this).css("top").split("px")[0]) - 2) + "px");
}
});
}, 20);
},
params: {
arr: []
}
}
game.init();
</script>
</html>
ok
持续更新
