今天分享一个自己前几天做的小游戏，是在无参考任何代码的情况下实现的。大概花了几个小時，后来因为出现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, "5b8b4f53", 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- 768px) { 199 #wrap{ 200 width: 320px; 201 height: 480px; 202 left: 50%; 203 margin-left: -160px; 204 } 205 }
Javascript：
1 //获取元素 2 var score = document.getElementById('score'); 3 var time = document.getElementById("time"); 4 var cover = document.getElementById('cover'); 5 var start = document.getElementById("start"); 6 var end = document.getElementById('end'); 7 var beginGame = document.getElementById("beginGame"); 8 var keepPlay = document.getElementById("keepPlay"); 9 var playAgain = document.getElementById('playAgain'); 10 var stopGame = document.getElementById("stopGame"); 11 var myScore = document.getElementById('myScore'); 12 var loading = document.getElementById("loading"); 13 var initScore = 000;//初始分数 14 var showTimer = null;//初始化定时器 15 var hideTimer = null; 16 var imgArr = ["h0","h1","h2","h3","h4","h5","h6","h7","h8","h9","x0","x1","x2","x3","x4","x5","x6","x7","x8","x9"];//图片数组 17 //点击开始 18 beginGame.onclick = beginFn; 19 function beginFn(){ 20 cover.style.display = "none"; 21 start.style.display = "none"; 22 end.style.display = "none"; 23 stopGame.style.display = "block"; 24 setTime();//开启计时器 25 var t1 = 900; //狼出现间隔 26 iniTimer = setInterval( 27 function(){ 28 var roleRan = Math.random(); 29 if(roleRan<0.3){ 30 showWolf("x");//小狼出现几率 31 beatRole("x"); 32 }else{ 33 showWolf("h");//大狼出现几率 34 beatRole("h"); 35 } 36 },t1); 37 } 38 //预加载图片 39 window.onload = loadingFn; 40 function loadingFn(){ 41 var index = 0; 42 for (var i = 0; i < imgArr.length; i++) { 43 var img = new Image(); 44 img.src ="img/" + imgArr[i]+".png"; 45 img.onload = function () { 46 index++; 47 if (index==imgArr.length) { 48 loading.style.display = "none"; 49 start.style.display = "block"; 50 } 51 }; 52 } 53 }; 54 //暂停 55 stopGame.onclick = stopFn; 56 function stopFn(){ 57 clearInterval(Remain); 58 clearInterval(iniTimer); 59 if(!showTimer){//判断是否运行完再清定时器，否则出错，下同 60 clearInterval(showTimer); 61 } 62 if(!hideTimer){ 63 clearInterval(hideTimer); 64 } 65 cover.style.display = "block"; 66 end.style.display = "block"; 67 stopGame.style.display = "none"; 68 myScore.innerHTML = initScore; 69 } 70 //继续游戏 71 keepPlay.onclick = function(){ 72 initFn(); 73 beginFn(); 74 } 75 //清空背景 76 function initFn(){ 77 for(var i= 1;i<10;i++){ 78 var holes = "hole"+i; 79 var holeDiv = document.getElementById(holes); 80 holeDiv.style.background = "none"; 81 } 82 } 83 //重新开始 84 playAgain.onclick = function (){ 85 remainT = 250;//重置时间 86 initScore =000;//重置分数 87 score.innerHTML = initScore; 88 myScore.innerHTML = initScore; 89 initFn(); 90 beginFn(); 91 } 92 //计时器 93 var remainT = 250;//游戏时长 94 function setTime (){ 95 Remain = setInterval(function (){ 96 remainT-=0.05; 97 shortT = remainT.toFixed(2); 98 time.innerHTML = shortT + " 秒"; 99 if(shortT==0){ 100 //结束清空所有定时器 101 clearInterval(Remain); 102 clearInterval(iniTimer); 103 clearInterval(showTimer); 104 clearInterval(hideTimer); 105 cover.style.display = "block"; 106 end.style.display = "block"; 107 } 108 },50); 109 } 110 //击打 111 function beatRole(r){ 112 for(var i= 1;i<10;i++){ 113 var holes = "hole"+i; 114 var holeDiv = document.getElementById(holes); 115 holeDiv.index = 0;//判断是否点击 116 //touch.js，手机上触摸触发事件 117 touch.on(holeDiv, 'tap', function(ev){ 118 if((holeDiv.style.display=="block" || holeDiv.style.background !="none")&& holeDiv.index==0){ 119 for(var j=6;j<10;j++){ 120 holeDiv.style.background = "url(img/" + r + j + ".png)"; 121 } 122 if(r=="h"){//灰太狼 123 initScore += 10; 124 }else if(r=="x" && initScore!=0){//小狼 125 initScore-=10; 126 } 127 score.innerHTML = initScore; 128 this.index=1;//防止重复点击 129 } 130 }); 131 //鼠标点击也可以 132 holeDiv.onclick = function (){ 133 if((this.style.display=="block" || this.style.background !="none")&&this.index==0){ //已显示且背景不为空，和未点击过的 134 for(var j=6;j<10;j++){ 135 this.style.background = "url(img/" + r + j + ".png)"; 136 } 137 if(r=="h"){//灰太狼 138 initScore += 10; 139 }else if(r=="x" && initScore!=0){//小狼 140 initScore-=10; 141 } 142 score.innerHTML = initScore; 143 this.index=1;//防止重复点击 144 } 145 } 146 } 147 } 148 //出现,r代表出现的角色 149 function showWolf(r){ 150 var i = 0; 151 var ranNum = Math.floor(Math.random()*9)+1;//获取1到9的随机数 152 var ranId = "hole" + ranNum ;//divID 153 var showDiv = document.getElementById(ranId); 154 showDiv.style.display = "block"; 155 showTimer = setInterval( 156 function(){ 157 var imgSrc = "url(img/"+ r + i +".png)"; 158 if(i<6){ 159 showDiv.style.background = imgSrc; 160 i++; 161 } 162 if(i==6){ 163 clearInterval(showTimer); 164 hideWolf(); 165 } 166 },30); 167 //隐藏 168 function hideWolf(){ 169 setTimeout( 170 function(){ 171 var j=5; 172 hideTimer = setInterval( 173 function(){ 174 var imgSrc = "url(img/"+ r + j +".png)"; 175 if(j<6){ 176 showDiv.style.background = imgSrc; 177 j--; 178 } 179 if(j<0){ 180 showDiv.style.background = "none"; 181 showDiv.style.display = "none"; 182 clearInterval(hideTimer); 183 } 184 },30); 185 },1000); 186 } 187 188 }
说明： 1、本游戏使用了百度云的touch.js触摸事件库，要引入touch.js文件。在js代码的117行到130行我绑定了手机的tap事件，不需要的可删去；
2、以上代码均为原创，仅供学习与交流。如需转载，请注明作者与出处，谢谢。