js html5 css俄罗斯方块游戏再现

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

大多数都是靠js来完成的。

完成后的效果如下：

HTML代码：

rush:xhtml;">

下一个：

简单

中等

困难

分数：score">0

方向：ottom

说明：
-“下”、“左”、“右”键控制方向，“上”为变形；
-游戏开始前、暂停时可调整难度；
-难度分“简单”、“中等”、“困难”三级；
-对应的分值为10、20、40；
-多行同时消去的倍数为1、4、10、20；

CSS代码：

rush:css;">

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

下面到了js了：

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

rush:js;">

源码下载：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。