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

來源:互聯網
上載者:User

  這是剛學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;    
        }

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.