2012-10-08

 这是刚学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(){        
        }

部分代码如下：

function move_lr(){    //球左右移动
            if(lr){
                if(wscroll<=wid){
                    wscroll++;
                    divs[2].style.left=wscroll+"px";
                }
                else
                    lr=false;
            }
            else{
                if(wscroll>=0){
                    wscroll--;
                    divs[2].style.left=wscroll+"px";
                }
                else
                    lr=true;
            }
            if(hscroll==20){
                if (wscroll>=top_l-20&&wscroll<=top_r){
                    td=true;
                }

                else{
                    clearInterval(time1);
                    clearInterval(time2);
                    alert("绿方输了!!重玩按F5!!!");
                    }
            }
            else if(hscroll==260){
                if (wscroll>=down_l-20&&wscroll<=down_r)
                    td=false;
                else{
                    clearInterval(time1);
                    clearInterval(time2);
                    alert("黑方输了重玩按F5!!!");
                    }
            }
        }

        function move_td(){//球的上下移动
            if(td){
                if (hscroll<=hei)
                {
                    hscroll++;
                    divs[2].style.top=hscroll+"px";
                }
                else
                    td=false;
            }
            else{
                if (hscroll>0)
                {
                    hscroll--;
                    divs[2].style.top=hscroll+"px";
                }
                else
                    td=true;
            }
        }
        function move_t_l(){
            if(top_l<160){
                top_l+=3;
                top_r+=3;
                divs[1].style.left=top_l+"px";
            }
        }
        function move_t_r(){
            if(top_l>0){
                top_l-=3;
                top_r-=3;
                divs[1].style.left=top_l+"px";
            }
        }
        function move_d_l(){
            if(down_l<160){
                down_l+=3;
                down_r+=3;
                divs[3].style.left=down_l+"px";
            }
        }
        function move_d_r(){
            if(down_l>0){
                down_l-=3;
                down_r-=3;
                divs[3].style.left=down_l+"px";
            }
        }
        function keyDown(e){
        //    var keycode = e.which; //得到的是键盘对应的数值
　　 　　    var realkey = String.fromCharCode(e.which); //得到的是键盘对应的字母
        //        var rr=    realkey;
　　 　　    switch(realkey){
                case "W":
                    move_t_l();
                    break;
                case "E":
                    move_t_r();
                    break;
                case "A":
                    move_d_l();
                    break;
                case "D":
                    move_d_r();
                    break;
            }
        }
        function onload(){

            divs=document.getElementsByTagName("div");
            wid=divs[0].clientWidth-divs[2].offsetWidth;
            hei=divs[0].clientHeight-divs[2].offsetHeight;
            wscroll=divs[2].offsetLeft;
            hscroll=divs[2].offsetTop;
            top_l=divs[1].offsetLeft;
            top_r=top_l+100;
            down_l=divs[3].offsetLeft;
            down_r=down_l+100;
            time1=setInterval("move_lr()",10);
            time2=setInterval("move_td()",10);
            document.onkeydown=keyDown;
        }

代码和PPT： 乒乓球.rar