Home > Developer > Web Develop
First, the body of the content: Create a large div block, which contains two elements, is two div fast as a wall and blood trough
<body>
<div id= "Wrap" >
<div id= "Wall" ></div>
<div id= "Blood" ></div>
</div>
</body>
Two. is the style in CSS
*{
margin:0;
padding:0;
}
#wrap {
width:800px;
height:300px;
BORDER:1PX solid black;
position:relative;
margin:50px Auto;
}
#wall {
width:50px;
height:100px;
background:red;
Position:absolute;
top:100px;
right:50px;
}
#blood {
width:10px;
height:100px;
BORDER:1PX solid black;
background:red;
Box-sizing:border-box;
Position:absolute;
top:100px;
right:30px;
}
#ball {
width:30px;
height:30px;
Background:purple;
border-radius:50%;
Position:absolute;
top:135px;
left:0;
}
. sblood{
width:10px;
height:10px;
background:red;
BORDER:1PX solid black;
Box-sizing:border-box;
}
Three. The code in JS
<script type= "Text/javascript" >
var wrap = document.getElementById (' wrap ');
var wall = document.getElementById (' wall ');
var blood = document.getElementById (' blood ');
Blood
var Sblood;
for (Var i=0;i<10;i++) {
Sblood = document.createelement (' div ');
Sblood.classname = ' Sblood ';
Blood.appendchild (Sblood);
}
Wall.blood = 10;
Create a small ball
function Createball () {
var ball = document.createelement (' div ');
ball.id = ' Ball ';
Wrap.appendchild (ball);
var timer = null;
var offvalue = Ball.offsetleft;
Ball.move = function () {
Timer = setinterval (function () {
Offvalue + = 10;
Ball.style.left = offvalue+ ' px ';
Judging whether to wall
if (Offvalue >= wall.offsetleft-ball.offsetwidth) {
wall.blood--;
if (wall.blood>=0) {
blood.childnodes[10-wall.blood-1].style.opacity = 0;
Ball.clear ();
}
if (wall.blood<=0) {
Wall.remove ();
Blood.remove ();
}
}
When the wall is not there, it will hit.
if (Offvalue >= wrap.offsetwidth-ball.offsetwidth) {
Ball.clear ();
}
},10);
}
Ball.clear = function () {
Ball.remove ();
Clearinterval (timer);
}
Ball.move ();
}
Wrap.onclick = function () {
Createball ();
}
</script>
JS about the ball wall wall problem
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
