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

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

17969075ca2705a31a16ae54b880bb9.png

代码如下，复制即可使用：

.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;

}

开始