Html5制作超级好玩的弹球游戏

2019-09-10 郑州网站建设  

Html5让游戏制作变得简单,html制作超级好玩的弹球游戏。

代码如下:

<!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">


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1713.html转载请标明出处,谢谢合作!
标签:
  • HTML5
  • HTML
  • 制作
  • 简单
  • 游戏
  • 变得