aasddsasda的JS俄罗斯方块全解释

最新推荐文章于 2024-04-21 11:04:37 发布

natineprince

最新推荐文章于 2024-04-21 11:04:37 发布

阅读量4.1k

点赞数 1

分类专栏： JavaScript 文章标签： function 游戏 javascript button div float

本文链接：https://blog.csdn.net/natineprince/article/details/5825692

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

由于工作关系，很久没来过了。昨天无聊闲逛却看到aasddsasda写的JS俄罗斯方块代码，写得很不错。但是老有一群喊看不懂的同学，为了让更多人能获得学习的兴趣，所以写了这篇解释文，揭开JS游戏的神秘面纱。希望更多更多的同学能喜欢JS，写更多令人惊喜的代码。

首先，这一个游戏需要用到的知识，除了JS外，还有CSS和DHTML。跟网页有关的JS，基本都和这两者有关，所以这两个也是想学JS各位的必修课。

第二，解密的第一步，要理解首先是从现象再到本质的，所以大家在看到界面的时候是否有想过为什么界面会如此显示呢？因为body中的HTML的代码只有聊聊数行：

<body οnlοad='G.init();'> <div id='main'> <div id='body'></div> <div id='score'></div> <div id='level'></div> <div id='next'></div> <div id='ctrl'> <button οnclick="javascript:location.href=location.href;">New</button> <button οnclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">Pause</button> </div> </GMain> </body>

所以从这样的现象里，大家就应该注意到CSS中的定义。那就不难发现作者的意图是什么了。

第三，有人可能会问，CSS怎么看？教大家最简单的一招：试！

没错，只有实践能出真知，就那么一块长代码，大家都可能会头痛，但自己试出来，就会印象深刻了。

CSS里有三种常用模式，作者这里用到的有标签式定义，例如SPAN。ID式定义，以“#”开头的，如#body。还有一种是实际工作常用的类，以“.”开头的。有兴趣的同学可以继续研究一下。

第四，来到真正的JS块了。别因为长而害怕，更不要看到0xCC00就害怕了。其实看到CSS，大家就会发现究竟作者想做什么了。为什么会有像一个方块的SPAN和P的样式存在呢？作者要怎么把他拼凑到一块？那就需要你动动脑子了。

众所周知，你要出现某个拼凑出来的形状，首先得要定义吧？那怎么定义呢？不难发现0x801这段很长的16进制码。

什么？16进制码？干什么用？记得有人说过的一句话吗：计算机的世界是二进制的世界？那我们怎么不试试把他转成0和1看看呢？

如果你有这么想过，那么WINDOWS附带的科学计算器就能满足你的欲望：0x801其实就是100000000001。

呀！这串东西是啥？再动动脑子，哪里比较像？数数游戏中图形的方格，不难发现游戏区中除了最后一行外的每一行的方格数与这边很像。

每错，这就是每一行的点阵定义！

同理，你也能发现下面的0xCC00其实就是每一个图形的定义。只是，他将四行写成一行了。呵呵。

第五，不要看到<<和>>，还有&之类的位运算符就害怕了。

<<是左移X位，X与<<号后跟的数字有关。>>是反过来的右移。而&则是与运算，只有两个数按位都是1才能获得1的结果。

这些都是位运算，没什么难的，却是计算机CPU真正在做的事情。

第六，要对运算符的优先级有概念。我们看到乘号会知道他比加号先运行，大家在学数学都知道了。但是遇到其他运算符的情况呢？位运算符是比加减乘除的运算级别低的。

第七，作者使用了一些特殊用法，可能初学者看不懂，但是现在GOOGLE虽然移海外了，但是还是能查查的。这些使用的特殊技巧，见过一次就会记得的。多学习对自己有好处呢。

好了，就说这么多，请看代码全注释：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <mce:style> span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}  p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}  #main {width:375px;height:430px;display:block;background-color:gray;position:relative;}  #body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}  #score {width:80px;height:24px;left:270px;top:15px;padding:4px;}  #level {width:80px;height:24px;left:270px;top:50px;padding:4px;}  #next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;}  #ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}  #ctrl button{width:80px;height:25px;} </mce:style><style mce_bogus="1"> div {display:block;background-color:black;position:absolute;font:17px Tahoma;color:#fff;}  span {float:left;background-color:gray;width:12px;height:12px;border:4px gray outset;margin:0 1 1 0;overflow:hidden;}  p {float:left;width:8px;height:8px;border:2px gray outset;overflow:hidden;margin:0;padding:0}  #main {width:375px;height:430px;display:block;background-color:gray;position:relative;}  #body {width:241px;height:401px;left:15px;top:15px;border:1px solid #999;}  #score {width:80px;height:24px;left:270px;top:15px;padding:4px;}  #level {width:80px;height:24px;left:270px;top:50px;padding:4px;}  #next {width:50px;height:50px;left:270px;top:85px;border:19px black solid;}  #ctrl {width:80px;height:55px;left:270px;top:360px;padding:4px;text-align:center;background-color:gray}  #ctrl button{width:80px;height:25px;} </mce:script> <body οnlοad='G.init();'> <div id='main'> <div id='body'></div> <div id='score'></div> <div id='level'></div> <div id='next'></div> <div id='ctrl'> <button οnclick="javascript:location.href=location.href;">New</button>  <button οnclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">Pause</button>  </div> </div> </body> </html>

最后，提个希望，作品发表不应该只是为了制造崇拜吧？良好的注释是让崇拜你的人好好学习的途径哦。希望以后大家发表的作品多加点注释，让想进入这个领域的人能有路可寻。只有越来越多的人进入这一领域，这个领域才能更好的发展啊！（没人关注，有谁会投资啊？！工作都找不到这类的，当然就没人会感兴趣而很容易就末落了。）