在看了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="14303">上一篇： 简陋的JS台历 </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/16403' title=' 懂得 JavaScript 闭包 ' target="_blank"> 懂得 JavaScript 闭包 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/23165' title=' 获取特定tr内的checkbox属性值解决办法 ' target="_blank"> 获取特定tr内的checkbox属性值解决办法 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/32178' title=' 一些页面表单包装类 ' target="_blank"> 一些页面表单包装类 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/12287' title=' javascript批改对象！ ' target="_blank"> javascript批改对象！ </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/26903' title=' 现时的Web类网站和WAP类网站有什么区别 ' target="_blank"> 现时的Web类网站和WAP类网站有什么区别 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/7930' title=' 页面加载就去掉body style的属性,该如何处理 ' target="_blank"> 页面加载就去掉body style的属性,该如何处理 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/24595' title=' 21世纪普普通通高等教育应用型规划教材·计算机系列：JSP网络程序设计 ' target="_blank"> 21世纪普普通通高等教育应用型规划教材·计算机系列：JSP网络程序设计 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/33263' title=' 求教关于作用域的有关问题 ' target="_blank"> 求教关于作用域的有关问题 </a></li></div> <div class="col-md-6 col-xs-12"> <li class="articleAbout"><a href='/javasript/33197' title=' highcharts中如何调整第一个数据的宽度 ' target="_blank"> highcharts中如何调整第一个数据的宽度 </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/7606 title=' js中时间有关问题 ' target="_blank"> js中时间有关问题 </a></li> <li class="articleAbout"><a href=/javasript/25403 title=' javascript基本门类数据自动转化 ' target="_blank"> javascript基本门类数据自动转化 </a></li> <li class="articleAbout"><a href=/javasript/10008 title=' 请教什么时候用valueOf什么时候用toString ' target="_blank"> 请教什么时候用valueOf什么时候用toString </a></li> <li class="articleAbout"><a href=/javasript/31877 title=' 如何把sortable里面的项拖到dragglable里面【讨论有分哦】 ' target="_blank"> 如何把sortable里面的项拖到dragglable里面【讨论有分哦】 </a></li> <li class="articleAbout"><a href=/javasript/24400 title=' Javascript Label话语的应用 ' target="_blank"> Javascript Label话语的应用 </a></li> <li class="articleAbout"><a href=/javasript/37218 title=' 请问一个正则有关问题 ' target="_blank"> 请问一个正则有关问题 </a></li> <li class="articleAbout"><a href=/javasript/38774 title=' 郁闷了，散分。 ' target="_blank"> 郁闷了，散分。 </a></li> <li class="articleAbout"><a href=/javasript/33489 title=' ，javascript函数形参声明时有var和没有var有什么区别 ' target="_blank"> ，javascript函数形参声明时有var和没有var有什么区别 </a></li> <li class="articleAbout"><a href=/javasript/32591 title=' js设置编码有关问题 ' target="_blank"> js设置编码有关问题 </a></li> <li class="articleAbout"><a href=/javasript/19088 title=' 怎么判断当前鼠标是否在一个指定的元素下面 ' target="_blank"> 怎么判断当前鼠标是否在一个指定的元素下面 </a></li> <li class="articleAbout"><a href=/javasript/24032 title=' js兑现弹出框 选择功能 ' target="_blank"> js兑现弹出框 选择功能 </a></li> <li class="articleAbout"><a href=/javasript/24890 title=' Ext.decode 报错 没法获取属性“replace”的值: 对象为 null 或未定义 位于ext-base.js ' target="_blank"> Ext.decode 报错 没法获取属性“replace”的值: 对象为 null 或未定义 位于ext-base.js </a></li> <li class="articleAbout"><a href=/javasript/18576 title=' Nodejs v0.8.12装配 ' target="_blank"> Nodejs v0.8.12装配 </a></li> <li class="articleAbout"><a href=/javasript/18476 title=' 这个正则式如何写 ' target="_blank"> 这个正则式如何写 </a></li> <li class="articleAbout"><a href=/javasript/32010 title=' JS写的checkbox全选为什么在IE8中有BUG- ' target="_blank"> JS写的checkbox全选为什么在IE8中有BUG- </a></li> <li class="articleAbout"><a href=/javasript/971 title=' jQuery easyui如何获取datagrid某一列的值之和呢 ' target="_blank"> jQuery easyui如何获取datagrid某一列的值之和呢 </a></li> <li class="articleAbout"><a href=/javasript/32883 title=' 自动调整弹出窗口的动画效果,该如何解决 ' target="_blank"> 自动调整弹出窗口的动画效果,该如何解决 </a></li> <li class="articleAbout"><a href=/javasript/34334 title=' 找不到对象解决思路 ' target="_blank"> 找不到对象解决思路 </a></li> <li class="articleAbout"><a href=/javasript/32885 title=' 怎么让鼠标click 屏幕上的（400px，200px）这个坐标， ' target="_blank"> 怎么让鼠标click 屏幕上的（400px，200px）这个坐标， </a></li> <li class="articleAbout"><a href=/javasript/32562 title=' jQuery 表单radio选择判断有关问题 ' target="_blank"> jQuery 表单radio选择判断有关问题 </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 爱易网页 当前在线：119人　 网站在16分56秒内访问总人数：1171人 当前 28.46% 　<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>