Html5制作超級好玩的彈球游戲

1、html5制作超級好玩的彈球游戲html5讓嬉戲制作變得容易，html制作超級有趣的彈球嬉戲。代碼如下： .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; l

2、eft: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:

3、-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); .sta

4、rt: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:5

5、0%; 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: cen

6、ter; 開頭 0 暫停 提醒：鍵盤左右箭頭控制滑板 (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"), m

7、essage = document.getelementbyid("message"), plate = document.getelementbyid("plate"), ball = document.getelementbyid("ball"), start = document.getelementbyid("start"), score = document.getelementbyid("score"),

8、 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, m

9、iny = 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) sta

10、rt.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.off

11、setleft-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 = &am

12、p;quot;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 = positionar

13、r1; 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="&quo

14、t; 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; /其次個球設置躲藏

15、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 && parse

16、int(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