[模仿]html5游戏_别踩白块

最新推荐文章于 2021-06-22 14:19:25 发布

望星辰1988

最新推荐文章于 2021-06-22 14:19:25 发布

阅读量1.3k

点赞数

本文链接：https://blog.youkuaiyun.com/wangxsh42/article/details/43310531

版权

模仿app游戏别踩白块的一个简单游戏功能

发现自己在手机浏览器兼容或是理解方面还有很多不足

0.一开始用chrome的模拟器和UCWeb测试，都没有问题，但是。。。

1.在android 3.2 默认浏览器里，Canvas有时会被选中。。。

2.在android 4.1 默认浏览器里，第一次开始游戏后，会有个闪屏。。。

需要用fillRect重新刷一下

截图：

代码

html:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="description" content="An HTML5 canvas game.">
 6         <meta name="keywords" content="html5, canvas, web, game">
 7         <meta name="author" content="Wang Xin Sheng">
 8         <meta name="apple-mobile-web-app-capable" content="yes">
 9         <meta name="apple-mobile-web-app-status-bar-style" content="black">
10         <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">
11         <meta http-equiv="X-UA-Compatible" content="chrome=1">
12         <meta http-equiv="Pragma" content="no-cache">
13         <meta http-equiv="Cache-Control" content="no-cache">
14         <meta equiv="Expires" content="0">
15         <meta http-equiv="content-script-type" content="text/javascript">
16         <title>别踩白块</title>
17         <script src="requestNextAnimationFrame.js"></script>
18         <style type="text/css">
19          html {color:#000;background:#222;margin:0px;}
20          body {-webkit-user-select:none;margin:0 auto;}
21         #world{cursor:pointer;background:#111;border:6px #333333 solid;}
22         #btn_start{width:100%;color:red;font-size:25px;font-weight:bold;z-index:999;}
23         </style>
24     </head>
25     <body>
26     <section>
27         <div style='position:absolute;left:0px;top:0px;' id='btn_start'>由 WangXinsheng 创建<br />点击底部黑块开始游戏<br/>30秒内成功点击黑块超过120块</div>
28         <canvas id="world" width="900" height="550" style="position: absolute; left: 0px; top: 0px;">
29             <p>You need a <a href="http://www.google.com/chrome">modern browser</a> to view this.</p>
30         </canvas>
31         <!--<artical id = 'worldOut'></artical>-->
32     </section>
33     </body>
34     <script src="CGM007.js"></script>
35 </html>

CGM007.js:

  1 ;
  2 BlackWorld = new
  3 function(){
  4     function doResize() {
  5         caW = v ? window.innerWidth: 400;
  6         caH = v ? window.innerHeight: 600;
  7         caObj.width = caW;
  8         caObj.height = caH;
  9         var caL = (window.innerWidth - caW) * 0.5,
 10         caT = (window.innerHeight - caH) * 0.5;
 11         caObj.style.position = "absolute";
 12         caObj.style.left = caL + "px";
 13         caObj.style.top = caT +"px";
 14         cellW = caW / colC;
 15         cellH = caH / rowC;
 16         downSpeed = cellH * 0.4  +0.5;
 17         //downSpeed = 10;
 18         curOffset = -cellH;
 19         if(!v){
 20             caObjWOffset =parseFloat(caObj.style.left.replace("px",""));
 21             caObjHOffset = parseFloat(caObj.style.top.replace("px",""));
 22         }
 23     }
 24     function ca_click(e){
 25         e.preventDefault();
 26         //document.getElementById('btn_start').innerHTML="btnstart" + new Date();
 27         if (e.touches.length == 1) {
 28             e.stopPropagation();
 29             if(isStart && canTouch){
 30                 var x = e.touches[0].pageX;
 31                 var y = e.touches[0].pageY;
 32                 var right = false;
 33                 var row = allRow[1];
 34                 for(var i=0;i<row.length;i++){
 35                     if(
 36                         row[i].position.c * cellW <= x &&
 37                         (row[i].position.c+1) * cellW >= x
 38                     ){
 39                         if(row[i].isNeedClick){
 40                             right = true;
 41                             row[i].color = "lightblue";
 42                             goodJump++;
 43                         }else{
 44                             row[i].color = "pink";
 45                             downSpeed = cellH * 0.4  +0.5;
 46                             errorTime++;
 47                         }
 48                         break;
 49                     }
 50                 }
 51                 if(right){
 52                     canGoOn=true;
 53                     canTouch=false;
 54                 }
 55             }else if(!isStart && !haveRest){
 56                 var x = e.touches[0].pageX;
 57                 var y = e.touches[0].pageY;
 58                 var right = false;
 59                 var row = allRow[1];
 60                 for(var i=0;i<row.length;i++){
 61                 //console.log(row[i].position.c * cellW,(row[i].position.c+1) * cellW,x,row[i].isNeedClick );
 62                     if(
 63                         row[i].position.c * cellW <= x &&
 64                         (row[i].position.c+1) * cellW >= x
 65                     ){
 66                         if(row[i].isNeedClick){
 67                             right = true;
 68                             row[i].color = "lightblue";
 69                             goodJump++;
 70                         }
 71                         break;
 72                     }
 73                 }
 74                 if(right){
 75                     isStart=true;
 76                     canGoOn=true;
 77                     canTouch = true;
 78                     var now = (+new Date);
 79                     startTime = now;
 80                     lastFpsUpdateTime = now;
 81                 }
 82             }
 83         }
 84             //e.preventDefault();
 85         e.stopPropagation();
 86     }
 87     function ca_click2(e){
 88         e.preventDefault();
 89         //e.stopPropagation();
 90         if(!v && isStart && canTouch){
 91             var x = e.pageX - caObjWOffset;
 92             var y = e.pageY - caObjHOffset;
 93             var right = false;
 94             var row = allRow[1];
 95             for(var i=0;i<row.length;i++){
 96                 if(
 97                     row[i].position.c * cellW <= x &&
 98                     (row[i].position.c+1) * cellW >= x
 99                 ){
100                     if(row[i].isNeedClick){
101                         right = true;
102                         row[i].color = "lightblue";
103                         goodJump++;
104                     }else{
105                         row[i].color = "pink";
106                         downSpeed = cellH * 0.4  +0.5;
107                         errorTime++;
108                     }
109                     break;
110                 }
111             }
112             if(right){
113                 canGoOn=true;
114                 canTouch=false;
115             }
116         }else if(!v && !isStart && !haveRest){
117             var x = e.pageX - caObjWOffset;
118             var y = e.pageY - caObjHOffset;
119             var right = false;
120             var row = allRow[1];
121             for(var i=0;i<row.length;i++){
122             //console.log(row[i].position.c * cellW,(row[i].position.c+1) * cellW,x,row[i].isNeedClick );
123                 if(
124                     row[i].position.c * cellW <= x &&
125                     (row[i].position.c+1) * cellW >= x
126                 ){
127                     if(row[i].isNeedClick){
128                         right = true;
129                         row[i].color = "lightblue";
130                         goodJump++;
131                     }
132                     break;
133                 }
134             }
135             if(right){
136                 isStart=true;
137                 canGoOn=true;
138                 canTouch = true;
139                 var now = (+new Date);
140                 startTime = now;
141                 lastFpsUpdateTime = now;
142             }
143         }
144             //e.preventDefault();
145         e.stopPropagation();
146     }
147     function doDraw(){
148         ctxtObj.clearRect(0, 0, caObj.width, caObj.height);
149         var curOff = curOffset;
150         for(var i=0;i<allRow.length;i++){
151             for(var j=0;j<allRow[i].length;j++){
152                 ctxtObj.beginPath();
153                 ctxtObj.fillStyle = allRow[i][j].color;
154                 if(!isStart && i==0)
155                 {
156                     ctxtObj.fillStyle = "yellow";
157                 }
158                 ctxtObj.fillRect(j*cellW,(rC-i)*cellH+curOff+0.5,cellW,cellH); 
159                 //ctxtObj.strokeStyle = "#0000ff";
160 ctxtObj.strokeRect(j*cellW+0.5,(rC-i)*cellH+curOff+0.5,cellW-1,cellH-1);
161             }
162         }
163         if((curOffset+downSpeed)>=0){
164             if(canGoOn){
165                 allRow.splice(0,1);
166                 curOffset = -cellH;
167                 isStart=true;
168                 doGenData(false);
169                 canGoOn=false;
170                 canTouch=true;
171                 downSpeed=(downSpeed + 1)>=cellH*0.4?cellH*0.4:(downSpeed + 1);
172             }
173         }else{
174             curOffset += downSpeed;
175         }
176     }
177     function animate(time){
178         if(isStart){
179             var hasTime = (timeDeadLine-Math.round(((new Date).getTime() - startTime) / 1E3 * 100) / 100);
180             hasTime = Math.round(hasTime*100)/100
181             hasTime =hasTime<0?0:hasTime
182             btn_start.innerHTML="跨越: "+goodJump +" 块<br />剩余时间: "+ hasTime + " 秒<br />剩余机会:"+(bigError-errorTime+0)+" 次";
183             if(errorTime>=bigError || hasTime<=0){
184                 isStart=false;
185                 btn_start.innerHTML+="<br />点击底部黑块重新开始<br /><div style='color:white;background-color:"+(goodJump>=winCount?"red":(goodJump>=normalCount?"green":(goodJump<=lostCount?"gray":"green")))+";font-size:40px;'>"+(goodJump>=winCount?"高手":(goodJump>=normalCount?"还行":(goodJump<=lostCount?"太糟了":"还行")))+"，30秒内跨越 "+goodJump +" 块"+"</div>";
186                 allRow=[];
187                 errorTime=0;
188                 BlackWorld.init();
189                 haveRest = true;
190                 setTimeout(function(){haveRest = false;},500);
191                 return;
192             }
193             var now = (+new Date);
194             if (now - lastFpsUpdateTime > 50) {
195                 lastFpsUpdateTime = now;
196                 doDraw();
197             }
198         }
199         window.requestNextAnimationFrame(animate);
200     }
201     function doGenData(allFlg){
202         if(allFlg){
203             var sel = 0;
204             allRow = [];
205             for(var i=0;i<rC+1;i++){
206                 var row = [];
207                 sel = Math.round(Math.random() * (rC-1));
208                 for(var j =0;j<cC;j++){
209                     row.push(new Cell(i,j,(sel==j?"black":"white"),(sel==j?true:false)));
210                 }
211                 allRow.push(row);
212             }
213         }else{
214             var sel = 0;
215             var row = [];
216             sel = Math.round(Math.random() * (rC-1));
217             for(var j =0;j<cC;j++){
218                 row.push(new Cell(i,j,(sel==j?"black":"white"),(sel==j?true:false)));
219             }
220             allRow.push(row);
221         }
222     }
223     function stopEvent(e){e.preventDefault();e.stopPropagation();}
224     function canEvent(e){alert();}
225     var v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1,
226     caW = v ? window.innerWidth: 400,
227     caH = v ? window.innerHeight: 600,
228     lastFpsUpdateTime = (+new Date),
229     caObj,ctxtObj,allRow = [],rowC = 3.4, colC = 4, cellW = caW / colC, cellH = caH / rowC ,rC=4,cC=4,isStart = false,canGoOn=false,canTouch=false,
230     curOffset = -cellH,
231     downSpeed = cellH / 2 +0.5,
232     errorTime = 0,
233     bigError = 1,
234     goodJump = 0,
235     startTime,
236     caObjWOffset=0,
237     caObjHOffset=0,
238     winCount=120,
239     lostCount=40,
240     normalCount=60,
241     timeDeadLine=30,
242     haveRest = false,
243     btn_start;
244     this.init = function(){
245         isStart = false;canTouch=false;goodJump = 0;
246         //document.getElementById("worldOut").innerHTML = '<canvas id="world" width="900" height="550" style="position: absolute; left: 0px; top: 0px;"></canvas>';
247         btn_start = document.getElementById("btn_start");
248         caObj = document.getElementById("world");
249         // if support canvase
250         //if (caObj && caObj.getContext) {
251             ctxtObj = caObj.getContext("2d");
252             // event
253             caObj.addEventListener("click", ca_click2, false);
254             //caObj.addEventListener("touchstart", ca_click, false);
255             caObj.addEventListener("touchstart", ca_click, false);
256             caObj.addEventListener("touchend", stopEvent, false);
257             caObj.addEventListener("touchmove", stopEvent, false);
258             caObj.addEventListener("touchcancel", stopEvent, false);
259             caObj.addEventListener("gesturestart", stopEvent, false);
260             caObj.addEventListener("gesturechange", stopEvent, false);
261             caObj.addEventListener("gestureend", stopEvent, false);
262             //window.addEventListener("resize", function(e){}, false);
263             caObj.addEventListener("mousedown", stopEvent, false);
264             caObj.addEventListener("mouseup", stopEvent, false);
265             caObj.addEventListener("mousemove", stopEvent, false);
266             //window.addEventListener("resize", doResize, false);
267         //}
268         if (v) {
269             caObj.style.border = "none";
270         }
271         doResize();
272         doGenData(true);
273         doDraw();
274         animate();
275         
276     },
277     this.start = function(){
278         isStart = true;
279         canTouch = true;
280         var now = (+new Date);
281         lastFpsUpdateTime = now;
282     }
283 };
284 // cell object
285 function Cell(row, col, color, needClick) {
286     this.position = {
287         r: row,
288         c: col
289     }
290     this.color = color;
291     this.isOver = false;
292     this.isNeedClick = needClick;
293 }
294 Cell.prototype.doCheckClick = function(x, y) {
295     var result = false;
296     if(true){
297     // in this cell
298         // if right return true;
299         // else return false;
300     }
301     return result;
302 };
303 onload = function() {
304     BlackWorld.init();
305 }

requestNextAnimationFrame.js:

 1 window.requestNextAnimationFrame =
 2    (function () {
 3       var originalWebkitRequestAnimationFrame = undefined,
 4           wrapper = undefined,
 5           callback = undefined,
 6           geckoVersion = 0,
 7           userAgent = navigator.userAgent,
 8           index = 0,
 9           self = this;
10 
11       // Workaround for Chrome 10 bug where Chrome
12       // does not pass the time to the animation function
13       
14       if (window.webkitRequestAnimationFrame) {
15          // Define the wrapper
16 
17          wrapper = function (time) {
18            if (time === undefined) {
19               time = +new Date();
20            }
21            self.callback(time);
22          };
23 
24          // Make the switch
25           
26          originalWebkitRequestAnimationFrame = window.webkitRequestAnimationFrame;    
27 
28          window.webkitRequestAnimationFrame = function (callback, element) {
29             self.callback = callback;
30 
31             // Browser calls the wrapper and wrapper calls the callback
32             
33             originalWebkitRequestAnimationFrame(wrapper, element);
34          }
35       }
36 
37       // Workaround for Gecko 2.0, which has a bug in
38       // mozRequestAnimationFrame() that restricts animations
39       // to 30-40 fps.
40 
41       if (window.mozRequestAnimationFrame) {
42          // Check the Gecko version. Gecko is used by browsers
43          // other than Firefox. Gecko 2.0 corresponds to
44          // Firefox 4.0.
45          
46          index = userAgent.indexOf('rv:');
47 
48          if (userAgent.indexOf('Gecko') != -1) {
49             geckoVersion = userAgent.substr(index + 3, 3);
50 
51             if (geckoVersion === '2.0') {
52                // Forces the return statement to fall through
53                // to the setTimeout() function.
54 
55                window.mozRequestAnimationFrame = undefined;
56             }
57          }
58       }
59       
60       return window.requestAnimationFrame   ||
61          window.webkitRequestAnimationFrame ||
62          window.mozRequestAnimationFrame    ||
63          window.oRequestAnimationFrame      ||
64          window.msRequestAnimationFrame     ||
65 
66          function (callback, element) {
67             var start,
68                 finish;
69 
70             window.setTimeout( function () {
71                start = +new Date();
72                callback(start);
73                finish = +new Date();
74 
75                self.timeout = 1000 / 60 - (finish - start);
76 
77             }, self.timeout);
78          };
79       }
80    )
81 ();