<!DOCTYPE html PUBLIC >
<html lang="zh-CN">
<head>
<link href="bootstrap.css" type="text/css" rel="stylesheet" />
<style type="text/css">
#brick-wall{
width: 600px;
height: 500px;
position:relative;
margin:20px auto;
background-color: white;
position:relative;
border: 4px solid black;
box-shadow: 0px 0px 10px #123456;
}
#ball{
width: 20px;
height: 20px;
border-radius: 20px;
background-color: #123456;
position:relative;
}
#holder{
width: 100px;
height: 8px;
background-color: #123456;
position:relative;
}
.brick_1{
width:55px;
height:20px;
background-color: #FC2B06;
position:absolute;
}
.brick_2{
width:55px;
height:20px;
background-color: #FC9206;
position:absolute;
}
.brick_3{
width:55px;
height:20px;
background-color: #FCCA06;
position:absolute;
}
.brick_4{
width:55px;
height:20px;
background-color: #ECFC06;
position:absolute;
}
</style>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="brick-wall">
</div>
</body>
<script src="jquery.js"></script>
<script>
for(var i=1;i<=8;i++){
for(var j=1;j<=9;j++){
var di = document.createElement("div");
di.id="div"+i+"_"+j;
var dom=$(di);
//di.className="brick";
di.style.top = 1.8*i*15-20;
di.style.left= j*65-57;
if(i<=2)
dom. ass("brick_4");
else if(i<=4)
dom.addClass("brick_3");
else if(i<=6)
dom.addClass("brick_2");
else if(i<=8)
dom.addClass("brick_1");
$("#brick-wall").append(di);
}
}
var kflag=false;
var qiu = document.createElement("div");
qiu.id="ball";
qiu.style.top = 450;
qiu.style.left= 280;
$("#brick-wall").append(qiu);
var qiux=280;
var qiuy=450;
var zx=10;
var zy=-10;
var banleft=240;
var rp=setInterval("qiu_move()",60);
var qiu_move= function(){
qiux+=zx;
qiuy+=zy;
qiu.style.left = qiux;
qiu.style.top = qiuy;
if(qiux>=567 || qiux<=0){
zx=-zx;
}
if(qiuy<=0 || qiuy>=450){
zy=-zy;
}
if(qiuy>=450&&(qiux<banleft||qiux>banleft+100)){
clearInterval(rp);
qiu.style.top = 450;
qiu.style.left= 280;
ban.style.top = 450;
ban.style.left= 240;
qiux=280;
qiuy=450;
banleft=240;
kflag=false;
}
else{
loop1:
for(var i=1;i<=8;i++){
for(var j=1;j<=9;j++){
var obj = document.getElementById("div"+i+"_"+j);
var obj_dom=$(obj);
if(obj===null) continue;
var r=10;
var x=obj.style.left;
var y=obj.style.top;
var ranx=parseInt(x);
var rany=parseInt(y);
var ranx_right=ranx+50;
var rany_bottom=rany+20;
if(qiux>=ranx-r && qiux<= ranx_right+r && qiuy>= rany-r && qiuy<= rany_bottom + r ){
var pattern=/\d+/;
var s=obj.className;
var a=s.match(pattern);
if(rany -qiuy <=r && rany-qiuy >=0 || qiuy-rany_bottom<=r && qiuy-rany_bottom >=0){
zy=-zy;
}
if(ranx-qiux <=r && ranx-qiux >=0 || qiux-ranx_right<=r && qiux-ranx_right>=0){
zx=-zx;
}
if (a==1)
obj.remove();
if(a!=1){
obj_dom.removeClass("brick"+"_"+a);
a--;
obj_dom.addClass("brick"+"_"+a);
}
}
}
}
}
};
var ban = document.createElement("div");
ban.id="holder";
ban.style.top = 450;
ban.style.left= 240;
$("#brick-wall").append(ban);
var banleft = 240;
var bs = 25;
var kflag=false;
$(document).keydown(function(e){
var kcode = e.keyCode;
switch(kcode){
case 32: //开始结束
if(!kflag){
qiu_move();
rp=setInterval("qiu_move()",60);
kflag=true;
}
break;
case 37: // left
for(var i = 0;i<bs;i++){
if(banleft-1!=-1){
banleft-=1;
ban.style.left = banleft;
}
}
break;
case 39: // right
for(var i = 0;i<bs;i++){
if(banleft+1!=494){
banleft+=1;
ban.style.left = banleft;
}
}
break;
}
});
</script>
</html>
一个简单的打砖块游戏实现
最新推荐文章于 2024-05-11 17:14:42 发布