今天分享一个自己前几天做的小游戏，是在无参考任何代码的情况下实现的。大概花了几个小時，后来因为出现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 }
展开CSS
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、以上代码均为原创，仅供学习与交流。如需转载，请注明作者与出处，谢谢。
时间： 2024-08-30 01:28:27