您的位置：首页 > Web前端 > JavaScript
Js版游戏打砖块源代码详细

2013-08-29 22:09 274 查看
详细开发过程见下文
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>qqqun.21.777.12</title>
<style>
#mainDiv div{
width:28px;height:13px;background-color:blue;position:absolute;
}
</style>
<script>
/**
*Author:撞墙的哈维；
*QQ群：2177712
*转载请注明出处及详细开发过程 blog.csdn.net/uucai
*/
var $ = function (id) {//方便按id提取
return document.getElementById(id);
};

var zdivs = new Array();//用于存储所有的砖块div

window.onload=function(){
var x =150;var y = 15;
var m = $("mainDiv");

for(var i=1;i<=9;i++){

for(var j=0;j<i;j++){
var di = document.createElement("div");
di.style.top = y+(i-1)*15;
di.style.left= x-i*15+j*30;
m.appendChild(di);

var di1 = document.createElement("div");
di1.style.top = y+(i-1)*15;
di1.style.left= x+300-i*15+j*30;
m.appendChild(di1);

zdivs[zdivs.length]=di;
zdivs[zdivs.length]=di1;
}

}

for(var i=1;i<=10;i++){
var di = document.createElement("div");
di.style.top = y+150+(i-1)*15;
di.style.left= x-15;
m.appendChild(di);

var di1 = document.createElement("div");
di1.style.top = y+150+(i-1)*15;
di1.style.left= x-15+300;
m.appendChild(di1);

zdivs[zdivs.length]=di;
zdivs[zdivs.length]=di1;
}

for(var i=1;i<=9;i++){
for(var j=0;j<i*2;j++){
var di = document.createElement("div");
di.style.top = y+450-(i-1)*15;
di.style.left= x+150-i*30+j*30;
m.appendChild(di);

zdivs[zdivs.length]=di;
}
}

}

var qx = 295;//飞球初始坐标left
var qy = 580;//飞球初始坐标top
var jiao = 89;//初始飞行角度
var zx = 1;//控制left位移的正负
var zy = -1;//控制top位移的正负
var rp = null;//控制游戏进程

var qx1=0;
var qy1=0;

function go(){
var qiu = $("qiuDiv");

qx = qx +zx*Math.cos((2*Math.PI/360)*jiao);
qy = qy +zy*Math.sin((2*Math.PI/360)*jiao);

if(qy>=580){
if(qx<bangleft||qx>bangleft+150){//判断是否接住
clearTimeout(rp);
}else{
zy=-1;
if((qx-bangleft)>(75)){
jiao = 90-(qx-bangleft+10-75)/75*90;
zx = 1;
}else{
jiao = 90 - (75-(qx-bangleft+10))/75*90;
zx=-1;
}
rp = setTimeout("go()",1);
}
}else{if(qy<=480)
for(var i=0,m = zdivs.length ;i<m;i++){
var io = checkIsP(qx,qy,zdivs[i].offsetLeft,zdivs[i].offsetTop);

if(io!=0){

zdivs[i].style.display = "none";
zdivs.splice(i,1);
if(io==1){
zx=1;
}
if(io==2){
zx=-1;
}
if(io==3){
zy=1;
}
if(io==4){
zy=-1;
}
break;
}
}

if(qx>=600)zx=-1;
if(qx<=0)zx=1;
if(qy<=0)zy=1;
qiu.style.left = qx+"px";
qiu.style.top = qy+"px";
if(zdivs.length!=0)//如果砖块未打完
rp = setTimeout("go()",1);
}
}

function checkIsP(qx,qy,zx,zy){
var f = {
x:qx,
y:qy,
x1:qx+10,
y1:qy+10
}
var z = {
x:zx,
y:zy,
x1:zx+30,
y1:zy+15
}
var sx;var sy;
sx = f.x>=z.x?f.x:z.x;
sy = f.y>=z.y?f.y:z.y;
if(sx >= f.x && sx <= f.x1 && sy >= f.y && sy <= f.y1 && sx >= z.x && sx <= z.x1 && sy >= z.y && sy <= z.y1){

return seSmall(Math.abs(f.x-z.x1),Math.abs(f.x1-z.x),Math.abs(f.y-z.y1),Math.abs(f.y1-z.y));

}else{
return 0;
}
}

function seSmall(a,b,c,d){

if(a<b&&a<c&&a<d){
return 1;
}
if(b<a&&b<c&&b<d){
return 2;
}
if(c<a&&c<b&&c<d){
return 3;
}
if(d<b&&d<c&&d<a){
return 4;
}
}

var bangleft = 225;
var qiuleft = 295;
var bs = 10;//棒的移动频率
var kflag =  false;
//键盘处理事件
function keydownEvent(event){
if(event.keyCode==32){//如果是空格
if(!kflag)
go()
kflag = true;
}

var qiu = $("qiuDiv");
var bang = $("bangDiv");
if(event.keyCode==37){//如果是左箭头
for(var i = 0;i<bs;i++){
if(bangleft-1!=0){
bangleft-=1;
bang.style.left = bangleft+"px";
if(!kflag){
qiuleft-=1;
qx-=1;
qiu.style.left = qiuleft+"px";
}
}
}
}
if(event.keyCode==39){//如果是右箭头
for(var i = 0;i<bs;i++){
if(bangleft+1!=450){
bangleft+=1;
bang.style.left = bangleft+"px";
if(!kflag){
qiuleft+=1;
qx+=1;
qiu.style.left = qiuleft+"px";
}
}
}
}

}
</script>
</head>
<body style="background-color:grey;" onkeydown="keydownEvent(event)">
<div align="center">
<div style="width:600px;height:600px;background-color:#BFEFFF;border:5px groove #87CEFA;position:relative;" id="mainDiv">
<div id="qiuDiv" style="width:10px;height:10px;top:580;left:295;background-color:red;"></div>
<div id="bangDiv" style="width:150px;height:10px;bottom:1;left:225;background-color:black;"></div>
</div>
</div>
<body>
</html>
Java学习交流群： 2177712
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签： JavaScript 游戏实例打砖块
相关文章推荐
新的分享
章节导航