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 /> 版权所有©王欣盛 <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].d
新闻热点
疑难解答
