使用html+css+js实现弹球游戏
17969075ca2705a31a16ae54b880bb9.png
代码如下，复制即可使用：
<!doctypehtml>
<head>
<styletype="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);
}
.panelspan{
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>
<divid="panel"class="panel">
<divclass="console">
<divid="start"class="start">开始</div>
<divid="score"class="score">0</div>
<divid="pause"class="pause">暂停</div>
</div>
<divid="message"class="message"></div>
<divid="ball"class="ball"></div>
<divid="plate"class="plate"></div>
</div>
<divclass="promte">提示：键盘左右箭头控制滑板</div>
<scripttype="text/javascript">
(function(){
document.onkeydown=function(e){
vare=e||window.event;
if(e.keyCode==37){
//键盘向左键
plateMove("left");
}elseif(e.keyCode==39){
//键盘向右键
plateMove("right");
}
}
})();
varpanel=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;
varstartGame,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);
}elseif(window.attachEvent){
start.attachEvent("onclik",startClick);
pause.attachEvent("onclik",pauseClick);
}else{
start.onclik=startClick;
pause.onclik=pauseClick;
}
}
functionplateMove(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";
}
}
}
functionstartClick(){
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);
}
functionpauseClick(){
pauseActive=true;
clearInterval(startGame);
}
functionresetGame(){
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";
}
}
functionaddDifficulty(){
if(parseInt(score.innerHTML)>500&&parseInt(score.innerHTML)<2000){
speed=1.2;
}elseif(parseInt(score.innerHTML)>2000&&parseInt(score.innerHTML)<5000){
speed=1.5;
}elseif(parseInt(score.innerHTML)>5000){
if(typeofsecondBall!="undefined"){
secondBall.style.display="";
}else{
secondBall=document.createElement('div');
}
secondBall.className='secondBall';
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==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>
如果您有更好的方法或更多的功能，可以和我们大家一起分享哦，如有错误，欢迎联系我改正，非常感谢！！！
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/w3c/w56056.shtml
