HTML5-俄罗斯方块

这个游戏主要分为三部份，HTML5+CSS+JAVASCRIPT来完成的。在这里详细讲一下js的代码。因为这个游戏的主要部分其实就是js。大多数都是靠js来完成的。

完成后的效果如下：

HTML代码：

 

        

            

                

                

                    
下一个：
                    

                    开始中等
                    

                        

                            
简单
                            
中等
                            
困难
                        
                    
                    

                        分数：0
                    
                    

                        方向：bottom
                    
                    

                    说明：
 -“下”、“左”、“右”键控制方向，“上”为变形；
 -游戏开始前、暂停时可调整难度；

                    -难度分“简单”、“中等”、“困难”三级；
 -对应的分值为10、20、40；

                    -多行同时消去的倍数为1、4、10、20；
                
                
            
        
    

CSS代码：

 

 

HTML的代码其实就是一个游戏结构的框架，这里框架其实就是几个div的东西，所以不会太长，理解起来也是挺容易的。而CSS则是控制网页的布局与美观，所以要想吸引玩家，那CSS方面必须下功夫，而这里的CSS只是其实就将游戏区域与菜单区域分为左右两边了。而游戏域内的一个个框其实就是多个div，整齐排列在一起而已。

 

下面到了js了：

因为在代码已经将一些重要的部分做了注释，所以就不打算逐步分去分析了。说一下整体的写法吧。其实它首先是直接定义了一些图形的坐标，然后根据这些坐标画出一个下一个的图形出来，之后就是利用一个setInterval函数在游戏区域标出每个点，如果不能下落了就直接清除掉时间函数，之后在调用一个创建时间函数的函数出来，在画一个图形出来。具体的细节就看代码吧。

 

> 这里面有小伙伴问道如何得出tetrisArr这个数组值得，其实这里是添加偏移值了，所以有负数出现

 

完整代码