关于javascript:CSSHTMLJavaScript-自学入门一-模拟乒乓球赛制

47次阅读

共计 3515 个字符，预计需要花费 9 分钟才能阅读完成。

作业形容：
乒乓球对战
粗体
规定

A 和 B 为两个按钮，代表两名运动员。初始比分 0:0
进入页面后两人随机一人能够发球，按钮状态为可点击色彩红色，另一按钮生效。
发球，随机发球成绩或者失败，失败对方得分并可发球；胜利则本人按钮生效，对方按钮无效色彩黄色，能够点击接球
接球，点击按钮随机接中或者不接中，接中则按规定 3 持续；未接中则对方得分，对方从新发球。
先到 6 分间接获胜，弹出提醒。
点击 Reset 从新开始较量

要求

页面布局参差好看
不应用第三方库

实现代码：

<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="utf-8">
    <title> 乒乓球较量 </title>
<style>
    body 
      {
        background:
            -webkit-linear-gradient(top, transparent 39px, #b5b5b9 40px),
            -webkit-linear-gradient(left, transparent 39px,#b5b5b9 40px)
            ;
        background-size: 40px 40px;
    }
    h1
    {  
        color: blue;
        background-color: red;
        border: 1px solid black;
        text-align: center;

    }
    h2
    {  
        color: blue;       
        text-align: center;

    }
    .btn
    {
        border-radius: 3%;
        color: black;
        width: 50px;
        height: 50px;

    }
    .resetbtn
    {
        border-radius: 3%;
        color: black;
        width: 100px;
        height: 50px;

    }
.divscore
{
width:700px;
height:70px;
border:2px solid gray;
font-family:"宋体";
font-size:20px;
font-style:normal;
font-weight:bold;
text-align:center;
vertical-align:middle
}
.divTable
{
width:334px;
height:400px;
border:4px solid gray;
font-family:"宋体";
font-size:20px;
font-style:normal;
font-weight:bold;
text-align:center;
vertical-align:middle
}
.main{
    text-align: center; /* 让 div 外部文字居中 */
    
    width: 1900px;
    height: 1000px;
    margin: auto;
    position: absolute;
    top: 1000px;
    left: 0;
    right: 0;
    bottom: 0;
}

</style>
  </head>
  <body onload=sendballfirst()>
    <div></div>
    <h1 > 世界冠军争霸赛 </h1>
    <h2 > 游戏规则：</h2>
   
    <button type="reset"class="resetbtn" style="display:block;margin:0 auto"onclick="newgame()">Reset</button>
    <div class="divscore" style="display:block;margin:0 auto">
        <span style="width: 1cm;" id="A1">0</span>
        <span id="A2">:</span>
        <span style="width: 1cm;" id="A3">0</span>
     </div>
     <div class="main">
        <button type="button"class="btn" id="player1"onclick="sendBall(this.id)" style="float: left;display:inline;
        width:10%; " >player1</button>
   
     <div class="divTable" id="tableLeft" style="float:left;    display:inline;     width:25%;">
         </div>
         <div class="divTable" id="tableRight" style="float:left;    display:inline;     width:25%;">
    </div>
      

<button type="button"class="btn" id="player2"onclick="sendBall(this.id)" style="float: left;display:inline;
width:10%; ">player2</button>
</div>

<script>
 var player1score=0;
 var player2score=0;
 var flagGetOrSend=0;



    function newgame()
    {document.getElementById("A1").innerHTML=0;
    document.getElementById("A3").innerHTML=0;
    }

    function sendballfirst()
    {var sendballFlag=Math.floor(Math.random() * 2);
        if(sendballFlag==0)
        {document.getElementById("player1").disabled=false;
         document.getElementById("player2").disabled=true;
         
        }
        else
        {document.getElementById("player2").disabled=false;
         document.getElementById("player1").disabled=true;
         
        }
    }

    function sendBall(clicked_id)
    {if(clicked_id=="player1")
     {if(flagGetOrSend==0)
       {document.getElementById("player1").disabled=true;      
        document.getElementById("player2").disabled=false; 
        flagGetOrSend=1;

       }
       else
       {getScore();
           flagGetOrSend=0;
       }
     }
      

     else
     {if(flagGetOrSend==0)
       {document.getElementById("player1").disabled=false;      
        document.getElementById("player2").disabled=true; 
        flagGetOrSend=1;

       }
       else
       {getScore();
           flagGetOrSend=0;
       }

     }
     
     
    }

    function getScore()
    {var a=document.getElementById("A1").innerText;
       var b=document.getElementById("A3").innerText;  
       var score=Math.floor(Math.random() * 2);
        if(score==0)
        {
        var num1=++a; 
        document.getElementById('A1').innerHTML=num1;
        document.getElementById("player1").disabled=false;      
        document.getElementById("player2").disabled=true; 
        
     
        }        
    
       else
       {     
        var num2=++b;
        document.getElementById('A3').innerHTML=num2;
        document.getElementById("player1").disabled=true;
        document.getElementById("player2").disabled=false; 
       
        
        
       }       
       var tempnum1=document.getElementById("A1").innerText;
       var tempnum2=document.getElementById("A3").innerText;  

        if(tempnum1==6)
        {alert("player1 获胜，祝贺 player1！");  
           
        }

        if(tempnum2==6)
        {alert("player2 获胜，祝贺 player2！");
            
        }

        


    }

    </script>

    


  </body>
</html>

成果

正文完