用javascript做的一個簡單的乒乓球遊戲

  這是剛學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代碼如下：

 

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