这是刚学JS一个星期的时候，李老师说现在就可以自己写一个乒乓球游戏，然后想了想花了2个小时把它写出来了，写完之后发现确实很简单很多东西就应该自己大胆的去写。做完之后，李老师让我给大家讲了一下，感觉好高兴啊！

   当时主要从下边几个方面讲的：1.原理2.实现3.内容。

  原理：1.让球一直碰撞反弹。2.通过键盘控制拍子的来回移动。3.判断输赢。

  实现：1.为了实现球的碰撞反弹，需要写出二个方法：上下移动和左右移动。
2.为了实现拍子的左右移动分别要写出四个方法：绿色球拍的左移动、右移动和黑色球拍的左移动、右移动。
3.为了能通过键盘控制拍子移动，需要写一个方法来实现这个键盘事件。 
   内容：

1.碰撞反弹的实现。
2.判断输赢。
3.拍子如何左右移动。
4.键盘事件的实现。

    function move_lr(){    //球左右移动并且判断输赢            
        }
        function move_td(){//球的上下移动                
        }
        function move_t_l(){//绿方左移动            
        }
        function move_t_r(){//绿方右移动
            
        }
        function move_d_l(){//黑方左移动            
        }
        function move_d_r(){//黑方右移动            
        }
        function keyDown(e){//键盘事件            
        }
        function onload(){        
        }

部分JS代码如下：

 

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