站長資訊網
        最全最豐富的資訊網站

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

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

         

        【需求分析】

        (完全按照QQ游戲的制作,如下圖:)

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

        【技術分析與實現】

        1.方塊位置定位

        解決方案:建立盒子模型

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

        由于長條的存在,所以建立一個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循環構成,簡單大方。

         

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 国产成人久久精品激情| 亚洲精品无码鲁网中文电影| 最新国产在线精品观看| 精品亚洲综合久久中文字幕| 亚洲AV无码精品色午夜在线观看| 国内精品国语自产拍在线观看| 国产亚洲精品a在线观看app| 久久精品无码专区免费青青| 亚洲国产成人久久精品99| 国产精品成人免费观看| 久久99热精品| 国产成人精品白浆久久69| 伊在人亚洲香蕉精品区麻豆| 精品无人区无码乱码毛片国产| 丰满人妻熟妇乱又伦精品劲| 欧美精品亚洲精品日韩1818| 国产精品美女免费视频观看| 国产精品对白刺激久久久| 亚洲国产精品一区二区久久hs| 久久人人超碰精品CAOPOREN| 国产精品午夜久久| 92精品国产自产在线观看| 国内精品在线视频| 精品国产一区二区三区色欲| 精品一区二区久久久久久久网站| 人妻少妇精品视频一区二区三区 | 久久综合久久自在自线精品自| 青草青草久热精品视频在线观看| 国产伦精品一区二区免费| 国产精品 羞羞答答在线| 一区二区精品在线| 丝袜美腿国产精品视频一区| 久久亚洲精品中文字幕三区| 久久精品国产亚洲沈樵| 久久精品成人免费看| 亚洲精品国产成人99久久| 四虎精品免费永久在线| 在线人成精品免费视频| 国产精品99| 欧美精品成人3d在线| 天天视频国产精品|