javascriptで作った簡単な卓球ゲームです.

12996 ワード
JavaScript js。
これはJSを勉強したばかりの一週間の時です.李先生は今自分で卓球のゲームを書いてもいいと言いました.それから考えたら2時間もかけてそれを書きました.書き終わったら確かに簡単です.たくさんのものは自分で大胆に書くべきです.終わったら、李先生にみんなに説明させていただきました.とても嬉しいです.
   当時は主に下のいくつかの方面から言いました.1.原理2.実現3.内容.
  原理:1.ボールがずっとぶつかって跳ね返るようにします.2.キーボードでラケットの往復移動を制御します.3.勝負を判断する
  実現:1.ボールの衝突反発を実現するために、上下移動と左右移動の二つの方法を書く必要があります.2.ラケットの左右の移動を実現するために、四つの方法を書きます.緑のラケットの左の移動、右の移動、黒いラケットの左の移動、右の移動です.3.キーボードでラケット移動を制御するためには、このキーボードイベントを実現するための方法を書く必要があります.     内容:
1.衝突リバウンドの実現.2.勝負を判断する3.拍子はどうやって左右に動くか.4.キーボードイベントの実現.
    機能 move_lr(){    //ボールは左右に動かして勝敗を判定します.                     }         機能 movegautd()///ボールの上下移動                         }         機能 movegautuul()//緑の方は左に移動します.                     }         機能 movegautur()//緑の方角が右に移動します.                     }         機能 moveudul(){//黒方左移動                     }         機能 moveudur()///黒方右移動                     }         機能 keyDown(e){/キーボードイベント                     }         機能 onload(){                 }
一部のJSコードは以下の通りです.
  

  
  
  
  
    
   
   
   
   
  1. function move_lr(){    //      
    2. 
   
   
   
   
  2.             if(lr){ 
    3. 
   
   
   
   
  3.                 if(wscroll<=wid){ 
    4. 
   
   
   
   
  4.                     wscroll++; 
    5. 
   
   
   
   
  5.                     divs[2].style.left=wscroll+"px"; 
    6. 
   
   
   
   
  6.                 } 
    7. 
   
   
   
   
  7.                 else 
    8. 
   
   
   
   
  8.                     lr=false; 
    9. 
   
   
   
   
  9.             } 
    10. 
   
   
   
   
  10.             else{ 
    11. 
   
   
   
   
  11.                 if(wscroll>=0){ 
    12. 
   
   
   
   
  12.                     wscroll--; 
    13. 
   
   
   
   
  13.                     divs[2].style.left=wscroll+"px"; 
    14. 
   
   
   
   
  14.                 } 
    15. 
   
   
   
   
  15.                 else 
    16. 
   
   
   
   
  16.                     lr=true; 
    17. 
   
   
   
   
  17.             } 
    18. 
   
   
   
   
  18.             if(hscroll==20){ 
    19. 
   
   
   
   
  19.                 if (wscroll>=top_l-20&&wscroll<=top_r){ 
    20. 
   
   
   
   
  20.                     td=true;     
    21. 
   
   
   
   
  21.                 } 
    22. 
   
   
   
   
  22.                      
    23. 
   
   
   
   
  23.                 else{ 
    24. 
   
   
   
   
  24.                     clearInterval(time1); 
    25. 
   
   
   
   
  25.                     clearInterval(time2); 
    26. 
   
   
   
   
  26.                     alert("    !!   F5!!!"); 
    27. 
   
   
   
   
  27.                     } 
    28. 
   
   
   
   
  28.             } 
    29. 
   
   
   
   
  29.             else if(hscroll==260){ 
    30. 
   
   
   
   
  30.                 if (wscroll>=down_l-20&&wscroll<=down_r) 
    31. 
   
   
   
   
  31.                     td=false; 
    32. 
   
   
   
   
  32.                 else{ 
    33. 
   
   
   
   
  33.                     clearInterval(time1); 
    34. 
   
   
   
   
  34.                     clearInterval(time2); 
    35. 
   
   
   
   
  35.                     alert("       F5!!!"); 
    36. 
   
   
   
   
  36.                     } 
    37. 
   
   
   
   
  37.             } 
    38. 
   
   
   
   
  38.         } 
    39. 
   
   
   
   
  39.  
    40. 
   
   
   
   
  40.         function move_td(){//       
    41. 
   
   
   
   
  41.             if(td){ 
    42. 
   
   
   
   
  42.                 if (hscroll<=hei) 
    43. 
   
   
   
   
  43.                 { 
    44. 
   
   
   
   
  44.                     hscroll++; 
    45. 
   
   
   
   
  45.                     divs[2].style.top=hscroll+"px"; 
    46. 
   
   
   
   
  46.                 } 
    47. 
   
   
   
   
  47.                 else 
    48. 
   
   
   
   
  48.                     td=false; 
    49. 
   
   
   
   
  49.             } 
    50. 
   
   
   
   
  50.             else{ 
    51. 
   
   
   
   
  51.                 if (hscroll>0) 
    52. 
   
   
   
   
  52.                 { 
    53. 
   
   
   
   
  53.                     hscroll--; 
    54. 
   
   
   
   
  54.                     divs[2].style.top=hscroll+"px"; 
    55. 
   
   
   
   
  55.                 } 
    56. 
   
   
   
   
  56.                 else 
    57. 
   
   
   
   
  57.                     td=true; 
    58. 
   
   
   
   
  58.             }         
    59. 
   
   
   
   
  59.         } 
    60. 
   
   
   
   
  60.         function move_t_l(){ 
    61. 
   
   
   
   
  61.             if(top_l<160){ 
    62. 
   
   
   
   
  62.                 top_l+=3; 
    63. 
   
   
   
   
  63.                 top_r+=3; 
    64. 
   
   
   
   
  64.                 divs[1].style.left=top_l+"px"; 
    65. 
   
   
   
   
  65.             } 
    66. 
   
   
   
   
  66.         } 
    67. 
   
   
   
   
  67.         function move_t_r(){ 
    68. 
   
   
   
   
  68.             if(top_l>0){ 
    69. 
   
   
   
   
  69.                 top_l-=3; 
    70. 
   
   
   
   
  70.                 top_r-=3; 
    71. 
   
   
   
   
  71.                 divs[1].style.left=top_l+"px"; 
    72. 
   
   
   
   
  72.             } 
    73. 
   
   
   
   
  73.         } 
    74. 
   
   
   
   
  74.         function move_d_l(){ 
    75. 
   
   
   
   
  75.             if(down_l<160){ 
    76. 
   
   
   
   
  76.                 down_l+=3; 
    77. 
   
   
   
   
  77.                 down_r+=3; 
    78. 
   
   
   
   
  78.                 divs[3].style.left=down_l+"px"; 
    79. 
   
   
   
   
  79.             } 
    80. 
   
   
   
   
  80.         } 
    81. 
   
   
   
   
  81.         function move_d_r(){ 
    82. 
   
   
   
   
  82.             if(down_l>0){ 
    83. 
   
   
   
   
  83.                 down_l-=3; 
    84. 
   
   
   
   
  84.                 down_r-=3; 
    85. 
   
   
   
   
  85.                 divs[3].style.left=down_l+"px"; 
    86. 
   
   
   
   
  86.             } 
    87. 
   
   
   
   
  87.         } 
    88. 
   
   
   
   
  88.         function keyDown(e){ 
    89. 
   
   
   
   
  89.         //    var keycode = e.which; //              
    90. 
   
   
   
   
  90. 　　 　　    var realkey = String.fromCharCode(e.which); //              
    91. 
   
   
   
   
  91.         //        var rr=    realkey; 
    92. 
   
   
   
   
  92. 　　 　　    switch(realkey){ 
    93. 
   
   
   
   
  93.                 case "W": 
    94. 
   
   
   
   
  94.                     move_t_l();                 
    95. 
   
   
   
   
  95.                     break; 
    96. 
   
   
   
   
  96.                 case "E": 
    97. 
   
   
   
   
  97.                     move_t_r(); 
    98. 
   
   
   
   
  98.                     break; 
    99. 
   
   
   
   
  99.                 case "A": 
    100. 
   
   
   
   
  100.                     move_d_l(); 
    101. 
   
   
   
   
  101.                     break; 
    102. 
   
   
   
   
  102.                 case "D": 
    103. 
   
   
   
   
  103.                     move_d_r(); 
    104. 
   
   
   
   
  104.                     break; 
    105. 
   
   
   
   
  105.             } 
    106. 
   
   
   
   
  106.         } 
    107. 
   
   
   
   
  107.         function onload(){ 
    108. 
   
   
   
   
  108.              
    109. 
   
   
   
   
  109.             divs=document.getElementsByTagName("div"); 
    110. 
   
   
   
   
  110.             wid=divs[0].clientWidth-divs[2].offsetWidth; 
    111. 
   
   
   
   
  111.             hei=divs[0].clientHeight-divs[2].offsetHeight; 
    112. 
   
   
   
   
  112.             wscroll=divs[2].offsetLeft; 
    113. 
   
   
   
   
  113.             hscroll=divs[2].offsetTop; 
    114. 
   
   
   
   
  114.             top_l=divs[1].offsetLeft; 
    115. 
   
   
   
   
  115.             top_r=top_l+100; 
    116. 
   
   
   
   
  116.             down_l=divs[3].offsetLeft; 
    117. 
   
   
   
   
  117.             down_r=down_l+100; 
    118. 
   
   
   
   
  118.             time1=setInterval("move_lr()",10); 
    119. 
   
   
   
   
  119.             time2=setInterval("move_td()",10); 
    120. 
   
   
   
   
  120.             document.onkeydown=keyDown;     
    121. 
   
   
   
   
  121.         } 
    122.
javascriptコールバック関数を再理解する