在看了W3C的关于ECMScript的对象及继承后，先是完成贪吃蛇的实现。最近又抽空实现了下俄罗斯方块。对于俄罗斯方块重要的不是游戏本身，而是在这个过程中对于javascript继承的使用。

当然在一些对象的划分及使用过程还存在瑕疵，算法也不算最优，发布出源码只是想做个交流。以下就提供源代码供大家参考，也为自己做个备份。也可在直接点击下载。游戏效果图为：

这里对代码不做说明了，可以看代码块中的注释//********************************Utils.js******************************************************* /** * 辅助类 * @author leeyee * @blog blog.csdn.net/oxcow * @email seadlead@gmail.com * @data 2010-4 */ /** * 创建DOM元素 * * @param sTagName * 元素名 * @param sTagId * 元素ID * @param sText * 元素文本 * @return DOM元素对象 */ function createElement(sTagName, sTagId, sText) { var oElement = document.createElement(sTagName); if (sTagId != null) { oElement.setAttribute("id", sTagId); } if (sText != null) { oElement.appendChild(document.createTextNode(sText)); } return oElement; } function RandomEventUtils() { } /** * 得到从零到N的随机整数 * * @param iN * 最大整数 * @return 0-iN的随机整数 */ RandomEventUtils.getIntRandomNumFromZeroToN = function(iN) { var iR = Math.random() * iN; return Math.round(iR);// 舍尾取数 }; /** * 获取某个元素在数组中的位置 * * @param vItem * 目标元素 * @return 目标元素在数组中的索引 */ Array.prototype.indexOf = function(vItem) { for ( var i = 0; i < this.length; i++) { if (vItem == this[i]) { return i; } } return -1; }; /** * 获取数组的长度。不包括undefined元素 * * @return */ Array.prototype._length = function() { var __len = 0; for ( var i = 0; i < this.length; i++) { if (this[i] != undefined) { __len++; } } return __len; }; /** * 清除数组中的undefined元素 * * @return 数组清除后的数组（数组长度改变） */ Array.prototype.cleanUndefinedElement = function() { for ( var i = 0; i < this.length; i++) { if (this[i] == undefined) { this.splice(i--, 1); } } return this; }; /** * 创建一个长度为 iLen 的二维数组，其中第二位数组的长度未定义 * * @param iLen * 数组长度 * @return */ function createTwoDimensionArray(iLen) { var __aDefaultArray = new Array(iLen); for ( var i = 0; i < iLen; i++) { __aDefaultArray[i] = new Array(); } return __aDefaultArray; } /** * 将目标数组 aObj 以 iN 分组。具有相同商的放在相同维度中，同时根据余数确定二维存放位置<br/> * * 比如将 [1,3,21] 以10分组，那么返回的二维数组为：[[1,,3],[],[21]] * * @param aObj * 目标数组 * @param iN * 分组因子 * @return 一个长度为20的二维数组 */ function elementGroupByN(aObj, iN) { var __aZeroArray = createTwoDimensionArray(20, new Array()); for ( var i = 0; i < aObj.length; i++) { var __quotient = Math.floor((aObj[i] - 1) / iN);// 取商(被10除,商相同的元素为一组) var __remainder = (aObj[i] - 1) % iN;// 取余 __aZeroArray[__quotient][__remainder] = aObj[i];// 商相同的放在相同维度的余数位置 } return __aZeroArray; } // ***********************************************Canvas.js******************************************************* /** * 俄罗斯方块所在画布类 * * @author leeyee * @blog blog.csdn.net/oxcow * @email seadlead@gmail.com * @data 2010-4 * @param iRow * 画布行数 * @param iColumn * 画布列数 * @param sOffset * 画布显示位置 */ function Canvas(iRow, iColumn, sOffset) { this.row = iRow;// 行 this.column = iColumn;// 列 this.offset = sOffset;// 显示位置 } Canvas.prototype.draw = function() { var oDiv_canvas = document.getElementById(this.offset); if (oDiv_canvas == null) { oDiv_canvas = createElement("div", this.offset, null); document.body.appendChild(oDiv_canvas); } var oFragment = document.createDocumentFragment();// 创建文档碎片 for ( var i = 1; i <= this.row * this.column; i++) { var oSpan = createElement("span", i, null); oFragment.appendChild(oSpan); } oDiv_canvas.appendChild(oFragment); }; /** * 预览画布类 * * @param iRow * 行数 * @param iColumn * 列数 * @param sOffset * 显示位置 * @return */ function PreCanvas(iRow, iColumn, sOffset) { this.row = iRow; this.column = iColumn; this.offset = sOffset; } PreCanvas.prototype.draw = function() { var oDiv_pre <div class="clearfix"></div> </div> <nav aria-label="..."> <ul class="pager"> <li class="previous"><a href="39072">上一篇： ssh如何知道删除实体成不成功 </a></li> <li class="next"><a href="14301">下一篇： JS统制窗口居中 </a></li> </ul> </nav> <div class="alert alert-warning" role="alert"> <strong>免责声明：</strong> 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。 </div> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">相关资料<span><a target="_blank" class="pull-right" href="/javasript/">更多></a></span></h3> </div> <div class="panel-body row"> <ol> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/3081' title=' parseFloat()的使用,该怎么解决 ' target="_blank"> parseFloat()的使用,该怎么解决 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/26895' title=' 关于<pre>标签的运用 ' target="_blank"> 关于<pre>标签的运用 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/15442' title=' (转)JS获取浏览器窗口大小 获取荧幕，浏览器，网页高度宽度 ' target="_blank"> (转)JS获取浏览器窗口大小 获取荧幕，浏览器，网页高度宽度 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/30417' title=' 关于网页游戏的图片预加载技术！解决办法 ' target="_blank"> 关于网页游戏的图片预加载技术！解决办法 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/23577' title=' ExtJs FormPanel 其余组件的应用 ' target="_blank"> ExtJs FormPanel 其余组件的应用 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/6194' title=' 閫夋嫨JSF涓嶉€塖truts鐨勫崄澶х悊鐢 ' target="_blank"> 閫夋嫨JSF涓嶉€塖truts鐨勫崄澶х悊鐢 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/6740' title=' 怎么用JS模拟页面放大缩小的效果 ' target="_blank"> 怎么用JS模拟页面放大缩小的效果 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/14140' title=' 各种浏览器上用JS获取文件域的文件路径的方法 ' target="_blank"> 各种浏览器上用JS获取文件域的文件路径的方法 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/31282' title=' 请问safari中调用iframe父页面 ' target="_blank"> 请问safari中调用iframe父页面 </a></li></div> </ol> </div> </div> </div> <div class="col-lg-4 hidden-sm hidden-xs"> <!--右边的内容--> <a id="AdPageRight1_AdPageRight" href="http://www.tdyun.com/host/?aiyiweb" target="_blank"><img class="img-responsive" src="/images/TdPageAd/host.png" alt="香港全能空间 香港高速云虚拟主机PHP/ASP/NET送MSSQL和MYSQL" /></a> <script src='/Scripts/AdContentPage300_1.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_2.js' language='javascript'></script> <script src='/Scripts/AdContentPage300_3.js' language='javascript'></script> <div class="panel panel-default"> <div class="panel-heading"> <h3 class="panel-title">推荐阅读<span><a target="_blank" class="pull-right" href="/javasript/">更多></a></span></h3> </div> <div class="panel-body"> <ol> <li class="articleAbout"><a href=/javasript/37094 title=' 怎么求出当前的document.body高度 ' target="_blank"> 怎么求出当前的document.body高度 </a></li> <li class="articleAbout"><a href=/javasript/4745 title=' Js脚本实现选项卡的范例 ' target="_blank"> Js脚本实现选项卡的范例 </a></li> <li class="articleAbout"><a href=/javasript/8585 title=' javascript兑现文本域的写入字符个数 限定字数 ' target="_blank"> javascript兑现文本域的写入字符个数 限定字数 </a></li> <li class="articleAbout"><a href=/javasript/25893 title=' JavaScript中婚配URL的正则表达式 ' target="_blank"> JavaScript中婚配URL的正则表达式 </a></li> <li class="articleAbout"><a href=/javasript/9105 title=' jQueryValidateEngine.js关于checkbox异常提示 ' target="_blank"> jQueryValidateEngine.js关于checkbox异常提示 </a></li> <li class="articleAbout"><a href=/javasript/27603 title=' 纯JS兑现年月日的三级联动 ' target="_blank"> 纯JS兑现年月日的三级联动 </a></li> <li class="articleAbout"><a href=/javasript/18002 title=' Javascript之url传值中文乱码解决办法 ' target="_blank"> Javascript之url传值中文乱码解决办法 </a></li> <li class="articleAbout"><a href=/javasript/5551 title=' 透过js分页 ' target="_blank"> 透过js分页 </a></li> <li class="articleAbout"><a href=/javasript/2311 title=' 探索JavaScript中Null跟Undefined的深渊 ' target="_blank"> 探索JavaScript中Null跟Undefined的深渊 </a></li> <li class="articleAbout"><a href=/javasript/18636 title=' javascript中Array.prototype指向的对像样什么 ' target="_blank"> javascript中Array.prototype指向的对像样什么 </a></li> <li class="articleAbout"><a href=/javasript/29127 title=' PrimeFaces 3.0 JSF 开发笔记——tabview ' target="_blank"> PrimeFaces 3.0 JSF 开发笔记——tabview </a></li> <li class="articleAbout"><a href=/javasript/5795 title=' 网页游戏开发JS代码如何写 ' target="_blank"> 网页游戏开发JS代码如何写 </a></li> <li class="articleAbout"><a href=/javasript/19228 title=' 从写 js validation 验证框架 ' target="_blank"> 从写 js validation 验证框架 </a></li> <li class="articleAbout"><a href=/javasript/22842 title=' 用户登录弹出提醒层 ' target="_blank"> 用户登录弹出提醒层 </a></li> <li class="articleAbout"><a href=/javasript/6447 title=' Jav8: Java里边调用js代码 ' target="_blank"> Jav8: Java里边调用js代码 </a></li> <li class="articleAbout"><a href=/javasript/32928 title=' Ext.grid.GridPanel+WEB SERVICE分页-新手 ' target="_blank"> Ext.grid.GridPanel+WEB SERVICE分页-新手 </a></li> <li class="articleAbout"><a href=/javasript/6831 title=' 15[^四,\D]这个正则表达式是什么意思 ' target="_blank"> 15[^四,\D]这个正则表达式是什么意思 </a></li> <li class="articleAbout"><a href=/javasript/21741 title=' Ext js Ajax 根本用法 ' target="_blank"> Ext js Ajax 根本用法 </a></li> <li class="articleAbout"><a href=/javasript/2697 title=' jquery怎么加载外部地址啊 ' target="_blank"> jquery怎么加载外部地址啊 </a></li> <li class="articleAbout"><a href=/javasript/23844 title=' PyJs-一种崭新的CommonJs的浏览器端实现 ' target="_blank"> PyJs-一种崭新的CommonJs的浏览器端实现 </a></li> </ol> </div> </div> </div> </div> <div class="clearfix"></div> <footer class=" footer navbar-bottom"> <em>友情链接：</em> <a href="http://www.aiyiweb.com/" target="_blank">爱易网 </a> <a href="http://www.aiyiweb.com/" target="_blank">云虚拟主机技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">云服务器技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">程序设计技术 </a> <a href="http://www.aiyiweb.com/" target="_blank">开发网站 </a> <a href="http://www.aiyiweb.com/" target="_blank">APP开发教程 </a> <br /> <script type="text/javascript">(function(){document.write(unescape('%3Cdiv id="bdcs"%3E%3C/div%3E'));var bdcs = document.createElement('script');bdcs.type = 'text/javascript';bdcs.async = true;bdcs.src = 'http://znsv.baidu.com/customer_search/api/js?sid=15239353030108964139' + '&plate_url=' + encodeURIComponent(window.location.href) + '&t=' + Math.ceil(new Date()/3600000);var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(bdcs, s);})();</script> Copyright © 2013-2024 爱易网页 当前在线：563人　 网站在2时56分40秒内访问总人数：109632人 当前 41.91% 　<a href="https://beian.miit.gov.cn" target="_blank">粤ICP备18100884号-2 </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({ id: "JszEmKrtpbU59dY5", ck: "JszEmKrtpbU59dY5" })</script> </footer> </div> </body> </html>