模仿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 ();
CSDN下载路径：