<style>
#box{
height:600px;
width:600px;
border:1px solid #ccc;
margin:0 auto;
position:relative;
}
#ball{
width:20px;
height:20px;
border:1px solid #ccc;
border-radius:50%;
background:red;
position:absolute;
bottom:30px;
left:300px;
}
#bat{
width:100px;
height:20px;
background:hotpink;
position:absolute;
bottom:0;
left:250px;
}
#brick div{
width:98px;
height:18px;
border:1px solid #ccc;
float:left
}
</style>
<div id="box">
<div id="ball"/>
<div id="bat"/>
<div id="brick"/>
</div>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById("box");
var oBall = document.getElementById("ball");
var oBat = document.getElementById("bat");
var oBrick = document.getElementById("brick")
var oBricks = oBrick.getElementsByTagName("div")
dragX(oBat)
createBrick(60);
//
var speedx = parseInt(Math.random() * 4) + 3;
var speedy = -(parseInt(Math.random() * 3) + 5);
setInterval(function Fn(){
oBall.style.left = oBall.offsetLeft + speedx + "px";
oBall.style.top = oBall.offsetTop + speedy + "px";
if(oBall.offsetLeft >= 580 || oBall.offsetLeft<= 0){
speedx *= -1;
}
if( oBall.offsetTop<= 0){
speedy *= -1;
}
if(oBall.offsetTop >= 580){
alert("GAME OVER")
window.location.reload()
}
// ，
if(Konck(oBall,oBat)){
speedy *= -1;
}
//
for(var i = 0;i<oBricks.length;i++){
if(Konck(oBricks[i],oBall)){
speedy *= -1;
oBrick.removeChild(oBricks[i]);
break;
}
}
},30);
function dragX(node){
node.onmousedown = function(ev){
var e = ev || window.event
var offsetX = e.clientX - node.offsetLeft
document.onmousemove = function(ev){
var e = ev || window.event;
var l = e.clientX - offsetX;
if(l<=0){
l = 0
}
if(l>=500){
l = 500
}
node.style.left = l + "px"
}
document.onmouseup = function(){
document.onmousemove = null
}
}
}
function createBrick(n){
var oBrick = document.getElementById("brick")
for(var i = 0; i<n;i++){
var node = document.createElement("div")
node.style.background = RndomColor()
oBrick.appendChild(node);
}
var oBricks = oBrick.getElementsByTagName("div")
for(var i = 0;i<oBricks.length;i++){
oBricks[i].style.left = oBricks[i].offsetLeft + "px";
oBricks[i].style.top = oBricks[i].offsetTop + "px"
}
for(var i = 0;i<oBricks.length;i++){
oBricks[i].style.position = "absolute"
}
}
function RndomColor(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
return "rgb("+r+","+g+","+b+")";
}
function Konck(node1,node2){
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop + node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop + node2.offsetHeight;
if(l2>r1 || r2 < l1 || t2 > b1 || b2 < t1){
return false;
}else{
return true;
}
}
}
</script>
</code></pre>
</div>
</div>
</div>
</div>