1.分析游戏设置基本样式
HTML结构:
<div id="div1">
<div id="ball"></div>
<div id="bat"></div>
<div id="brick">
</div>
</div>
CSS基本样式设置:
#div1{width: 600px;height: 600px;border: 1px black solid;position: relative;margin: 20px auto;}
#ball{width: 20px;height: 20px;background-color: red;border-radius:50%;position: absolute;bottom: 30px;left: 290px;}
#bat{width: 100px;height: 30px;background-color: blue;position: absolute;bottom: 0px;left: 250px;}
#brick div{width: 98px;height: 18px;border: 1px black solid;float: left;}
2.小球,地板的基本运动
1.
//让小球可以水平方向运动,随机一个速度
speedX=parseInt(Math.random()*4)+3;
//让小球可以垂直方向运动,随机一个速度
speedY=-(parseInt(Math.random()*3+5));
//底部滑块的拖拽 拖拽三剑客的结构
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;
}
}
3.创建砖块,n个
注意:我们在设置样式时将砖块的样式设置为水平浮动,所以在我们打击后消失一个砖块,会出现补齐的效果,为了改变这个效果。我们需要使用文档流的转换。
文档流的转换
相对定位 转 绝对定位 (消失后的砖块,不会在浮动)
function createBrick(n){
var oBrick = document.getElementById("brick");
for(var i = 0;i<n;i++){
var node = document.createElement("div");
node.style.backgroundColor=randomColor();
oBrick.appendChild(node);
}
//相对定位,转绝对定位,1.给每一个砖块的坐标定位
var aBricks =oBrick.getElementsByTagName('div');
for(var i = 0; i<aBricks.length ;i++){
aBricks[i].style.left = aBricks[i].offsetLeft + 'px';
aBricks[i].style.top =aBricks[i].offsetTop +'px';
}
//2.将每一个砖块的浮动定位改成绝对定位
for(var i = 0;i<aBricks.length;i++){
aBricks[i].style.position = 'absolute';
}
}
function randomColor(){
var str = "rgba("+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+1+")";
return str ;
}
4.碰撞的效果
碰撞函数:
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;
}
}
碰撞检测
1.小球与拍子
2.小球与砖块
*/
//1.小球与拍子
if(konck(oDiv2,oBat)){
speedY *=-1;
}
//小球与砖块碰撞
for(var i = 0;i<aBricks.length;i++){
if(konck(oDiv2,aBricks[i])){
speedY *=-1;
//砖块被销毁掉
oBrick.removeChild(aBricks[i]);
break
}
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1{width: 600px;height: 600px;border: 1px black solid;position: relative;margin: 20px auto;}
#ball{width: 20px;height: 20px;background-color: red;border-radius:50%;position: absolute;bottom: 30px;left: 290px;}
#bat{width: 100px;height: 30px;background-color: blue;position: absolute;bottom: 0px;left: 250px;}
#brick div{width: 98px;height: 18px;border: 1px black solid;float: left;}
</style>
<script>
window.onload = function(){
var begin = confirm('是否开始游戏');
if(begin){
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("ball");
var oBat =document.getElementById('bat');
var oBrick = document.getElementById("brick");
var aBricks = oBrick.getElementsByTagName('div');
dragX(oBat);
createBrick(60);
//让小球可以水平方向运动,随机一个速度
speedX=parseInt(Math.random()*4)+3;
//让小球可以垂直方向运动,随机一个速度
speedY=-(parseInt(Math.random()*3+5));
timer=setInterval(function(){
oDiv2.style.left = oDiv2.offsetLeft+speedX +"px";
oDiv2.style.top = oDiv2.offsetTop +speedY+'px';
if(oDiv2.offsetLeft >= 580 ||oDiv2.offsetLeft <=0){
speedX =speedX*-1;
}
if(oDiv2.offsetTop <=0){
speedY =speedY*-1;
}
if(oDiv2.offsetTop >= 580){
alert("GAME OVER");
clearInterval(timer);
window.location.reload();
}
/*
碰撞检测
1.小球与拍子
2.小球与砖块
*/
//1.小球与拍子
if(konck(oDiv2,oBat)){
speedY *=-1;
}
//小球与砖块碰撞
for(var i = 0;i<aBricks.length;i++){
if(konck(oDiv2,aBricks[i])){
speedY *=-1;
//砖块被销毁掉
oBrick.removeChild(aBricks[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;
}
}
//创建砖块,n个
/*
文档流的转换
相对定位 转 绝对定位 (消失后的砖块,不会在浮动)
*/
function createBrick(n){
var oBrick = document.getElementById("brick");
for(var i = 0;i<n;i++){
var node = document.createElement("div");
node.style.backgroundColor=randomColor();
oBrick.appendChild(node);
}
//相对定位,转绝对定位,1.给每一个砖块的坐标定位
var aBricks =oBrick.getElementsByTagName('div');
for(var i = 0; i<aBricks.length ;i++){
aBricks[i].style.left = aBricks[i].offsetLeft + 'px';
aBricks[i].style.top =aBricks[i].offsetTop +'px';
}
//2.将每一个砖块的浮动定位改成绝对定位
for(var i = 0;i<aBricks.length;i++){
aBricks[i].style.position = 'absolute';
}
}
function randomColor(){
var str = "rgba("+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+ parseInt(Math.random()*256)+","+1+")";
return str ;
}
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>
</head>
<body>
<div id="div1">
<div id="ball"></div>
<div id="bat"></div>
<div id="brick">
</div>
</div>
</body>
</html>