JavaScript異步編程之Jscex版火拼俄羅斯

俄羅斯方塊(Tetris, 俄文：Тетрис)是一款風靡全球的電視游戲機和掌上游戲機游戲，它由俄羅斯人阿列克謝·帕基特諾夫發明，故得此名。俄羅斯方塊的基本規則是移動、旋轉和擺放游戲自動輸出的各種方塊，使之排列成完整的一行或多行并且消除得分。由于上手簡單、老少皆宜，從而家喻戶曉，風靡世界。

【需求分析】

(完全按照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是盒子模型的位置。

3.碰撞檢測

碰撞分兩種，一種是元素與左右墻壁和底部的碰撞，另外一種是方塊與底部方塊的接觸碰撞

a.元素與左右墻壁和底部的碰撞

a.1元素與底部的碰撞檢測

1. if (diamonds[i].y * height + height >= canvasHeight) {
2. appearPosition.position.x = Math.round(appearPosition.position.x);
3. appearPosition.position.y = Math.round(appearPosition.position.y);
4. createElement();
5. breakTag = 1;
6. }

a.2元素與左右墻壁的碰撞檢測

1. function returnRightOrLeft() {
2. var max_X = 11;
3. for (i = 0; i < diamonds.length; i++) {
4. if (diamonds[i].x > max_X) {
5. max_X = diamonds[i].x;
6. }
7. }
8. if (max_X != 11) appearPositionappearPosition.position.x = appearPosition.position.x – (max_X – 11);
9. var min_X = 0;
10. for (i = 0; i < diamonds.length; i++) {
11. if (diamonds[i].x < min_X) {
12. min_X = diamonds[i].x;
13. }
14. }
15. if (min_X != 0) appearPositionappearPosition.position.x = appearPosition.position.x – min_X;
16. }

b.元素與元素碰撞檢測

1. //判斷下面是否有元素
2. for (j = 0; j < bottomElement.length; j++) {
3. if (bottomElement[j].x == diamonds[i].x) {
4. if (Math.round(bottomElement[j].y) == Math.round(diamonds[i].y+1)) {
5. appearPosition.position.x = Math.round(appearPosition.position.x);
6. appearPosition.position.y = Math.round(appearPosition.position.y);
7. createElement();
8. breakTag = 1;
9. }
10. }
11. }
12. //判斷arrayOne是否在arrayTwo的右邊
13. function IsAtRight(arrayOne, arrayTwo) {
14. for (i = 0; i < arrayOne.length; i++) {
15. for (j = 0; j < arrayTwo.length; j++) {
16. if (Math.round(arrayOne[i].y )== Math.round(arrayTwo[j].y)) {
17. if (arrayTwo[j].x == arrayOne[i].x + 1) return true;
18. }
19. }
20. }
21. return false;
22. }
23. //判D斷arrayOne是否在arrayTwo的左邊
24. function IsAtLeft(arrayOne, arrayTwo) {
25. for (i = 0; i < arrayOne.length; i++) {
26. for (j = 0; j < arrayTwo.length; j++) {
27. if (Math.round(arrayOne[i].y) ==Math.round( arrayTwo[j].y)) {
28. if (arrayTwo[j].x == arrayOne[i].x – 1) return true;
29. }
30. }
31. }
32. return false;
33. }

4.方塊變形

1. var direction = 0;
2. if (e.keyCode == 87) {
3. direction++;
4. direction %= 4;
5. }

W鍵是變形，0123分別代表四種。

如果是長條或者只有兩種狀態的直接 if (direction % 2 == 0) {}，如果是正方塊直接忽略direction，因為它就一種形狀。

5.鍵盤捕獲（目前WSAD+空格，W是變形，S和空格都是加速，IE9和FF異常，建議在谷歌瀏覽器下運行）

1. document.onkeydown = function (e) {
2. if (e.keyCode == 65) {
3. for (i = 0; i < diamonds.length; i++) {
4. if (diamonds[i].x == 0) {
5. return;
6. }
7. }
8. if (IsAtLeft(diamonds, bottomElement)) {
9. return;
10. }
11. appearPosition.position.x –= 1;
12. }
13. if (e.keyCode == 87) {
14. direction++;
15. direction %= 4;
16. }
17. if (e.keyCode == 68) {
18. for (i = 0; i < diamonds.length; i++) {
19. if (diamonds[i].x == 11) {
20. return;
21. }
22. }
23. if (IsAtRight(diamonds, bottomElement)) {
24. return;
25. }
26. appearPosition.position.x += 1;
27. }
28. if (e.keyCode == 32) {
29. delay = 1;
30. }
31. if (e.keyCode == 83) {
32. delay = 1;
33. }
34. }
35. document.onkeyup = function (e) {
36. if (e.keyCode == 32) {
37. delay = 20;
38. }
39. if (e.keyCode == 83) {
40. delay = 20;
41. }
42. }

6.消除加分

1. //一行滿了的話，消除并加分
2. function clearUp() {
3. for (var line = 0; line < 21; line++) {
4. var count = 0;
5. for (var i = 0; i < bottomElement.length; i++) {
6. if (bottomElement[i].y == line) {
7. count++;
8. }
9. }
10. if (count == 12) clearByLineNum(line);
11. }
12. // if(count==12)
13. }
14. function clearByLineNum(num) {
15. //以上的元素下降一行
16. score++;
17. var count = 0;
18. for (i = 0; i < bottomElement.length; i++) {
19. if (bottomElement[i].y == num) {
20. count++;
21. }
22. }
23. for (var j = 0; j < count; j++) {
24. for (var i = 0; i < bottomElement.length; i++) {
25. if (bottomElement[i].y == num) {
26. bottomElement.splice(i, 1);
27. break;
28. }
29. }
30. }
31. for (i = 0; i < bottomElement.length; i++) {
32. if (bottomElement[i].y < num) {
33. bottomElement[i].y += 1;
34. }
35. }
36. }

消除加分有一個潛在的邏輯就是，在該行以上的元素的位置下降一個格子。

7.控制核心Jscex Show Time

1. var JropAsync = eval(Jscex.compile(“async”, function () {
2. var breakTag = 0;
3. while (true) {
4. color = randomColor();
5. rectBlockIndex = MR() * 7 | 0;
6. direction = MR() * 3 | 0;
7. $await(Jscex.Async.sleep(1));
8. while (true) {
9. for (i = 0; i < diamonds.length; i++) {
10. if (diamonds[i].y * height + height >= 525) {
11. appearPosition.position.x = Math.round(appearPosition.position.x);
12. appearPosition.position.y = Math.round(appearPosition.position.y);
13. createElement();
14. breakTag = 1;
15. }
16. //判D斷?下?面?是?否?有D元a素?
17. for (j = 0; j < bottomElement.length; j++) {
18. if (bottomElement[j].x == diamonds[i].x) {
19. if (Math.round(bottomElement[j].y) == Math.round(diamonds[i].y+1)) {
20. appearPosition.position.x = Math.round(appearPosition.position.x);
21. appearPosition.position.y = Math.round(appearPosition.position.y);
22. createElement();
23. breakTag = 1;
24. }
25. }
26. }
27. }
28. if (breakTag == 1) {
29. for (i = 0; i < diamonds.length; i++) {
30. //alert(diamonds[i].x + “____” + diamonds[i].y)
31. bottomElement.push(diamonds[i]);
32. }
33. clearUp();
34. //清?空?下?降μ的?元a素?
35. diamonds.splice(0, diamonds.length);
36. appearPosition = { position: { x: 4, y: -2 }, direction: 0 };
37. breakTag = 0;
38. break;
39. }
40. appearPosition.position.y += step;
41. draw();
42. $await(Jscex.Async.sleep(delay));
43. }
44. }
45. }));

這是也整個俄羅斯方塊的控制核心,由兩個while循環構成，簡單大方。