<!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>
#box {width: 600px;height: 600px;border: 1px solid;margin: 10px auto;position: relative;}
#ball {width: 20px;height: 20px;border-radius: 50%;background-color: red;position: absolute;left: 280px;bottom: 30px;}
#flap {width: 120px;height: 30px;background-color: cadetblue;position: absolute;bottom: 0;left: 250px;}
#block div {width: 118px;height: 20px;border: 1px solid;float: left;}
</style>
<script>
window.onload = function(){
var ball = document.getElementById('ball');
var flap = document.getElementById('flap');
var speedX = parseInt(Math.random()*4)+3;
var speedY = parseInt(Math.random()*5)+3;
setInterval(function(){
//ball and blocks
if(ball.offsetTop<0){
speedY *= -1;
}
if(ball.offsetTop>580){
window.location.reload();
// alert('gameover');
}
if(ball.offsetLeft<0||ball.offsetLeft>580){
speedX *= -1;
}
var blocks = block.getElementsByTagName('div');
for(var a=0;a<blocks.length;a++){
if(crash(ball,blocks[a])){
block.removeChild(blocks[a]);
speedY *= -1;
}
}
if(crash(ball,flap)){
speedY *= -1;
}
//创建固定位置
for(var a=0;a<blocks.length;a++){
blocks[a].style.left = blocks[a].offsetLeft+'px';
blocks[a].style.top = blocks[a].offsetTop+'px';
}
for(var a=0;a<blocks.length;a++){
blocks[a].style.position = 'absolute';
}
ball.style.left = ball.offsetLeft +speedX +'px';
ball.style.top = ball.offsetTop +speedY +'px';
},50);
/* 鼠标滑动
flap.onmousedown = Move;
document.onmouseup = function(){
document.onmousemove = null;
} */
// 按键
var speed = null;
document.onkeydown = function(ev){
console.log(ev.keyCode);
if(ev.keyCode == 39){
speed = 25;
flap.style.left = flap.offsetLeft +speed+'px';
}
if(ev.keyCode == 37){
speed = -25;
flap.style.left = flap.offsetLeft +speed+'px';
}
}
//创建砖块
createDiv(60);
//判定碰撞
}
//flap Move
function Move(ev){
var box = document.getElementById('box');
var offsetX = ev.clientX - flap.offsetLeft ;
document.onmousemove = function(ev){
var l = ev.clientX - offsetX;
if(l<0){
l = 0;
}
if(l>480){
l = 480;
}
flap.style.left = l+'px';
}
}
function createDiv(n){
for(var a=0;a<n;a++){
var div = document.createElement('div');
div.style.backgroundColor = 'rgb('+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+','+parseInt(Math.random()*256)+')';
block.appendChild(div);
}
}
function crash(obj1,obj2){
var l1 = obj1.offsetLeft;
var r1 = obj1.offsetLeft +obj1.offsetWidth;
var t1 = obj1.offsetTop;
var b1 = obj1.offsetTop + obj1.offsetHeight;
var l2 = obj2.offsetLeft;
var r2 = obj2.offsetLeft +obj2.offsetWidth;
var t2 = obj2.offsetTop;
var b2 = obj2.offsetTop + obj2.offsetHeight;
if(l1>r2||r1<l2||t1>b2||b1<t2){
// l1>r2||l2>r1||t1>b2||b1<t2
return false;
}else{
return true;
}
}
</script>
</head>
<body style="background-color: burlywood;">
<div id="box">
<div id="block">
</div>
<div id="ball"></div>
<div id="flap"></div>
</div>
</body>
</html>
View Code
碰撞 就是两个物体之间上下左右不能右接触