[原创]html5_PC游戏_图片俄罗斯方块

来源：互联网发布：ps4安装linux 编辑：程序博客网时间：2024/05/16 11:02

PC游戏_图片俄罗斯方块

以前的了，快一年了。。。

使用了离线canvas复制的方法，启动预览效果需要服务器支持

另外，AC娘图片可以自己做加载功能，这样游戏图片显示更顺畅

效果：

---

代码:

html:

<!DOCTYPE html>    <head>        <title>CGM001</title>        <script src="js/libs/jquery-1.11.0.js"></script>        <script src="js/libs/requestNextAnimationFrame.js"></script>        <script src="js/data/blockTypeData.js"></script>        <style>            body {                font-size:13px;            }        </style>    </head>    <body>        <h1 id="LoadH1" style="margin:auto;">加载图片中......</h1>        <div style="margin-top:20px;">            [方向键 <span style="color:blue;font-weight:bold;">左</span>:<span style="color:red;font-weight:bold;">左移</span>方块 <span style="color:blue;font-weight:bold;">右</span>:<span style="color:red;font-weight:bold;">右移</span>方块 <span style="color:blue;font-weight:bold;">上</span>:<span style="color:red;font-weight:bold;">旋转</span>方块  <span style="color:blue;font-weight:bold;">下</span>:<span style="color:red;font-weight:bold;">下移</span>方块]            <br />            <span style="color:red;font-weight:bold">当下落位置不正确时，会重新下落该方块。</span>        </div>        <div style="position:absolute;left:10px;bottom:10px; text-align:center">            <br />            版权所有&copy;王欣盛            <a href="mailTo:wangxsh42@126.com">wangxsh42@126.com</a>            制作时间：2014/04/14 ~ 2014/04/18        </div>    </body>    <script src="js/entity/canvas_Entity.js"></script>    <script src="js/entity/block_Entity.js"></script>    <script src="js/entity/blocks_Entity.js"></script>    <script src="js/action/CGM001_Action.js"></script></html>

js：

Action:

  1 //score  2 var maxFail = 200;  3 var maxMsg = "无解了？还是你没好好玩？";  4 var stsId = "stsId";  5 var countId = "countId";  6 var failCountId = "failCountId";  7 var fixCountId = "fixCountId";  8   9 var countB = 0; 10 var currB = 0; 11 var failB = 0; 12 var fixB = 0; 13  14 //acNiang 15 var acSrc = ""; 16 var acNiangId = "acNiangId"; 17 var goodSize = 9; 18 var failSize = 24; 19 var nomalSize = 19; 20 var acRootPath = "imgs/acNiang/"; 21 var goodPath = "good"; 22 var failPath = "fail"; 23 var nomalPath = "nomal"; 24 var defaultPath = "imgs/acNiang/nomal0.png"; 25  26 // background image 27 var goMax = 27; 28 var image; 29 var imageBG; 30 var bgColor; 31 var bgColorLst = [ 32     "#E0FFFF", 33     "#FFC0CB", 34     "#9932CC", 35     "#90EE90", 36     "#7B68EE", 37     "#4169E1", 38     "#C0C0C0", 39     "#7CFC00" 40 ]; 41 var bgId = "bgDiv"; 42 //canvas 43 var abs = "absolute"; 44 var width = 400; 45 var height = 600; 46 var x = 10; 47 var y = 10; 48 var idC = "CGM001Canvas"; 49 var idCOff = "CGM001OffCanvas"; 50 var idCOffBG = "CGM001OffBGCanvas"; 51 var idCOffAnimation = "CGM001OffCanvasAnimation"; 52 var CGM001canvasObj = null; 53 var CGM001canvasOffObj = null; 54 var CGM001canvasOffBGObj = null; 55 var CGM001canvasOffObjAnimation = null; 56 var CGM001canvasParent = "body"; 57 var border = "1px red solid"; 58 border = "none"; 59 //picture 60 var picWidth = width; 61 var picHeight = height; 62 //block 63 var blockCol = 10; 64 var blockRow = 15; 65 var blockWidth = picWidth / blockCol; 66 var blockHeight = picHeight / blockRow; 67 var blockSize = blockWidth < blockHeight ? blockWidth : blockHeight; 68 //blockLst 69 var blockLst = []; 70 var blockBoxLst = []; // to judge weather blockPos Right and isempty 71 var cuttedBlocksLst = []; 72 //blocks order 73 var blocksOrderRow = []; 74 var blocksOrderCol = []; 75  76 $(function () { 77     CGM001canvasObj = createCanvas(abs,x,y,width,height,idC,CGM001canvasParent,border,false,CGM001canvasObj); 78     CGM001canvasOffObj = createCanvas(abs, x + width + 20, y, width, height, idCOff, CGM001canvasParent, border, false, CGM001canvasOffObj); 79     CGM001canvasOffBGObj = createCanvas(abs, x, y, width, height, idCOffBG, CGM001canvasParent, border, true, CGM001canvasOffBGObj); 80     CGM001canvasOffObjAnimation = createCanvas(abs, x + width * 2 + 20, y, width, height, idCOffAnimation, CGM001canvasParent, border, true, CGM001canvasOffObjAnimation); 81  82 /*    imageBG = new Image(); 83     imageBG.src = 'imgs/bg.jpg'; 84     imageBG.onload = function (e) { 85         CGM001canvasOffObjAnimation.context.drawImage(imageBG, 0, 0, picWidth, picHeight); 86         drawPic(); 87         calcBlockLst(); 88     }*/ 89  90     drawPic(); 91     calcBlockLst(); 92 }); 93  94 function createBgColor(abs, x, y, width, height, bgId, hideFlg) { 95     var bgStr = "<div id='" + bgId + "' width='" + width + "' height='" + height + "' style='position:" + abs + ";left:" + x + "px;top:" + y + "px;background:" + bgColor + ";'></div>"; 96     var bgOgj = $(bgStr); 97     $(CGM001canvasParent).append(bgOgj.width(width).height(height).css('opacity', '0.2')); 98 } 99 100 function createScoreDiv(abs, x, y, width, height, bgId, hideFlg) {101     var tmpLeft = parseInt(x) + parseInt(width) - 75;102     var tmpTop = parseInt(y) + 40;103     var imgDivStr = "<div id='scoreId' style='position:" + abs + ";left:" + tmpLeft + "px;top:" + tmpTop + "px;text-align:left;'></div>"104     var imgStr = "<img width='75' height='65' src='" + defaultPath + "' id='" + acNiangId + "' />";105     var tmpStsWidth = 100;106     var stsStr = "<div width='" + tmpStsWidth + "' height='65' style='font-weight:bold; position:relative;right:" + 0 + "px;top:-50px;' id='" + stsId + "' >" +107         "方块：<span id='" + countId + "' style='color:red;'>第 " + currB + " 块/共 " + countB + " 块</span>" +108         "<br />失败次数：<span id='" + failCountId + "' style='color:red;'>" + failB + "</span> 块" +109         "<br />已固定：<span id='" + fixCountId + "' style='color:red;'>" + fixB + "</span> 块" +110         "</div>";111     var tmpObj = $(imgDivStr).append($(imgStr));112     tmpObj.append($(stsStr));113     $(CGM001canvasParent).append(tmpObj);114     $("#" + stsId).css({ 'left': ($("#" + stsId).width() + 100) * -1 });115 };116 117 function createCanvas(abs,x,y,width,height,idC,CGM001canvasParent,border,hideFlg,canvasObj){118     canvasObj = new CGM001_canvas(abs,x,y,width,height,idC,CGM001canvasParent,border,hideFlg);119     canvasObj.create();120     canvasObj.init();121     return canvasObj;122 }123 function clearCanvas(){124     CGM001canvasObj.context.clearRect(0,0,CGM001canvasObj.width,CGM001canvasObj.height);125 }126 function drawPic() {127     image = new Image();128     image.src = 'imgs/goImg/go'+parseInt(Math.random()*goMax)+'.jpg';129     image.onload = function(e) {130         $("#LoadH1").hide();131 132         bgColor = bgColorLst[parseInt(Math.random() * bgColorLst.length - 1)];133         createBgColor(abs, x, y, width, height, bgId, false);134         createScoreDiv(abs, x, y, width, height, bgId, false);135 136         CGM001canvasObj.context.drawImage(image, 0, 0, picWidth, picHeight);137         CGM001canvasOffObj.context.putImageData(CGM001canvasObj.context.getImageData(0,0,CGM001canvasObj.width,CGM001canvasObj.height),0,0);138         CGM001canvasOffBGObj.context.putImageData(CGM001canvasObj.context.getImageData(0,0,CGM001canvasObj.width,CGM001canvasObj.height),0,0);139         cutPic();140 141         countB = cuttedBlocksLst.length;142         $("#" + countId).html("第 " + currB + " 块/共 " + countB + " 块");143         $("#" + stsId).css({ 'left': ($("#" + stsId).width() + 10) * -1 });144 145         if(cuttedBlocksLst.length>0){146             initList();147             clearCanvas();148             $(document).keydown(function (event) { onKeyUp(event); });149             animate();150         }151         /*for(var i = 0 ;i < blockLst.length; i ++){152             blockLst[i].draw();153         }*/154     };155 }156 157 function calcBlockLst(){158     var w = blockSize * blockCol;159     var wc = picWidth - w;160     var h = blockSize * blockRow;161     var hc = picHeight - h;162     var s = blockSize;163     var r = blockRow;164     var c = blockCol;165 166     blockLst = [];167     for(i = r - 1; i >= 0; i--){168         for(j = c - 1; j >= 0; j--){169             blockLst.push(new CGM001_block(s, (s * j) + wc, (s * i) + hc, "rgba(255,0,0,0.2)", "blue", CGM001canvasObj.context, i, j, CGM001canvasOffObj.context));170             blockBoxLst.push({x: (s * j) + wc,y:(s * i) + hc,empty:true});171         }172     }173 }174 175 function cutPic(){176     var colorLst = [177         "rgba(255,0,0,0.1)",178         "rgba(0,255,0,0.1)",179         "rgba(0,0,255,0.1)",180         "rgba(197,144,144,0.1)",181         "rgba(209,207,66,0.1)",182         "rgba(150,209,66,0.1)",183         "rgba(66,209,147,0.1)",184         "rgba(66,194,209,0.1)",185         "rgba(157,66,209,0.1)",186         "rgba(209,66,187,0.1)",187         "rgba(176,133,141,0.1)"188     ];189     var time = 0;190     var picCutfinish = false;191     while(time<200){192         193         for(var i = 0 ;i < blockLst.length; i ++){194             blockLst[i].cutted = false;195         }196 197         //console.log(time);198         cuttedBlocksLst = [];199         var cutOverNum = 0;200         var r = blockRow - 1;201         var c = blockCol - 1;202         var maxR = r;203         var maxC = c;204         var goOn = true;205         var blocks = null;206         var stop = 1;207         var rx = maxR - r;208         var cx = maxC - c;209         var goR = rx;210         var goC = cx;211         var randomBlockLst = [];212         while(goOn){213             //stop ++;214             var randomLst = [];215 216             if(null == blocks){217                 blocks = new CGM001_blocks(CGM001canvasObj.context);218             }219 220             var colorIndex = cuttedBlocksLst.length % colorLst.length;221 222             var blockTmp = blockLst[rx*blockCol+cx];223             if(!blockTmp.cutted){224                 blocks.blockLst.push(blockTmp);225                 //console.log("blockTmp",blockTmp.x1,blockTmp.x2);226                 blockTmp.cutted = true;227                 blockTmp.setFillColor(colorLst[colorIndex]);228                 cutOverNum++;229                 if(blocks.blockLst.length % 4 == 0){230                     cuttedBlocksLst.push(blocks);231                     blocks = null;232                     while(blockLst[goR*blockCol+goC].cutted){233                         //console.log("go",goC,maxC,goR);234                         goR = goC >= maxC ?　goR + 1 : goR;235                         goC = goC >= maxC ?　0 : goC +1;236                         if(goC == maxC && goR == maxR){break;}237                     }238                     rx = goR;239                     cx = goC;240                     randomBlockLst = [];241                     //console.log("goEnd",rx,cx);242                     continue;243                     //break;244                 }245 246                 // T247                 //if(blocks.blockLst.length % 4 != 0){248                 if(Math.random()>0.3){249                     randomBlockLst.push({r:rx,c:cx});250                     var randomBlockLstTmp = [];251                     for(checkIndex = 0; checkIndex < randomBlockLst.length; checkIndex++){252                         var rTmp = randomBlockLst[checkIndex].r;253                         var cTmp = randomBlockLst[checkIndex].c;254                         var canMoveFlg = false;255 256                         if(rTmp != maxR && !blockLst[(rTmp+1)*blockCol+cTmp].cutted) // up257                                 canMoveFlg = true;258                         if(rTmp != 0 && !blockLst[(rTmp-1)*blockCol+cTmp].cutted) // down259                                 canMoveFlg = true;260                         if(cTmp != maxC && !blockLst[(rTmp)*blockCol+cTmp+1].cutted){ // left261                             var leftGo = true;262                             if(cTmp == maxC - 1 && rTmp!=0 && blocks.blockLst.length % 3 == 0){263                                 if(!blockLst[(rTmp-1)*blockCol+cTmp+1].cutted)264                                     leftGo = false;265                             }266                             if(leftGo)267                                 canMoveFlg = true;268                         }269                         if(cTmp != 0 && !blockLst[(rTmp)*blockCol+cTmp-1].cutted) // right270                                 canMoveFlg = true;271                         if(canMoveFlg){272                             randomBlockLstTmp.push(randomBlockLst[checkIndex]);273                         }274                     }275                     randomBlockLst = randomBlockLstTmp;276                     //console.log(randomBlockLst);277                     if(randomBlockLst.length==1){278                         rx = randomBlockLst[0].r;279                         cx = randomBlockLst[0].c;280                     }else if(randomBlockLst.length>1){281                         var blockI = parseInt(Math.random() * (randomBlockLst.length-1));282                         rx = randomBlockLst[blockI].r;283                         cx = randomBlockLst[blockI].c;284                     }285                 }else{286                     //randomBlockLst = [];287                 }288 289             }290             if(rx != maxR && !blockLst[(rx+1)*blockCol+cx].cutted) // up291                 //if(rx+1>=maxR || blockLst[(rx+2)*blockCol+cx].cutted || (cx < maxC && !blockLst[(rx+2)*blockCol+cx+1].cutted) || (cx>0 && !blockLst[(rx+2)*blockCol+cx-1].cutted))292                     randomLst.push({r:1,c:0});293             if(rx != 0 && !blockLst[(rx-1)*blockCol+cx].cutted) // down294                 //if(rx-1<=0 || blockLst[(rx-2)*blockCol+cx].cutted || (cx < maxC && !blockLst[(rx-2)*blockCol+cx+1].cutted) || (cx>0 && !blockLst[(rx-2)*blockCol+cx-1].cutted))295                     randomLst.push({r:-1,c:0});296             if(cx != maxC && !blockLst[(rx)*blockCol+cx+1].cutted){ // left297                 var leftGo = true;298                 if(cx == maxC - 1 && rx!=0 && blocks.blockLst.length % 3 == 0){299                     if(!blockLst[(rx-1)*blockCol+cx+1].cutted)300                         leftGo = false;301                 }302                 if(leftGo)303                     //if(cx+1>=maxC || blockLst[(rx)*blockCol+cx+2].cutted || (rx < maxC && !blockLst[(rx+1)*blockCol+cx+2].cutted) || (rx>0 && !blockLst[(rx-1)*blockCol+cx+2].cutted))304                         randomLst.push({r:0,c:1});305             }306             if(cx != 0 && !blockLst[(rx)*blockCol+cx-1].cutted) // right307                 //if(cx-1<=0 || blockLst[(rx)*blockCol+cx-2].cutted || (rx < maxC && !blockLst[(rx+1)*blockCol+cx-2].cutted) || (rx>0 && !blockLst[(rx-1)*blockCol+cx-2].cutted))308                     randomLst.push({r:0,c:-1});309             if(randomLst.length == 1)310             {311                 rx += randomLst[0].r;312                 cx += randomLst[0].c;313             }else if(randomLst.length > 1){314                 var i = parseInt(Math.random() * randomLst.length);315                 rx += randomLst[i].r;316                 cx += randomLst[i].c;317             }else if(randomLst.length == 0){318                 goOn = false;319             }320 321             if(cutOverNum >= blockLst.length){322                 goOn = false;323                 picCutfinish = true;324             }325             //if(stop >= 101){goOn = false;}326         }327         //console.log(cuttedBlocksLst);328         //test to draw all blocks329         for(i=0;i<cuttedBlocksLst.length;i++){330             for (j=0; j<cuttedBlocksLst[i].blockLst.length; j++)331             {332                 cuttedBlocksLst[i].blockLst[j].draw();333             }334         }335         // big while to finish all loop336         if(picCutfinish){337             console.log(time);338             break;339         }else{340             CGM001canvasObj.context.clearRect(0,0,CGM001canvasObj.width,CGM001canvasObj.height);341             CGM001canvasObj.context.putImageData(CGM001canvasOffBGObj.context.getImageData(0, 0, CGM001canvasOffBGObj.width, CGM001canvasOffBGObj.height), 0, 0);342             time++;343             //console.log(time);344         }345     }346 }347 348 function initList(){349     var cuttedBlocksLstTmp;350     for(cbli = 0; cbli < cuttedBlocksLst.length; cbli++){351         cuttedBlocksLstTmp = null;352         cuttedBlocksLstTmp = cuttedBlocksLst[cbli];353         cuttedBlocksLstTmp.calcMinXY();354         cuttedBlocksLstTmp.calcType();355         //console.log((cbli+1)+"/"+cuttedBlocksLst.length);356     }357     358     for(i=0;i<cuttedBlocksLst[0].type.length;i++){359         //for(j=0;j<cuttedBlocksLst[0].type[i].length;j++){360             //console.log(cuttedBlocksLst[0].type[i][0],cuttedBlocksLst[0].type[i][1],cuttedBlocksLst[0].type[i][2],cuttedBlocksLst[0].type[i][3]);361         //}362     }363     //console.log(cuttedBlocksLst[0].blockLst[0].tag,cuttedBlocksLst[0].blockLst[1].tag,cuttedBlocksLst[0].blockLst[2].tag,cuttedBlocksLst[0].blockLst[3].tag,'index:',cuttedBlocksLst[0].typeNo,cuttedBlocksLst[0].typeRoateNo);364 365     /*cuttedBlocksLst[0].rotateBlocks(5);366     367     for(i=0;i<cuttedBlocksLst[0].type.length;i++){368         //for(j=0;j<cuttedBlocksLst[0].type[i].length;j++){369             console.log(cuttedBlocksLst[0].type[i][0],cuttedBlocksLst[0].type[i][1],cuttedBlocksLst[0].type[i][2],cuttedBlocksLst[0].type[i][3]);370         //}371     }372     console.log('rotate:', cuttedBlocksLst[0].rotate);*/373     // sort the down order374     //blocksOrder375     var sortCuttedBlocksTmp = [[],[]];376     var maxYTmp = cuttedBlocksLst[0].maxY;377     var sortj = 0,sorti=0;378     for(sortiTmp=0;sortiTmp<cuttedBlocksLst.length;sortiTmp++){379         if(maxYTmp != cuttedBlocksLst[sortiTmp].maxY){sortj++;sorti=0;sortCuttedBlocksTmp.push([]);maxYTmp = cuttedBlocksLst[sortiTmp].maxY;}380         sortCuttedBlocksTmp[sortj].push([]);381         sortCuttedBlocksTmp[sortj][sorti] = {no:sortiTmp,typeFirst:cuttedBlocksLst[sortiTmp].typeFirst};382         sorti++;383     }384     /*console.log(sortCuttedBlocksTmp);*/385     386     var blocksOrderColTmp = [[], []];387     388     for (x = 0; x < sortCuttedBlocksTmp.length; x++) {389         blocksOrderRow.push([[],[],[]]);390     }391     var addX = 0;392     for(x=0;x<sortCuttedBlocksTmp.length;x++){393         for(y=0;y<sortCuttedBlocksTmp[x].length;y++){394             //395             if (sortCuttedBlocksTmp[x][y].typeFirst == 3) {396                 if (blocksOrderRow.length - 1 > x + 2) {397                     addX = x + 2;398                 } else if (blocksOrderRow.length - 1 > x + 1) {399                     addX = x + 2;400                 } else { addX = x;}401                 blocksOrderRow[addX][sortCuttedBlocksTmp[x][y].typeFirst - 3].push(sortCuttedBlocksTmp[x][y].no); 402             } else {403                 blocksOrderRow[x][sortCuttedBlocksTmp[x][y].typeFirst].push(sortCuttedBlocksTmp[x][y].no);404             }405         }406         /*console.log("blocksOrderColTmp",blocksOrderColTmp);*/407         //blocksOrderRow[x]=blocksOrderColTmp;408     }409     for(xx=0;xx<blocksOrderRow.length;xx++){410         //for(yy=0;yy<blocksOrderRow[xx].length;yy++)411             //console.log(xx,yy,":",xx,blocksOrderRow[xx][yy]);412     }413     //gameOverFlg = true;414 }415 416 // Animation.....................................................417 // select the block418 var drawBlocks = null;419 var drawBlocksRow = 0;420 var drawBlocksCol = 0;421 var drawBlocksFirst = 0;422 var paused = false;423 var gameOverFlg = false;424 var initDownBlockOverFlg = false;425 var calTmpCol123 = [];426 var calTmpCol123Tmp = [];427 428 // move and change the block429 var operationLst = [];430 var moveRotate = 0;431 var moveX = 0;432 var moveY = 0;433 var getNew = true;434 435 // fps -> time436 437 var lastFpsUpdateTime = 0;438 439 function animate(time) {440    if (!paused) {441       /*context.clearRect(0,0,canvas.width,canvas.height);442       drawBackground();443       update();444       draw();*/445         updateCanvas();446         drawCanvas();447         if (!gameOverFlg) {448             window.requestNextAnimationFrame(animate);449             //console.log(drawBlocksRow,blocksOrderRow.length-1,"goon",gameOverFlg);450         }else{451             console.log(drawBlocksRow,blocksOrderRow.length-1,"stop",gameOverFlg);452         }453    }454 }455 456 function initDownBlocks(){457     drawBlocks = null;458     while(drawBlocks==null && !initDownBlockOverFlg){459         if(drawBlocksRow < blocksOrderRow.length-1){460             if(drawBlocksCol < 3){461                 if(blocksOrderRow[drawBlocksRow][drawBlocksCol].length > drawBlocksFirst){462                     //decide which one!463                     var calTmpColOrg = blocksOrderRow[drawBlocksRow][drawBlocksCol];464                     var selectIndex = 0;465                     var selectedNo = 0;466                     //tmp init467                     if(calTmpCol123.length == 0){468                         for(i123 = 0;i123<calTmpColOrg.length;i123++){469                             calTmpCol123.push(calTmpColOrg[i123]);470                             calTmpCol123Tmp.push(calTmpColOrg[i123]);471                         }472                     }473                     //console.log("in:",calTmpCol123);474                     switch(drawBlocksCol){475                         case 1:476                             //select477                             selectIndex = calTmpCol123.length-1;478                             break;479                         case 0:480                         case 2:481                         default:482                             //select483                             selectIndex = parseInt(Math.random() * (calTmpCol123.length-1));484                             break;485                     }486                     selectedNo = calTmpCol123[selectIndex];487                     //delete tmp488                     calTmpCol123 = [];489                     for(i123=0;i123<calTmpCol123Tmp.length;i123++){490                         if(selectIndex != i123){491                             calTmpCol123.push(calTmpCol123Tmp[i123]);492                         }493                     }494                     //copy to tmp495                     calTmpCol123Tmp = [];496                     for(i123=0;i123<calTmpCol123.length;i123++){497                         calTmpCol123Tmp.push(calTmpCol123[i123]);498                     }499                     drawBlocks = cuttedBlocksLst[selectedNo];500                     501                     //console.log("aa",drawBlocks.typeNo,drawBlocks.typeRoateNo,drawBlocks.rotate );502                     var initRotateTime = parseInt(Math.random() * 3);503                     // initRotateTime = 0; test504                     if(initRotateTime>=1){505                         //console.log('step1',drawBlocks.typeNo ,drawBlocks.typeRoateNo ,drawBlocks.rotate,drawBlocks.gorotate);506                         //drawBlocks.typeRoateNo = (drawBlocks.typeRoateNo + initRotateTime) % 4;507                         drawBlocks.gorotate = (initRotateTime * 90) % 360;508                         //console.log('step2',drawBlocks.typeNo ,drawBlocks.typeRoateNo ,drawBlocks.rotate,drawBlocks.gorotate);509                         //drawBlocks.gorotate = (initRotateTime * 90) % 360;510                     }511                     //drawBlocks.gorotate = drawBlocks.rotate;512                     //console.log("aa",drawBlocks.typeNo,drawBlocks.typeRoateNo,drawBlocks.rotate );513 514                     //console.log("out:",calTmpCol123,selectIndex);515                     //console.log("selectNo",selectedNo);516                     drawBlocksFirst++;517                     // crash check(gameOver)518                     drawBlocks.godisY = 0;519                     drawBlocks.godisX = 0;520                     drawBlocks.gorotate = drawBlocks.gorotate;521                     if(drawBlocks.testCrash(blockBoxLst)){522                         gameOverFlg = true;523                     }524                         //console.log('step3',drawBlocks.typeNo ,drawBlocks.typeRoateNo ,drawBlocks.rotate,drawBlocks.gorotate);525                     drawBlocks.godisY = 0;526                     drawBlocks.godisX = 0;527                     drawBlocks.gorotate = drawBlocks.gorotate;528                     if(drawBlocks.testCrash(blockBoxLst)){529                         gameOverFlg = true;530                     }531                     //console.log('step4',drawBlocks.typeNo ,drawBlocks.typeRoateNo ,drawBlocks.rotate,drawBlocks.gorotate);532                     drawBlocks.draw();533                     //gameOverFlg = true;534                     CGM001canvasOffObj.context.clearRect(0, 0, CGM001canvasOffObj.width, CGM001canvasOffObj.height);535                     CGM001canvasOffObj.context.drawImage(image, 0, 0, picWidth, picHeight);536                     drawBlocks.drawToOff();537                     538                 }else{539                     drawBlocksFirst = 0;540                     drawBlocksCol++;541                     calTmpCol123 = [];542                     calTmpCol123Tmp = [];543                 }544             }else{545                 drawBlocksCol = 0;546                 drawBlocksRow++;547             }548         }else{549             initDownBlockOverFlg = true;550             //console.log("over");551         }552     }553 }554 function updateCanvas(){555     556     var now = (+new Date);557     558     if (now - lastFpsUpdateTime > 800) {559      lastFpsUpdateTime = now;560         // action in one second561      if (getNew) {562          acSrc = acRootPath + failPath + parseInt(Math.random() * failSize) + ".png";563          initDownBlocks();564          if (initDownBlockOverFlg) {565              clearCanvas();566              console.log("you Win!");567 568              acSrc = acRootPath + goodPath + parseInt(Math.random() * goodSize) + ".png";569              $("#" + acNiangId).attr("src", acSrc);570 571              var overStr = "<div style='width:" + width + "px;position:absolute;left:10px;top:150px; text-align:center;'><span style='color:red;font-size:50px;font-weight:bold;'>恭喜，你赢啦！</span><br /><input type='button' value='再来一次' onclick='javascript: location.reload();' /></div>"572 573              $("body").append($(overStr));574              $("#" + bgId).hide();575              $("#" + idC).hide();576              $("#" + stsId).hide();577              gameOverFlg = true;578              return;579          }580          moveX = 0;581          moveY = 0;582          moveRotate = drawBlocks.rotate;583          getNew = false;584          currB++;585          $("#" + countId).html("第 " + currB + " 块/共 " + countB + " 块");586          $("#" + stsId).css({ 'left': ($("#" + stsId).width() + 10) * -1 });587      } else {588          acSrc = acRootPath + nomalPath + parseInt(Math.random() * nomalSize) + ".png";589      }590      $("#" + acNiangId).attr("src",acSrc);591         if(!gameOverFlg){592             if(initDownBlockOverFlg || drawBlocks==null){593                 gameOverFlg = true;594                 moveX = 0;595                 moveY = 0;596                 moveRotate = 0;597                 return;598             }599             moveY += drawBlocks.blockSize;600             drawBlocks.godisX = moveX;601             drawBlocks.godisY = moveY;602             drawBlocks.gorotate = moveRotate;603             //peng zhuang604             drawBlocks.crash(blockBoxLst);605             //console.log(drawBlocks.crashFlg,drawBlocks.doneFlg);606             //mei you peng zhuang607             608             // peng zhuang609             saveClearCanvas();610             //drawBlocks.draw();611             //drawBlocks.blockAgainFlg=false;612             if (drawBlocks.blockAgainFlg) {613                 acSrc = acRootPath + failPath + parseInt(Math.random() * failSize) + ".png";614                 $("#" + acNiangId).attr("src", acSrc);615                 drawBlocks.disX = 0;616                 drawBlocks.disY = 0;617                 drawBlocks.godisX = 0;618                 drawBlocks.godisY = 0;619                 moveX = 0;620                 moveY = 0;621                 drawBlocks.doneFlg = false;622                 drawBlocks.crashFlg = false;623                 drawBlocks.blockAgainFlg = false;624                 failB++;625                 $("#" + failCountId).html(failB > maxFail ? maxMsg : failB);626                 $("#" + stsId).css({ 'left': ($("#" + stsId).width() + 10) * -1 });627             } else if (drawBlocks.doneFlg || drawBlocks.crashFlg) {628                 getNew = true;629                 acSrc = acRootPath + goodPath + parseInt(Math.random() * goodSize) + ".png";630                 $("#" + acNiangId).attr("src", acSrc);631                 fixB++;632                 $("#" + fixCountId).html(fixB);633                 $("#" + stsId).css({ 'left': ($("#" + stsId).width() + 10) * -1 });634             } else {635                 drawBlocks.draw();636             }637         } else {drawBlocks.draw();}638 639     }640 }641 642 function drawCanvas(){}643 644 function onKeyUp(e){645     if(drawBlocks!=null){646         var gomoveX;647         var gomoveY;648         var gomoveRotate;649         var currKey = 0,e=e||e.event;650         currKey = e.keyCode || e.which || e.charCode;651         var keyName = String.fromCharCode(currKey);652         gomoveRotate = drawBlocks.rotate;653         gomoveX = drawBlocks.disX;654         gomoveY = drawBlocks.disY;655         switch(currKey){656             case 38:657                 //up658                 gomoveRotate =(drawBlocks.rotate + 90);659                 break;660             case 40:661                 //down662                 gomoveY = drawBlocks.disY + blockSize;663                 break;664             case 39:665                 //right666                 gomoveX =drawBlocks.disX + blockSize;667                 break;668             case 37:669                 //left670                 gomoveX =drawBlocks.disX - blockSize;671                 break;672             default:673                 break;674         }675         drawBlocks.godisY = gomoveY;676         drawBlocks.godisX = gomoveX;677         drawBlocks.gorotate = gomoveRotate;678         //console.log("inp",drawBlocks.rotate,gomoveRotate);679         if(drawBlocks.testCrash(blockBoxLst)){680             681         } else {682             acSrc = acRootPath + goodPath + parseInt(Math.random() * goodSize) + ".png";683             $("#" + acNiangId).attr("src", acSrc);684             moveX = gomoveX;685             moveY = gomoveY;686             moveRotate = gomoveRotate;687             drawBlocks.crash(blockBoxLst);688             saveClearCanvas();689             drawBlocks.draw();690         }691     }692 }693 694 function saveClearCanvas(){695     CGM001canvasObj.context.clearRect(0,0,CGM001canvasObj.width,CGM001canvasObj.height);696     CGM001canvasObj.context.putImageData(CGM001canvasOffObjAnimation.context.getImageData(0,0,CGM001canvasOffObjAnimation.width,CGM001canvasOffObjAnimation.height),0,0);697 };

blockTypeData:

  1 // blocks type  2 // 1 zi  3 var type1_1 = [  4 [1,0,0,0],  5 [1,0,0,0],  6 [1,0,0,0],  7 [1,0,0,0]];  8 var type1_2 = [  9 [1,1,1,1], 10 [0,0,0,0], 11 [0,0,0,0], 12 [0,0,0,0]]; 13 var type1 = [type1_1,type1_2]; 14 var typeRoate1_1 = [ 15 [1,0,0,0], 16 [2,0,0,0], 17 [3,0,0,0], 18 [4,0,0,0]]; 19 var typeRoateXY1_1 = [ 20 {r:0,c:0}, 21 {r:0,c:0}, 22 {r:1,c:0}, 23 {r:2,c:0}, 24 {r:3,c:0} 25 ]; 26 var typeFirst1_1 = 0; 27 var typeRoate1_2 = [ 28 [4,3,2,1], 29 [0,0,0,0], 30 [0,0,0,0], 31 [0,0,0,0]]; 32 var typeRoateXY1_2 = [ 33 {r:0,c:0}, 34 {r:0,c:3}, 35 {r:0,c:2}, 36 {r:0,c:1}, 37 {r:0,c:0} 38 ]; 39 var typeFirst1_2 = 0; 40 var typeRoate1_3 = [ 41 [4,0,0,0], 42 [3,0,0,0], 43 [2,0,0,0], 44 [1,0,0,0]]; 45 var typeRoateXY1_3 = [ 46 {r:0,c:0}, 47 {r:3,c:0}, 48 {r:2,c:0}, 49 {r:1,c:0}, 50 {r:0,c:0} 51 ]; 52 var typeFirst1_3 = 0; 53 var typeRoate1_4 = [ 54 [1,2,3,4], 55 [0,0,0,0], 56 [0,0,0,0], 57 [0,0,0,0]]; 58 var typeRoateXY1_4 = [ 59 {r:0,c:0}, 60 {r:0,c:0}, 61 {r:0,c:1}, 62 {r:0,c:2}, 63 {r:0,c:3} 64 ]; 65 var typeFirst1_4 = 0; 66 var typeRoate1 = [typeRoate1_1,typeRoate1_2,typeRoate1_3,typeRoate1_4]; 67 var typeRoateXY1 = [typeRoateXY1_1,typeRoateXY1_2,typeRoateXY1_3,typeRoateXY1_4]; 68 var typeFirst1 = [typeFirst1_1,typeFirst1_2,typeFirst1_3,typeFirst1_4]; 69 // tian zi 70 var type2_1 = [ 71 [1,1,0,0], 72 [1,1,0,0], 73 [0,0,0,0], 74 [0,0,0,0]]; 75 var type2 = [type2_1]; 76 var typeRoate2_1 = [ 77 [1,2,0,0], 78 [4,3,0,0], 79 [0,0,0,0], 80 [0,0,0,0]]; 81 var typeRoateXY2_1 = [ 82 {r:0,c:0}, 83 {r:0,c:0}, 84 {r:0,c:1}, 85 {r:1,c:1}, 86 {r:1,c:0} 87 ]; 88 var typeFirst2_1 = 0; 89 var typeRoate2_2 = [ 90 [4,1,0,0], 91 [3,2,0,0], 92 [0,0,0,0], 93 [0,0,0,0]]; 94 var typeRoateXY2_2 = [ 95 {r:0,c:0}, 96 {r:0,c:1}, 97 {r:1,c:1}, 98 {r:1,c:0},  99 {r:0,c:0}100 ];101 var typeFirst2_2 = 0;102 var typeRoate2_3 = [103 [3,4,0,0],104 [2,1,0,0],105 [0,0,0,0],106 [0,0,0,0]];107 var typeRoateXY2_3 = [108 {r:0,c:0},109 {r:1,c:1},110 {r:1,c:0}, 111 {r:0,c:0},112 {r:0,c:1}113 ];114 var typeFirst2_3 = 0;115 var typeRoate2_4 = [116 [2,3,0,0],117 [1,4,0,0],118 [0,0,0,0],119 [0,0,0,0]];120 var typeRoateXY2_4 = [121 {r:0,c:0},122 {r:1,c:0}, 123 {r:0,c:0},124 {r:0,c:1},125 {r:1,c:1}126 ];127 var typeFirst2_4 = 0;128 var typeRoate2 = [typeRoate2_1,typeRoate2_2,typeRoate2_3,typeRoate2_4];129 var typeRoateXY2 = [typeRoateXY2_1,typeRoateXY2_2,typeRoateXY2_3,typeRoateXY2_4];130 var typeFirst2 = [typeFirst2_1,typeFirst2_2,typeFirst2_3,typeFirst2_4];131 // L zi132 var type3_1 = [133 [1,0,0,0],134 [1,0,0,0],135 [1,1,0,0],136 [0,0,0,0]];137 var type3_2 = [138 [1,1,1,0],139 [1,0,0,0],140 [0,0,0,0],141 [0,0,0,0]];142 var type3_3 = [143 [1,1,0,0],144 [0,1,0,0],145 [0,1,0,0],146 [0,0,0,0]];147 var type3_4 = [148 [0,0,1,0],149 [1,1,1,0],150 [0,0,0,0],151 [0,0,0,0]];152 var type3 = [type3_1,type3_2,type3_3,type3_4];153 var typeRoate3_1 = [154 [1,0,0,0],155 [2,0,0,0],156 [3,4,0,0],157 [0,0,0,0]];158 var typeRoateXY3_1 = [159 {r:0,c:0},160 {r:0,c:0}, 161 {r:1,c:0},162 {r:2,c:0},163 {r:2,c:1}164 ];165 var typeFirst3_1 = 0;166 var typeRoate3_2 = [167 [3,2,1,0],168 [4,0,0,0],169 [0,0,0,0],170 [0,0,0,0]];171 var typeRoateXY3_2 = [172 {r:0,c:0},173 {r:0,c:2}, 174 {r:0,c:1},175 {r:0,c:0},176 {r:1,c:0}177 ];178 var typeFirst3_2 = 2;179 var typeRoate3_3 = [180 [4,3,0,0],181 [0,2,0,0],182 [0,1,0,0],183 [0,0,0,0]];184 var typeRoateXY3_3 = [185 {r:0,c:0},186 {r:2,c:1}, 187 {r:1,c:1},188 {r:0,c:1},189 {r:0,c:0}190 ];191 var typeFirst3_3 = 3;192 var typeRoate3_4 = [193 [0,0,4,0],194 [1,2,3,0],195 [0,0,0,0],196 [0,0,0,0]];197 var typeRoateXY3_4 = [198 {r:0,c:0},199 {r:1,c:0}, 200 {r:1,c:1},201 {r:1,c:2},202 {r:0,c:2}203 ];204 var typeFirst3_4 = 0;205 var typeRoate3 = [typeRoate3_1,typeRoate3_2,typeRoate3_3,typeRoate3_4];206 var typeRoateXY3 = [typeRoateXY3_1,typeRoateXY3_2,typeRoateXY3_3,typeRoateXY3_4];207 var typeFirst3 = [typeFirst3_1,typeFirst3_2,typeFirst3_3,typeFirst3_4];208 // ~L zi209 var type4_1 = [210 [0,1,0,0],211 [0,1,0,0],212 [1,1,0,0],213 [0,0,0,0]];214 var type4_2 = [215 [1,0,0,0],216 [1,1,1,0],217 [0,0,0,0],218 [0,0,0,0]];219 var type4_3 = [220 [1,1,0,0],221 [1,0,0,0],222 [1,0,0,0],223 [0,0,0,0]];224 var type4_4 = [225 [1,1,1,0],226 [0,0,1,0],227 [0,0,0,0],228 [0,0,0,0]];229 var type4 = [type4_1,type4_2,type4_3,type4_4];230 var typeRoate4_1 = [231 [0,1,0,0],232 [0,2,0,0],233 [4,3,0,0],234 [0,0,0,0]];235 var typeRoateXY4_1 = [236 {r:0,c:0},237 {r:0,c:1}, 238 {r:1,c:1},239 {r:2,c:1},240 {r:2,c:0}241 ];242 var typeFirst4_1 = 0;243 var typeRoate4_2 = [244 [4,0,0,0],245 [3,2,1,0],246 [0,0,0,0],247 [0,0,0,0]];248 var typeRoateXY4_2 = [249 {r:0,c:0},250 {r:1,c:2}, 251 {r:1,c:1},252 {r:1,c:0},253 {r:0,c:0}254 ];255 var typeFirst4_2 = 0;256 var typeRoate4_3 = [257 [3,4,0,0],258 [2,0,0,0],259 [1,0,0,0],260 [0,0,0,0]];261 var typeRoateXY4_3 = [262 {r:0,c:0},263 {r:2,c:0}, 264 {r:1,c:0},265 {r:0,c:0},266 {r:0,c:1}267 ];268 var typeFirst4_3 = 3;269 var typeRoate4_4 = [270 [1,2,3,0],271 [0,0,4,0],272 [0,0,0,0],273 [0,0,0,0]];274 var typeRoateXY4_4 = [275 {r:0,c:0},276 {r:0,c:0}, 277 {r:0,c:1},278 {r:0,c:2},279 {r:1,c:2}280 ];281 var typeFirst4_4 = 2;282 var typeRoate4 = [typeRoate4_1,typeRoate4_2,typeRoate4_3,typeRoate4_4];283 var typeRoateXY4 = [typeRoateXY4_1,typeRoateXY4_2,typeRoateXY4_3,typeRoateXY4_4];284 var typeFirst4 = [typeFirst4_1,typeFirst4_2,typeFirst4_3,typeFirst4_4];285 // Z zi286 var type5_1 = [287 [1,1,0,0],288 [0,1,1,0],289 [0,0,0,0],290 [0,0,0,0]];291 var type5_2 = [292 [0,1,0,0],293 [1,1,0,0],294 [1,0,0,0],295 [0,0,0,0]];296 var type5 = [type5_1,type5_2];297 var typeRoate5_1 = [298 [1,2,0,0],299 [0,3,4,0],300 [0,0,0,0],301 [0,0,0,0]];302 var typeRoateXY5_1 = [303 {r:0,c:0},304 {r:0,c:0}, 305 {r:0,c:1},306 {r:1,c:1},307 {r:1,c:2}308 ];309 var typeFirst5_1 = 1;310 var typeRoate5_2 = [311 [0,1,0,0],312 [3,2,0,0],313 [4,0,0,0],314 [0,0,0,0]];315 var typeRoateXY5_2 = [316 {r:0,c:0},317 {r:0,c:1}, 318 {r:1,c:1},319 {r:1,c:0},320 {r:2,c:0}321 ];322 var typeFirst5_2 = 1;323 var typeRoate5_3 = [324 [4,3,0,0],325 [0,2,1,0],326 [0,0,0,0],327 [0,0,0,0]];328 var typeRoateXY5_3 = [329 {r:0,c:0},330 {r:1,c:2}, 331 {r:1,c:1},332 {r:0,c:1},333 {r:0,c:0}334 ];335 var typeFirst5_3 = 1;336 var typeRoate5_4 = [337 [0,4,0,0],338 [2,3,0,0],339 [1,0,0,0],340 [0,0,0,0]];341 var typeRoateXY5_4 = [342 {r:0,c:0},343 {r:2,c:0}, 344 {r:1,c:0},345 {r:1,c:1},346 {r:0,c:1}347 ];348 var typeFirst5_4 = 1;349 var typeRoate5 = [typeRoate5_1,typeRoate5_2,typeRoate5_3,typeRoate5_4];350 var typeRoateXY5 = [typeRoateXY5_1,typeRoateXY5_2,typeRoateXY5_3,typeRoateXY5_4];351 var typeFirst5 = [typeFirst5_1,typeFirst5_2,typeFirst5_3,typeFirst5_4];352 // ~Z zi353 var type6_1 = [354 [0,1,1,0],355 [1,1,0,0],356 [0,0,0,0],357 [0,0,0,0]];358 var type6_2 = [359 [1,0,0,0],360 [1,1,0,0],361 [0,1,0,0],362 [0,0,0,0]];363 var type6 = [type6_1,type6_2];364 var typeRoate6_1 = [365 [0,3,4,0],366 [1,2,0,0],367 [0,0,0,0],368 [0,0,0,0]];369 var typeRoateXY6_1 = [370 {r:0,c:0},371 {r:1,c:0}, 372 {r:1,c:1},373 {r:0,c:1},374 {r:0,c:2}375 ];376 var typeFirst6_1 = 1;377 var typeRoate6_2 = [378 [1,0,0,0],379 [2,3,0,0],380 [0,4,0,0],381 [0,0,0,0]];382 var typeRoateXY6_2 = [383 {r:0,c:0},384 {r:0,c:0}, 385 {r:1,c:0},386 {r:1,c:1},387 {r:2,c:1}388 ];389 var typeFirst6_2 = 1;390 var typeRoate6_3 = [391 [0,2,1,0],392 [4,3,0,0],393 [0,0,0,0],394 [0,0,0,0]];395 var typeRoateXY6_3 = [396 {r:0,c:0},397 {r:0,c:2}, 398 {r:0,c:1},399 {r:1,c:1},400 {r:1,c:0}401 ];402 var typeFirst6_3 = 1;403 var typeRoate6_4 = [404 [4,0,0,0],405 [3,2,0,0],406 [0,1,0,0],407 [0,0,0,0]];408 var typeRoateXY6_4 = [409 {r:0,c:0},410 {r:2,c:1}, 411 {r:1,c:1},412 {r:1,c:0},413 {r:0,c:0}414 ];415 var typeFirst6_4 = 1;416 var typeRoate6 = [typeRoate6_1,typeRoate6_2,typeRoate6_3,typeRoate6_4];417 var typeRoateXY6 = [typeRoateXY6_1,typeRoateXY6_2,typeRoateXY6_3,typeRoateXY6_4];418 var typeFirst6 = [typeFirst6_1,typeFirst6_2,typeFirst6_3,typeFirst6_4];419 // T zi420 var type7_1 = [421 [1,1,1,0],422 [0,1,0,0],423 [0,0,0,0],424 [0,0,0,0]];425 var type7_2 = [426 [0,1,0,0],427 [1,1,0,0],428 [0,1,0,0],429 [0,0,0,0]];430 var type7_3 = [431 [0,1,0,0],432 [1,1,1,0],433 [0,0,0,0],434 [0,0,0,0]];435 var type7_4 = [436 [1,0,0,0],437 [1,1,0,0],438 [1,0,0,0],439 [0,0,0,0]];440 var type7 = [type7_1,type7_2,type7_3,type7_4];441 var typeRoate7_1 = [442 [1,2,3,0],443 [0,4,0,0],444 [0,0,0,0],445 [0,0,0,0]];446 var typeRoateXY7_1 = [447 {r:0,c:0},448 {r:0,c:0}, 449 {r:0,c:1},450 {r:0,c:2},451 {r:1,c:1}452 ];453 var typeFirst7_1 = 2;454 var typeRoate7_2 = [455 [0,1,0,0],456 [4,2,0,0],457 [0,3,0,0],458 [0,0,0,0]];459 var typeRoateXY7_2 = [460 {r:0,c:0},461 {r:0,c:1}, 462 {r:1,c:1},463 {r:2,c:1},464 {r:1,c:0}465 ];466 var typeFirst7_2 = 2;467 var typeRoate7_3 = [468 [0,4,0,0],469 [3,2,1,0],470 [0,0,0,0],471 [0,0,0,0]];472 var typeRoateXY7_3 = [473 {r:0,c:0},474 {r:1,c:2}, 475 {r:1,c:1},476 {r:1,c:0},477 {r:0,c:1}478 ];479 var typeFirst7_3 = 0;480 var typeRoate7_4 = [481 [3,0,0,0],482 [2,4,0,0],483 [1,0,0,0],484 [0,0,0,0]];485 var typeRoateXY7_4 = [486 {r:0,c:0},487 {r:2,c:0}, 488 {r:1,c:0},489 {r:0,c:0},490 {r:1,c:1}491 ];492 var typeFirst7_4 = 2;493 var typeRoate7 = [typeRoate7_1,typeRoate7_2,typeRoate7_3,typeRoate7_4];494 var typeRoateXY7 = [typeRoateXY7_1,typeRoateXY7_2,typeRoateXY7_3,typeRoateXY7_4];495 var typeFirst7 = [typeFirst7_1,typeFirst7_2,typeFirst7_3,typeFirst7_4];496 497 var typeLst = [type1,type2,type3,type4,type5,type6,type7];498 var typeRoateLst = [typeRoate1,typeRoate2,typeRoate3,typeRoate4,typeRoate5,typeRoate6,typeRoate7];499 var typeRoateXYLst = [typeRoateXY1,typeRoateXY2,typeRoateXY3,typeRoateXY4,typeRoateXY5,typeRoateXY6,typeRoateXY7];500 var typeFirst = [typeFirst1,typeFirst2,typeFirst3,typeFirst4,typeFirst5,typeFirst6,typeFirst7];

XXXEntity等，懒得贴了。。。

---

CSDN下载：

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

0 0