站長資訊網(wǎng)
        最全最豐富的資訊網(wǎng)站

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

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

         

        【需求分析】

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

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

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

        1.方塊位置定位

        解決方案:建立盒子模型

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

        由于長條的存在,所以建立一個(gè)4*4的盒子模型,任何一個(gè)方塊都會(huì)存在該盒子當(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. }
         

        顏色保存:(那一個(gè)方塊的一種狀態(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 };
         

        所有生成的方塊有個(gè)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分別代表四種。

        如果是長條或者只有兩種狀態(tài)的直接 if (direction % 2 == 0) {},如果是正方塊直接忽略direction,因?yàn)樗鸵环N形狀。

        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. 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. }
         

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

        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. }));
         

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

         

        贊(0)
        分享到: 更多 (0)
        網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號
        主站蜘蛛池模板: 亚洲av午夜国产精品无码中文字| 亚洲一区二区三区在线观看精品中文 | 麻豆精品久久精品色综合| 亚洲精品你懂的| 99久久精品日本一区二区免费| 中文精品人人永久免费| 精品国产一区二区22| 2023国产精品自拍| 91精品国产综合久久婷婷| 精品无码国产污污污免费网站 | 亚洲αv在线精品糸列| 精品无码久久久久久久动漫 | 2022国产精品最新在线| 国产精品爽黄69天堂a| 国产成人精品日本亚洲网站| 无码精品人妻一区二区三区人妻斩| 免费人欧美日韩在线精品| 久久99精品国产麻豆蜜芽| 国产精品亚洲产品一区二区三区 | 精品国产日产一区二区三区| 国产在线精品一区二区中文| 无码国产乱人伦偷精品视频| 亚洲欧美日韩精品专区| 亚洲爆乳无码精品AAA片蜜桃| 久久精品国产亚洲AV不卡| 精品日本一区二区三区在线观看| 国内精品视频九九九九| 国产亚洲精品自在线观看| 国产女人18毛片水真多18精品| 91无码人妻精品一区二区三区L| 一区二区三区精品国产欧美| 午夜精品成年片色多多| 杨幂国产精品福利在线观看| 99国产精品私拍pans大尺度| 国产精品福利电影一区二区三区四区欧美白嫩精品 | 99久久精品国产一区二区| 88国产精品无码一区二区三区| 2022国产精品最新在线| 国产精品色视频ⅹxxx| 国产一区二区三区精品视频| 国产综合色产在线精品|