今天分享一个自己前几天做的小游戏，是在无参考任何代码的情况下实现的。大概花了几个小時，后来因为出现bug和修改样式适应移动端等，就磕磕碰碰又搞了半天。虽然这些不是很难，但是发现做小游戏挺有趣的。比做网页有意思多了，IE你滚￣□￣｜｜
游戏截图：
HTML：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta content="width=device-width,user-scalable=no" name="viewport" id="viewport"> 6 <link rel="stylesheet" type="text/css" href="css/main.css"/> 7 <title></title> 8 </head> 9 <body> 10 <div id="wrap"> 11 <div id="score">000</div> 12 <div id="time">250.00 秒</div> 13 <div id="hole1" class="holes"></div> 14 <div id="hole2" class="holes"></div> 15 <div id="hole3" class="holes"></div> 16 <div id="hole4" class="holes"></div> 17 <div id="hole5" class="holes"></div> 18 <div id="hole6" class="holes"></div> 19 <div id="hole7" class="holes"></div> 20 <div id="hole8" class="holes"></div> 21 <div id="hole9" class="holes"></div> 22 <!--开始覆盖--> 23 <div id="cover"></div> 24 <div id="loading"> 25 <img src="img/loading.gif" alt="" /> 26 </div> 27 <div id="start"> 28 <button id="beginGame">开始游戏</button> 29 </div> 30 <div id="end"> 31 <div class="end_txt">GAME OVER！</div> 32 <div class="end_score"> 33 你的得分是：<span id="myScore"></span> 34 </div> 35 <div class="end_btns"> 36 <button id="playAgain">重新开始</button> 37 <button id="keepPlay">继续游戏</button> 38 </div> 39 </div> 40 <button id="stopGame">暂停游戏</button> 41 </div> 42 43 <script src="js/main.js" type="text/javascript" charset="utf-8"></script> 44 <script src="js/touch.js" type="text/javascript" charset="utf-8"></script> 45 </body> 46 </html>
CSS：
1 body,ul,li,input,button,img{ 2 padding: 0; 3 margin: 0; 4 } 5 html,body{ 6 height: 100%; 7 width: 100%; 8 } 9 body{ 10 background: #f06060; 11 font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; 12 } 13 img{ 14 border: none; 15 } 16 li{ 17 list-style: none; 18 } 19 a{ 20 text-decoration: none; 21 } 22 a:hover { 23 text-decoration: underline; 24 } 25 button{ 26 border: none; 27 outline: none; 28 cursor: pointer; 29 border-radius: 5%; 30 background: #F06060; 31 color: #fff; 32 } 33 /*wrap*/ 34 #wrap{ 35 position: relative; 36 left: 0; 37 top: 0; 38 width: 100%; 39 height: 100%; 40 background: url(../img/game_bg.jpg) no-repeat; 41 background-size:100% 100%; 42 } 43 #cover{ 44 position: absolute; 45 width: 100%; 46 height: 100%; 47 background: #000; 48 opacity: 0.6; 49 z-index: 20; 50 left: 0; 51 top: 0; 52 } 53 #loading { 54 position: absolute; 55 width: 10%; 56 left: 45%; 57 top: 46.666%; 58 z-index: 30; 59 } 60 #loading img{ 61 width: 100%; 62 } 63 #start { 64 display: none; 65 position: absolute; 66 width: 30%; 67 height:6%; 68 left:35%; 69 top: 47%; 70 z-index: 30; 71 } 72 #beginGame{ 73 width: 100%; 74 height: 100%; 75 font-size: 1.2em; 76 line-height: 2; 77 } 78 #stopGame{ 79 display: none; 80 position: absolute; 81 left: 35%; 82 bottom: 2%; 83 width: 30%; 84 height: 6%; 85 font-size: 1.2em; 86 line-height: 2; 87 } 88 #end{ 89 display: none; 90 position: absolute; 91 width: 50%; 92 height: 30%; 93 left: 25%; 94 top: 35%; 95 z-index: 40; 96 } 97 #beginGame:hover{ 98 background: #fa6a6a; 99 } 100 .holes{ 101 display: none; 102 cursor: pointer; 103 } 104 .end_txt{ 105 text-align: center; 106 height: 20%; 107 line-height: 1; 108 font-size: 1.8em; 109 font-weight: bold; 110 color: #F06060; 111 } 112 .end_score{ 113 height:20%; 114 width: 90%; 115 padding-left: 10%; 116 line-height: 1.5; 117 color: #fff; 118 margin-top: 10%; 119 } 120 .end_btns{ 121 width: 100%; 122 height: 20%; 123 margin-top: 10%; 124 } 125 .end_btns button{ 126 height: 100%; 127 width: 45%; 128 line-height: 2.4; 129 } 130 .end_btns button:hover{ 131 background: #fa6a6a; 132 } 133 #playAgain{ 134 margin-right: 5%; 135 } 136 #score{ 137 position: absolute; 138 color: #fff; 139 font-size: 1.43em; 140 top: 0; 141 width: 80%; 142 left: 20%; 143 height: 9.17%; 144 line-height: 2.564; 145 } 146 #time{ 147 color: #fff; 148 font-size: 1.17em; 149 width: 72%; 150 left: 28%; 151 line-height: 1.426; 152 height: 4.17%; 153 position: absolute; 154 top: 13.3%; 155 } 156 .holes{ 157 width: 33.75%; 158 height: 21.04%; 159 position: absolute; 160 } 161 #hole1{ 162 left: 30%; 163 top: 23.96%; 164 } 165 #hole2{ 166 left: 5%; 167 top:33.33%; 168 } 169 #hole3{ 170 left: 58.13%; 171 top: 29.58%; 172 } 173 #hole4{ 174 left: 4.875%; 175 top: 45.83%; 176 } 177 #hole5{ 178 left: 31.875%; 179 top: 39.583%; 180 } 181 #hole6{ 182 left: 61.875%; 183 top:43.75%; 184 } 185 #hole7{ 186 left: 8.75%; 187 top: 61.042%; 188 } 189 #hole8{ 190 left: 36.25%; 191 top: 56.67%; 192 } 193 #hole9{ 194 left: 63.75%; 195 top: 61.458%; 196 } 197 198 @media screen and (min-width: 768px) { 199 #wrap{ 200 width: 320px; 201 height: 480px; 202 left: 50%; 203 margin-left: -160px; 204 } 205 }