思洋互动网站建设学前班

俄罗斯方块(Tetris, 俄文：Тетрис)是一款风靡全球的电视游戏机和掌上游戏机游戏，它由俄罗斯人阿列克谢·帕基特诺夫发明，故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块，使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜，从而家喻户晓，风靡世界。

51CTO推荐专题：JavaScript异步编程

广州网站建设,网站建设,广州网页设计,广州网站设计

【需求分析】

(完全按照QQ游戏的制作，如下图：)

 

 

【技术分析与实现】

1.方块位置定位

解决方案：建立盒子模型

广州网站建设,网站建设,广州网页设计,广州网站设计

 

由于长条的存在，所以建立一个4*4的盒子模型，任何一个方块都会存在该盒子当中，方块的定位就===盒子的定位。

2.颜色状态的生成与保存

随机生成颜色：

1. function randomColor() {  
2.          //16进制方式表示颜色0-F      
3.          var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F"];   
4.       var strHex = "#";  
5.          var index;  
6.          for (var i = 0; i < 6; i++) {  
7.              //取得0-15之间的随机整数   
8.              index = Math.round(Math.random() * 15);  
9.              strHex += arrHex[index];  
10.          }  
11.          return strHex;  
12.      } 

颜色保存：（那一个方块的一种状态做示例）

1. var diamonds = new Array();  
2.    diamonds[0] = { x: appearPosition.position.x + 1, y: appearPosition.position.y, diamondColor: color };  
3.    diamonds[1] = { x: appearPosition.position.x + 0, y: appearPosition.position.y + 1, diamondColor: color };  
4.    diamonds[2] = { x: appearPosition.position.x + 1, y: appearPosition.position.y + 1, diamondColor: color };  
5.    diamonds[3] = { x: appearPosition.position.x + 2, y: appearPosition.position.y + 1, diamondColor: color };  

所有生成的方块有个diamondColor属性，用于存颜色。appearPosition.position是盒子模型的位置。