Js版遊戲打磚塊原始碼詳細
阿新 • • 發佈：2019-02-07
詳細開發過程見下文
<!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