Roll Dice Using JavaScript

  1. <!DOCTYPE html>  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5.     <title></title>  
  6.     <style type="text/css">  
  7.         #die1,#die2 {  
  8.   
  9.             width:52px;  
  10.             height:47px;  
  11.             border:2px solid;  
  12.             border-color:gray;  
  13.             background-color:lightgray;  
  14.             float:left;  
  15.             margin:3px;  
  16.   
  17.         }  
  18.         button{  
  19.   
  20.             width:70px;  
  21.             padding-top:76px;  
  22.             padding-left:42px;  
  23.             float:left;  
  24.         }  
  25.   
  26.     </style>  
  27. </head>  
  28. <body>  
  29.               
  30.     <div id="die1">0</div>  
  31.         <div id="die2">0</div>  
  32.    <br />  
  33.         <input type="button"  value="Player1" id="us1"   onclick="rollDice(true);"/>  
  34.         <input type="button"  value="Player2" id="us2"  onclick="rollDice(false);"/>   
  35.     <p id="p1"></p>         
  36.     <p id="p2"></p>         
  37.   
  38.       
  39.     <h2 id="status"></h2>  
  40. <script type="text/javascript">  
  41.   
  42.     var temp1val = 0;  
  43.     var temp2val = 0;  
  44.     onlo(false);  
  45.     function onlo(val)  
  46.     {  
  47.         //debugger;  
  48.         var us1 = document.getElementById('us1');  
  49.         var us2 = document.getElementById('us2');  
  50.         if (val == true)  
  51.             {  
  52.             us2.disabled = false;  
  53.             us1.disabled = true;  
  54.         }  
  55.         else {  
  56.             us2.disabled = true;  
  57.             us1.disabled = false;  
  58.   
  59.         }  
  60.     }  
  61.   
  62.     function rollDice(chkresult)  
  63.     {  
  64.         onlo(chkresult);  
  65.     var die1 = document.getElementById('die1');  
  66.     var die2 = document.getElementById('die2');  
  67.     var status = document.getElementById('status');  
  68.     var d1 = Math.floor(Math.random() * 6)+1;  
  69.     var d2 = Math.floor(Math.random() * 6)+1;  
  70.     if (chkresult)  
  71.     {  
  72.         temp1val += d1 + d2;  
  73.     }  
  74.     else  
  75.     {  
  76.         temp2val +=d1 + d2;  
  77.     }  
  78.     die1.innerHTML = d1;  
  79.     die2.innerHTML = d2;  
  80.     document.getElementById('p1').innerHTML = 'Player1= ' + temp1val;  
  81.     document.getElementById('p2').innerHTML = 'Player2= ' + temp2val;  
  82.   
  83.     if (temp1val >= 50) {  
  84.         alert("Player1 is d winner")  
  85.         die1.innerHTML = 0;  
  86.         die2.innerHTML = 0;  
  87.   
  88.         temp1val = 0;  
  89.         temp2val = 0;  
  90.     }  
  91.    else if (temp2val >= 50) {  
  92.         alert("Player2 is d winner")  
  93.         die1.innerHTML = 0;  
  94.         die2.innerHTML = 0;  
  95.   
  96.         temp1val = 0;  
  97.         temp2val = 0;  
  98.     }  
  99.   
  100.    else if(d1==d2)  
  101.     {  
  102.         status.innerHTML = "U got draw try 1 more time";  
  103.         onlo(!chkresult);  
  104.     }  
  105.     else  
  106.     {  
  107.         status.innerHTML = "";  
  108.    }  
  109.       
  110.     }  
  111. </script>  
  112. </body>  
  113. </html>