zoukankan html css js c++ java

[模仿]html5游戏_2048

模仿了下html5游戏_2048

可以PC上用键盘玩

手机上用手势玩

应该是内存管理存在问题，虽然在UC上速度可以，但在默认浏览器下时间一长就卡，代码仅供参考

效果图：

代码：

index.htm：

 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>[WXS]2048</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:0px;}
21         #BirdWorld{cursor:pointer;background:#fff;/*border:6px #333333 solid;*/}
22         #btn_start{color:white;font-size:38px;font-weight:bold;z-index:999;display:none;background:rgba(150,150,150,0.8);text-align:center;cursor:pointer;}
23         </style>
24     </head>
25     <body>
26     <section>
27         <div style='position:absolute;left:0px;top:0px;' id='btn_start'></div>
28         <canvas id="GameWorld" width="900" height="400" 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     </section>
32     </body>
33     <script src="CGM009.js"></script>
34 </html>

View Code

CGM009.js

  1 ;
  2 var gameWorld = new function(){
  3     function doResize(){
  4         caW = window.innerWidth;
  5         caH = window.innerHeight;
  6         btn_start.style.width=caW+"px";
  7         btn_start.style.height=caH+"px";
  8         btn_start.style.display="inline";
  9         btn_start.innerHTML = "<div style='margin:auto; position:absolute;100%;text-align:center; top:"+caH * 0.4 +"px'>由WangXinsheng创建<br />点击屏幕开始游戏</div>";
 10         caObj.width = caW;
 11         caObj.height = caH;
 12         scoreTotal = 0;
 13         scoreShow = "滑动屏幕开始游戏";
 14         if(caH>caW){
 15             cellW = Math.ceil(caW * 0.25);
 16             cellH = cellW;
 17             cellBL = Math.ceil((caW - cellW * 4) * 0.5);
 18             cellBT = Math.ceil((caH - cellW * 4) * 0.5);
 19             wordT = cellBT * 0.5;
 20             wordL = caW * 0.5;
 21         }else{
 22             cellW = Math.ceil(caH * 0.25);
 23             cellH = cellW;
 24             cellBL = Math.ceil((caW - cellW * 4) * 0.5);
 25             cellBT = Math.ceil((caH - cellW * 4) * 0.5);
 26             wordT = caH * 0.5;
 27             wordL = cellBL * 0.5;
 28         }
 29     }
 30     function doTouchStart(e){
 31         e.preventDefault();
 32         //console.log("ts",e);
 33         pageXs = e.changedTouches[0].pageX;
 34         pageYs = e.changedTouches[0].pageY;
 35         e.stopPropagation();
 36     }
 37     function doTouchEnd(e){
 38         e.preventDefault();
 39         //console.log("te",e);
 40         pageXe = e.changedTouches[0].pageX;
 41         pageYe = e.changedTouches[0].pageY;
 42         var offsetX = pageXe - pageXs;
 43         var offsetY = pageYe - pageYs;
 44         var parm = "";
 45         //console.log(pageXe,pageYe,pageXs,pageYs,offsetX,offsetY);
 46         if(Math.abs(offsetX)==Math.abs(offsetY)){
 47             //45度，不予理睬
 48         }else if(Math.abs(offsetX)>Math.abs(offsetY)){
 49             if(offsetX>0){
 50                 parm="right";
 51             }else{
 52                 parm="left";
 53             }
 54         }else{
 55             if(offsetY<0){
 56                 parm="up";
 57             }else{
 58                 parm="down";
 59             }
 60         }
 61         //console.log(parm);
 62         if(parm!="")
 63             doMove(parm);
 64         e.stopPropagation();
 65     }
 66     function stopEvent(e){e.preventDefault();e.stopPropagation();}
 67     function BindEvent(){
 68         btn_start.addEventListener("click", 
 69         function(){
 70             btn_start.style.display="none";
 71             if(scoreShow == "你输了！")
 72                 reStart();
 73         }, false);
 74         if(v){
 75             caObj.addEventListener("touchstart", doTouchStart, false);
 76             caObj.addEventListener("touchend", doTouchEnd, false);
 77             
 78             caObj.addEventListener("touchmove", stopEvent, false);
 79             caObj.addEventListener("touchcancel", stopEvent, false);
 80             caObj.addEventListener("gesturestart", stopEvent, false);
 81             caObj.addEventListener("gesturechange", stopEvent, false);
 82             caObj.addEventListener("gestureend", stopEvent, false);
 83         }else{
 84         document.addEventListener("keyup", doKeyPress, false);
 85         }
 86     }
 87     function doKeyPress(e){
 88         if(window.event) // IE
 89         {
 90             keynum = e.keyCode
 91         }
 92         else if(e.which) // Netscape/Firefox/Opera
 93         {
 94             keynum = e.which
 95         }
 96         switch(keynum){
 97             case 38:
 98                 doMove("up");
 99                 break;
100             case 40:
101                 doMove("down");
102                 break;
103             case 37:
104                 doMove("left");
105                 break;
106             case 39:
107                 doMove("right");
108                 break;
109         }
110     }
111     function doMove(direction){
112         //up down left right
113         var scoreToAdd = 0;
114         
115         for(var i=0;i<cells.length;i++){
116             for(var j=0;j<cells[i].length;j++){
117                 cells[i][j].newFlg =false;
118             }
119         }
120         
121         switch(direction){
122             case "up":
123                 // 先列，后行
124                 for(var j=0;j<cells[1].length ;j++ )
125                 {
126                     var step = 1;
127                     var conFlg = false;
128                     for (var i=1;i<cells.length ;i++ )
129                     {
130                         if(cells[i][j].n==0)
131                         {
132                             step++;
133                             conFlg=true;
134                             continue;
135                         }
136                         if(!conFlg){
137                             step = 1;
138                         }//else{console.log(i,j,"Step:"+step);}
139                         if(cells[i][j].n==cells[i-step][j].n && !cells[i-step][j].hbFlg)
140                         {
141                             //合并
142                             scoreToAdd += cells[i-step][j].n;
143                             cells[i-step][j].n *= 2;
144                             cells[i-step][j].index += 1;
145                             cells[i][j].n = 0;
146                             cells[i][j].index = 0;
147                             for(var kk=i-step;kk>=0;kk--)
148                                 cells[kk][j].hbFlg = true;
149                         }else{
150                             if(conFlg)step--;
151                             if(cells[i-step][j].n==0){
152                                 //移动
153                                 cells[i-step][j].n = cells[i][j].n;
154                                 cells[i-step][j].index = cells[i][j].index;
155                                 cells[i][j].n = 0;
156                                 cells[i][j].index = 0;
157                                 if(!conFlg){
158                                     i--;
159                                 }
160                             }
161                         }
162                         if(conFlg){
163                             i=1-1;
164                         }
165                         conFlg=false;
166                         step = 1;
167                     }
168                 }
169                 break;
170             case "down":
171                 // 先列，后行
172                 for(var j=0;j<cells[1].length ;j++ )
173                 {
174                     var step = 1;
175                     var conFlg = false;
176                     for (var i=cells.length-2;i>=0 ;i-- )
177                     {
178                         if(cells[i][j].n==0)
179                         {
180                             step++;
181                             conFlg=true;
182                             continue;
183                         }
184                         if(!conFlg){
185                             step = 1;
186                         }//else{console.log(step);}
187                         if(cells[i][j].n==cells[i+step][j].n && !cells[i+step][j].hbFlg)
188                         {
189                             //合并
190                             scoreToAdd += cells[i+step][j].n;
191                             cells[i+step][j].n *= 2;
192                             cells[i+step][j].index += 1;
193                             cells[i][j].n = 0;
194                             cells[i][j].index = 0;
195                             for(var kk=i+step;kk<cells.length;kk++)
196                                 cells[kk][j].hbFlg = true;
197                         }else{
198                             if(conFlg)step--;
199                             if(cells[i+step][j].n==0){
200                                 //移动
201                                 cells[i+step][j].n = cells[i][j].n;
202                                 cells[i+step][j].index = cells[i][j].index;
203                                 cells[i][j].n = 0;
204                                 cells[i][j].index = 0;
205                                 if(!conFlg){
206                                     i++;
207                                 }
208                             }
209                         }
210                         if(conFlg){
211                             i=cells.length-2+1;
212                         }
213                         conFlg=false;
214                         step = 1;
215                     }
216                 }
217                 break;
218             case "left":
219                 // 先行，后列
220                 for(var i=0;i<cells.length ;i++ )
221                 {
222                     var step = 1;
223                     var conFlg = false;
224                     for (var j=1;j<cells[i].length ;j++ )
225                     {
226                         if(cells[i][j].n==0)
227                         {
228                             step++;
229                             conFlg=true;
230                             continue;
231                         }
232                         if(!conFlg){
233                             step = 1;
234                         }//else{console.log(step);}
235                         if(cells[i][j].n==cells[i][j-step].n && !cells[i][j-step].hbFlg)
236                         {
237                             //合并
238                             scoreToAdd += cells[i][j-step].n;
239                             cells[i][j-step].n *= 2;
240                             cells[i][j-step].index += 1;
241                             cells[i][j].n = 0;
242                             cells[i][j].index = 0;
243                             for(var kk=j-step;kk>=0;kk--)
244                                 cells[i][kk].hbFlg = true;
245                         }else{
246                             if(conFlg)step--;
247                             if(cells[i][j-step].n==0){
248                                 //移动
249                                 cells[i][j-step].n = cells[i][j].n;
250                                 cells[i][j-step].index = cells[i][j].index;
251                                 cells[i][j].n = 0;
252                                 cells[i][j].index = 0;
253                                 if(!conFlg){
254                                     j--;
255                                 }
256                             }
257                         }
258                         if(conFlg){
259                             j=1-1;
260                         }
261                         conFlg=false;
262                         step = 1;
263                     }
264                 }
265                 break;
266             case "right":
267                 // 先行，后列
268                 for(var i=0;i<cells.length ;i++ )
269                 {
270                     var step = 1;
271                     var conFlg = false;
272                     for (var j=cells[i].length-2;j>=0 ;j-- )
273                     {
274                         if(cells[i][j].n==0)
275                         {
276                             step++;
277                             conFlg=true;
278                             continue;
279                         }
280                         if(!conFlg){
281                             step = 1;
282                         }//else{console.log(step);}
283                         if(cells[i][j].n==cells[i][j+step].n && !cells[i][j+step].hbFlg)
284                         {
285                             //合并
286                             scoreToAdd += cells[i][j+step].n;
287                             cells[i][j+step].n *= 2;
288                             cells[i][j+step].index += 1;
289                             cells[i][j].n = 0;
290                             cells[i][j].index = 0;
291                             for(var kk=j+step;kk<cells[i].length;kk++)
292                                 cells[i][kk].hbFlg = true;
293                         }else{
294                             if(conFlg)step--;
295                             if(cells[i][j+step].n==0){
296                                 //移动
297                                 cells[i][j+step].n = cells[i][j].n;
298                                 cells[i][j+step].index = cells[i][j].index;
299                                 cells[i][j].n = 0;
300                                 cells[i][j].index = 0;
301                                 if(!conFlg){
302                                     j++;
303                                 }
304                             }
305                         }
306                         if(conFlg){
307                             j=cells[i].length-2+1;
308                         }
309                         conFlg=false;
310                         step = 1;
311                     }
312                 }
313                 break;
314         }
315         for(var i=0;i<cells.length;i++){
316             for(var j=0;j<cells[i].length;j++){
317                 cells[i][j].hbFlg =false;
318             }
319         }
320         scoreTotal += scoreToAdd;
321         scoreShow = "得分:"+scoreTotal;
322         genNum(false);
323         if(doJudge()=="t"){
324             scoreShow = "恭喜你赢了！";
325         }else if(doJudge()=="f"){
326             scoreShow = "你输了！";
327             btn_start.style.display="inline";
328         }
329         doDrawCanvas();
330     }
331     function addScroe(scoreToAdd){
332     }
333     function getZeroLst(){
334         cellZeroLst = [];
335         for(var i=0;i<cells.length;i++){
336             for(var j=0;j<cells[i].length;j++){
337                 if(cells[i][j].n==0)
338                     cellZeroLst.push(cells[i][j]);
339                     //cellZeroLst.push(i*cells.length+j);
340             }
341         }
342         /*for(var h=0;h<cellZeroLst.length;h++){
343             //var i= Math.round(cellZeroLst[h]/cells.length);
344             //var j= cellZeroLst[h]%cells.length;
345             //cells[i][j].n=2048;
346             //cells[i][j].index=11;
347             cellZeroLst[h].index=11;
348             cellZeroLst[h].n = 2048;
349         }*/
350         //doDrawCells();
351     }
352     function doDrawCanvas(){
353         caCt.fillStyle = "white";
354         caCt.fillRect(0,0,caW,caH);
355         doDrawWords();
356         doDrawBorders();
357         doDrawCells();
358 //getZeroLst();
359     }
360     function doDrawCells(){
361         for(var i=0;i<cells.length;i++){
362             for(var j=0;j<cells[i].length;j++){
363                 caCt.fillStyle = bgCLst[cells[i][j].index];
364                 if(cells[i][j].newFlg){
365                     caCt.fillStyle = "yellow";
366                 }
367                 caCt.fillRect(cellBL + cellW * j +0.5,cellBT + cellH * i +0.5,cellW-1,cellH-1);
368                 caCt.fillStyle = fontCLst[cells[i][j].index];
369                 if(cells[i][j].newFlg){
370                     caCt.fillStyle = "red";
371                 }
372                 caCt.font=cells[i][j].fontSize + "px Arial";
373                 caCt.textAlign="center";
374                 caCt.textBaseline="middle";
375                 caCt.fillText(cells[i][j].n,cellBL + cellW * j + cellW*0.5,cellBT + cellH * i + cellH*0.5);
376             }
377         }
378     }
379     function doDrawBorders(){
380         var cellBTop = caH - cellW * 4;
381         caCt.strokeStyle = borderC;
382         //caCt.strokeRect(cellBL-0.5,cellBT-0.5,cellW * 4,cellH * 4);
383         for(var i =0;i<=4;i++){
384             //console.log(cellBT + cellH * i-0.5);
385             caCt.moveTo(cellBL-0.5,cellBT + cellH * i-(i==0?0.5:0.5));
386             caCt.lineTo(cellBL + cellW * 4 -0.5,cellBT + cellH * i-(i==0?0.5:0.5));
387             caCt.stroke();
388             caCt.moveTo(cellBL + cellW * i-(i==0?0.5:0.5),cellBT-0.5);
389             caCt.lineTo(cellBL + cellW * i-(i==0?0.5:0.5),cellBT + cellH * 4 -0.5);
390             caCt.stroke();
391         }
392     }
393     function doDrawWords(){
394         caCt.fillStyle = "black";
395         if(scoreShow == "恭喜你赢了！"){
396             caCt.fillStyle = "red";
397         }
398         else if(scoreShow == "你输了！"){
399             caCt.fillStyle = "green";
400         }
401         caCt.font= ((caH>caW)?(wordT * 0.7):13) +"px Arial";
402         caCt.textAlign="center";
403         caCt.textBaseline="middle";
404         caCt.fillText(scoreShow,wordL,wordT);
405     }
406     function reStart(){
407         cells=[];
408         /********init size of canvas and other vars**********/
409         doResize();
410         /*******init cell data************/
411         initDate();
412         /******init not zero data*********/
413         genNum(false);
414         genNum(false);
415         /********bound the event such as keyenvet and suggestionEvent***********/
416         BindEvent();
417         /********draw canvas**************/
418         doDrawCanvas();
419         btn_start.style.display="none";
420     }
421     function initDate(){
422         for(var i = 0;i<4;i++){
423             var tmpCell = [];
424             for(var j = 0;j<4;j++){
425                 /*if(i==0 && j==0){
426                     tmpCell.push(new cell(cellW * 0.4,0,0));
427                 }else{
428                     tmpCell.push(new cell(cellW * 0.4,Math.pow(2,(4*i+j)),(4*i+j)));
429                 }*/
430                 tmpCell.push(new cell(cellW * 0.4,0,0));
431             }
432             cells.push(tmpCell);
433         }
434         //console.log(cells);
435     }
436     function doJudge(){
437         getZeroLst();
438         if(cellZeroLst.length==0){
439             var goOn = false;
440             for(var i=0;i<cells.length;i++){
441                 if(goOn){break;}
442                 for(var j=0;j<cells[i].length;j++){
443                     if((j>0 && cells[i][j].n==cells[i][j-1].n) || (j< cells[i].length-1 && cells[i][j].n==cells[i][j+1].n)){
444                         goOn = true;
445                         break;
446                     }
447                     if((i>0 && cells[i][j].n==cells[i-1][j].n) || (i< cells[j].length-1 && cells[i][j].n==cells[i+1][j].n)){
448                         goOn = true;
449                         break;
450                     }
451                 }
452             }
453             if(!goOn)
454                 return "f";
455         }else{
456             for(var i=0;i<cells.length;i++){
457                 for(var j=0;j<cells[i].length;j++){
458                     if(cells[i][j].n == 2048){
459                         return "t";
460                     }
461                 }
462             }
463         }
464         return "g";
465     }
466     function genNum(only2){
467         getZeroLst();
468         if(cellZeroLst.length>0){
469             var i = Math.round(Math.random()*(cellZeroLst.length-1));
470             var number = 2;
471             var index = 1;
472             if(!only2){
473                 if(Math.random()>0.8){
474                     number = 4;
475                     index = 2;
476                 }
477             }
478             cellZeroLst[i].n=number;
479             cellZeroLst[i].index=index;
480             cellZeroLst[i].newFlg=true;
481         }
482     }
483     var v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1,
484     caW = window.innerWidth,
485     caH = window.innerHeight,
486     btn_start = document.getElementById("btn_start"),
487     caObj = document.getElementById("GameWorld"),
488     caCt = caObj.getContext("2d"),
489     cells = [],
490     cellW = 0,
491     cellH = 0,
492     cellBT = 0,
493     cellBL = 0,
494     wordT = 0,
495     wordL = 0,
496     pageXs = 0,
497     pageYs = 0,
498     pageXe = 0,
499     pageYe = 0,
500     cellZeroLst = [],
501     scoreTotal = 0,
502     scoreShow = "滑动屏幕开始游戏",
503     borderC = "blue",
504     numLst = [0,2,4,8,16,32,64,128,256,512,1024,2048],
505     bgCLst = ["white","gray","lightblue","lightgreen","#d3a4ff","#ffa6ff","#6A6AFF","#FFA042","#AD5A5A","orange","#6C3365","red"],
506     fontCLst = ["white","white","white","white","white","white","white","white","black","black","white","white"];
507     this.init = function(){
508         /********init size of canvas and other vars**********/
509         doResize();
510         /*******init cell data************/
511         initDate();
512         /******init not zero data*********/
513         genNum(false);
514         genNum(false);
515         /********bound the event such as keyenvet and suggestionEvent***********/
516         BindEvent();
517         /********draw canvas**************/
518         doDrawCanvas();
519     }
520     
521 }
522 
523 function cell(fontSize,n,index){
524     this.c = "lightBlue";
525     this.n = n!=null?n:0;　// 指数
526     this.fontSize = fontSize;
527     this.isCaled = false;
528     this.index = index;
529     this.hbFlg = false;
530     this.newFlg = false;
531 }
532 
533 onload = function(){
534     gameWorld.init();
535 }

CSDN下载

http://download.csdn.net/detail/wangxsh42/7675671

查看全文

相关阅读:
Python中所有的关键字
 关于selenium的8种元素定位
 对提示框的操作
 selenium+webservice进行百度登录
 MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled...报错解决
 Vue中使用echarts
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142解决方法
 插入排序
 冒泡排序优化
 roject 'org.springframework.boot:spring-boot-starter-parent:XXX' not found 解决

原文地址：https://www.cnblogs.com/wangxinsheng/p/3867392.html