使用html+css+js实现弹球游戏

1、使用html+css+js实现弹球游戏用法html+css+js实现弹球嬉戏17969075ca2705a31a16ae54b880bb9.png代码如下，复制即可用法：.panelposition:relative;z-index:0;top:0px;left:400px;width:300px;height:500px;.consoleposition:absolute;z-index:1;top:0;left:0;width:100%;height:40px;background-color:bbb;.messageposition:absolute;z-index:1;top:40px

2、;left:0;width:100%;height:460px;color:white;font-size:50px;text-align:center;line-height:460px;background-color:999;.start,.score,.pauseposition:absolute;z-index:2;top:0;width:100px;height:100%;font-size:large;color:white;text-align:center;line-height:40px;background:-webkit-linear-gradient(top,4ca8

3、ff,yellow);.startleft:0px;.scoreleft:100px;background-color:red;.pauseleft:200px;.start:after,.pause:beforecontent:""position:absolute;z-index:2;top:0;width:3px;height:100%;background:-webkit-linear-gradient(top,666,999);.start:afterleft:97px;.pause:beforeleft:0px;.start:hover,.pau

4、se:hovercursor:pointer;background:-webkit-linear-gradient(top,4ca8ff,red);.panelspanposition:absolute;z-index:0;top:50%;left:50%;font-size:50px;color:blue;.ball,.secondballposition:absolute;z-index:2;border-radius:50%;width:20px;height:20px;.balltop:460px;left:140px;background-color:red;.secondballt

5、op:40px;left:140px;background-color:red;.plateposition:absolute;top:480px;left:100px;z-index:2;width:100px;height:20px;background-color:e5e5e5;.promtemargin-top:20px;text-align:center;开头0暂停提醒：键盘左右箭头控制滑板(function()document.onkeydown=function(e)vare=e|window.event;if(e.keycode=37)/键盘向左键platemove(&

6、quot;left");elseif(e.keycode=39)/键盘向右键platemove("right");)();varpanel=document.getelementbyid("panel"),message=document.getelementbyid("message"),plate=document.getelementbyid("plate"),ball=document.getelementbyid(&

7、quot;ball"),start=document.getelementbyid("start"),score=document.getelementbyid("score"),pause=document.getelementbyid("pause"),secondball;varstartgame,x=x2=-1,y=y2=-1,speed=1,positionarr=,pauseactive=false,/一个标记：表示难度是否还能增强flag=true,/球的

8、起始位置ballx,bally,secondballx,secondbally,/边界minx=0,maxx=panel.offsetwidth-ball.offsetwidth,miny=40;maxy=panel.offsetheight-ball.offsetheight-plate.offsetheight;window.onload=function()if(window.addeventlistener)start.addeventlistener("click",startclick,false);pause.addeventlistener(

9、"click",pauseclick,false);elseif(window.attachevent)start.attachevent("onclik",startclick);pause.attachevent("onclik",pauseclick);elsestart.onclik=startclick;pause.onclik=pauseclick;functionplatemove(direction)if(direction="left&quot

10、;)if(plate.offsetleft>0)plate.style.left=(plate.offsetleft-30200?200:plate.offsetleft+30)+"px"functionstartclick()if(!pauseactive)resetgame();elsepauseactive=!pauseactive;startgame=setinterval(function()/console.log(ballx+"="+bally);positionarr=setposition(ball

11、x,bally,true);if(positionarr="gameover")return;ballx=positionarr0;bally=positionarr1;/设置球的位置ball.style.left=ballx+"px"ball.style.top=bally+"px"if(!flag)positionarr=setposition(secondballx,secondbally,false);secondballx=positionarr0;secondbally=po

12、sitionarr1;secondball.style.left=secondballx+"px"secondball.style.top=secondbally+"px"elseadddifficulty();,30);functionpauseclick()pauseactive=true;clearinterval(startgame);functionresetgame()clearinterval(startgame);message.innerhtml=""score.inn

13、erhtml="0"ball.style.left="140px"ball.style.top="460px"plate.style.left="100px"plate.style.top="480px"ballx=ball.offsetleft;bally=ball.offsettop;speed=1;flag=true;/其次个球设置躲藏if(secondball)secondball.style.display

14、="none"secondball.style.left="140px"secondball.style.top="40px"functionadddifficulty()if(parseint(score.innerhtml)>500&&parseint(score.innerhtml)2000&&parseint(score.innerhtml)5000)if(typeofsecondball!=&quot

15、;undefined")secondball.style.display=""elsesecondball=document.createelement(&39;div&39;);secondball.classname=&39;secondball&39;panel.appendchild(secondball);secondballx=secondball.offsetleft;secondbally=secondball.offsettop;flag=false;functionsetposition(_x,_y,firstball)if(_x=minx|_x=maxx)/x*=-1;firstball?x*=-1:x2*=-1;if(_y=miny|_y=maxy)/y*=-1;firstball?y*=-1:y2*=-1;if(_y=m