自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：張磊
開發(fā) 前端
俄羅斯方塊是一款風(fēng)靡全球的電視游戲機(jī)和掌上游戲機(jī)游戲，它由俄羅斯人阿列克謝·帕基特諾夫發(fā)明，故得此名。俄羅斯方塊的基本規(guī)則是移動、旋轉(zhuǎn)和擺放游戲自動輸出的各種方塊，使之排列成完整的一行或多行并且消除得分。

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

51CTO推薦專題：JavaScript異步編程

 

 

【需求分析】

(完全按照QQ游戲的制作，如下圖：)

 

els

 

【技術(shù)分析與實現(xiàn)】

1.方塊位置定位

解決方案：建立盒子模型

 

els3
els4
els5
els6
els7
els8
els9

 

由于長條的存在，所以建立一個4*4的盒子模型，任何一個方塊都會存在該盒子當(dāng)中，方塊的定位就===盒子的定位。

2.顏色狀態(tài)的生成與保存

隨機(jī)生成顏色：

  1. function randomColor() {  
  2.          //16進(jìn)制方式表示顏色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之間的隨機(jī)整數(shù)   
  8.              index = Math.round(Math.random() * 15);  
  9.              strHex += arrHex[index];  
  10.          }  
  11.          return strHex;  
  12.      } 

顏色保存：（那一個方塊的一種狀態(tài)做示例）

  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是盒子模型的位置。

#p#

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.  
  9.             if (max_X != 11) appearPositionappearPosition.position.x = appearPosition.position.x - (max_X - 11);  
  10.             var min_X = 0;  
  11.             for (i = 0; i < diamonds.length; i++) {  
  12.                 if (diamonds[i].x < min_X) {  
  13.                     min_X = diamonds[i].x;  
  14.                 }  
  15.             }  
  16.  
  17.             if (min_X != 0) appearPositionappearPosition.position.x = appearPosition.position.x - min_X;  
  18.         } 

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分別代表四種。

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

 

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

  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.  
  36. document.onkeyup = function (e) {  
  37.     if (e.keyCode == 32) {  
  38.         delay = 20;               
  39.     }  
  40.     if (e.keyCode == 83) {  
  41.         delay = 20;               
  42.     }  
  43. } 

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.  
  29.             if (breakTag == 1) {  
  30.                 for (i = 0; i < diamonds.length; i++) {  
  31.                     //alert(diamonds[i].x + "____" + diamonds[i].y)  
  32.                     bottomElement.push(diamonds[i]);  
  33.                 }  
  34.                 clearUp();  
  35.                 //清?空?下?降μ的?元a素?  
  36.                 diamonds.splice(0, diamonds.length);  
  37.                 appearPosition = { position: { x: 4, y: -2 }, direction: 0 };  
  38.                 breakTag = 0;   
  39.                 break;  
  40.             }  
  41.             appearPosition.position.y += step;                   
  42.             draw();  
  43.             $await(Jscex.Async.sleep(delay));  
  44.         }  
  45.     }  
  46. })); 

這是也整個俄羅斯方塊的控制核心,由兩個while循環(huán)構(gòu)成，簡單大方。

原文：http://www.cnblogs.com/iamzhanglei/archive/2011/09/09/2171930.html

【系列文章】

  1. JavaScript異步編程之Jscex制作憤怒的小鳥
  2. 什么是JavaScript異步編程
  3. Jscex+jQuery UI打造游戲力度條
  4. JavaScript異步編程之Jscex無創(chuàng)痕切入jQueryUI
  5. Jscex模擬重力場與google蘋果logo的比較
責(zé)任編輯：陳貽新 來源： 張磊的博客
Jscex
相關(guān)推薦

2011-11-10 10:23:56

Jscex

2011-11-16 13:22:38

Jscex

2011-11-11 13:38:39

Jscex

2011-07-27 14:10:43

javascript

2012-06-14 13:40:04

JavaScript

2016-10-21 11:04:07

JavaScript異步編程原理解析

2012-06-14 14:03:19

JavaScript

2012-06-14 14:42:42

JavaScript

2014-10-08 10:04:14

代碼解釋俄羅斯方塊

2012-06-14 14:09:58

JavaScript

2020-10-15 13:29:57

javascript

2011-11-11 14:05:13

Jscex

2014-05-23 10:12:20

Javascript異步編程

2015-04-22 10:50:18

JavascriptJavascript異

2016-09-07 20:43:36

Javascript異步編程

2017-07-13 12:12:19

前端JavaScript異步編程

2012-10-29 13:25:54

JavaScriptJSjQuery

2014-12-24 13:32:21

2015-01-22 15:36:46

游戲源碼

2012-06-13 13:16:16

點贊
收藏

51CTO技術(shù)棧公眾號