使用html+css+js实现弹球游戏
代码如下，复制即可使用：
<!doctype html><head> <style type="text/css"> .panel{ position: relative; z-index: 0; top:0px; left: 400px; width: 300px; height: 500px; } .console{ position: absolute; z-index: 1; top:0; left:0; width:100%; height: 40px; background-color: #bbb; } .message{ position: absolute; z-index: 1; top:40px; left:0; width:100%; height: 460px; color: white; font-size: 50px; text-align: center; line-height: 460px; background-color: #999; } .start,.score,.pause{ position: 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,#4ca8ff,yellow); } .start{ left: 0px; } .score{ left:100px; background-color: red; } .pause{ left:200px; } .start:after,.pause:before{ content: ""; position: absolute; z-index: 2; top: 0; width: 3px; height: 100%; background: -webkit-linear-gradient(top,#666,#999); } .start:after{ left: 97px; } .pause:before{ left: 0px; } .start:hover,.pause:hover{ cursor: pointer; background: -webkit-linear-gradient(top,#4ca8ff,red); } .panel span{ position: absolute; z-index: 0; top:50%; left: 50%; font-size: 50px; color: blue; } .ball,.secondball{ position:absolute; z-index: 2; border-radius:50%; width: 20px; height: 20px; } .ball{ top: 460px; left:140px; background-color: red; } .secondball{ top: 40px; left:140px; background-color: red; } .plate{ position: absolute; top:480px; left: 100px; z-index: 2; width: 100px; height: 20px; background-color: #e5e5e5; } .promte{ margin-top: 20px; text-align: center; } </style></head><body> <div id="panel" class="panel"> <div class="console"> <div id="start" class="start">开始</div> <div id="score" class="score">0</div> <div id="pause" class="pause">暂停</div> </div> <div id="message" class="message"></div> <div id="ball" class="ball"></div> <div id="plate" class="plate"></div> </div> <div class="promte">提示：键盘左右箭头控制滑板</div> <script type="text/javascript"> (function(){ document.onkeydown = function(e){ var e = e || window.event; if(e.keycode == 37){ //键盘向左键 platemove("left"); }else if(e.keycode == 39){ //键盘向右键 platemove("right"); } } })(); var panel = document.getelementbyid("panel"), message = document.getelementbyid("message"), plate = document.getelementbyid("plate"), ball = document.getelementbyid("ball"), start = document.getelementbyid("start"), score = document.getelementbyid("score"), pause = document.getelementbyid("pause"), secondball; var startgame, x = x2 = -1, y = y2 = -1, speed = 1, positionarr = [], pauseactive = false, //一个标志：表示难度是否还能增加 flag = true, //球的起始位置 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("click",pauseclick,false); }else if(window.attachevent){ start.attachevent("onclik",startclick); pause.attachevent("onclik",pauseclick); }else{ start.onclik = startclick; pause.onclik = pauseclick; } } function platemove(direction){ if(direction == "left"){ if(plate.offsetleft > 0){ plate.style.left = (plate.offsetleft-30 < 0? 0 : plate.offsetleft-30)+"px"; } } if(direction == "right"){ if(plate.offsetleft < 200){ plate.style.left = (plate.offsetleft+30 > 200? 200 : plate.offsetleft+30)+"px"; } } } function startclick(){ if(!pauseactive){ resetgame(); }else{ pauseactive = !pauseactive; } startgame = setinterval(function(){ //console.log(ballx+"======"+bally); positionarr = setposition(ballx,bally,true); if(positionarr == "gameover"){ return; } ballx = positionarr[0]; bally = positionarr[1]; //设置球的位置 ball.style.left = ballx+"px"; ball.style.top = bally+"px"; if(!flag){ positionarr = setposition(secondballx,secondbally,false); secondballx = positionarr[0]; secondbally = positionarr[1]; secondball.style.left = secondballx+"px"; secondball.style.top = secondbally+"px"; }else{ adddifficulty(); } },30); } function pauseclick(){ pauseactive = true; clearinterval(startgame); } function resetgame(){ clearinterval(startgame); message.innerhtml=""; score.innerhtml="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="none"; secondball.style.left = "140px"; secondball.style.top = "40px"; } } function adddifficulty(){ if(parseint(score.innerhtml) > 500 && parseint(score.innerhtml) < 2000){ speed = 1.2; }else if(parseint(score.innerhtml) > 2000 && parseint(score.innerhtml) < 5000){ speed = 1.5; }else if(parseint(score.innerhtml) > 5000){ if(typeof secondball != "undefined"){ secondball.style.display=""; }else{ secondball = document.createelement('div'); } secondball.classname = 'secondball'; panel.appendchild(secondball); secondballx = secondball.offsetleft; secondbally = secondball.offsettop; flag = false; } } function setposition(_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 == maxy){ //判断挡板的位置是不是在球的范围内 if(plate.offsetleft > _x || (plate.offsetleft + plate.offsetwidth) < _x){ clearinterval(startgame); message.innerhtml="gameover"; return "gameover"; } } if(firstball){ _x+=4*x*speed; _y+=5*y*speed; }else{ _x+=4*x2*speed; _y+=5*y2*speed; } //边界处理 _x = _x < minx? minx : _x; _x = _x > maxx? maxx : _x; _y = _y < miny? miny : _y; _y = _y > maxy? maxy : _y; //设置分数 score.innerhtml=parseint(score.innerhtml)+10*speed; return [_x,_y]; } </script></body></html>
如果您有更好的方法或更多的功能，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！
更多编程相关内容，请关注编程入门栏目！
以上就是使用html+css+js实现弹球游戏的详细内容。