Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Help creating a javascript dice game.

    Create a game where 6 dice are 'rolled' by you and 6 dice are 'rolled' by the player (simulated by the click of a button). Add up both rolls. The goal is to come as close to a score of 100 as possible, without passing 100. Have a STOP button to signify when you are ready to stop rolling and compute the winner. The highest score under 100 wins. Display the number of times you win and the number of times the computer wins using javascript. So far I have the following code, however, my dice images are not working(they display as little broken symbols when I run the game). The game itself is running just fine but I can't figure out how to get the game to do the "Add up both rolls" step and beyond. If anyone can help it would be much appreciated. Thanks.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
      <head>
        <title>Dice Game</title>
        <link href="Dicegame.css" type="text/css" rel="stylesheet" /> 
      </head>
      <body>
      
        <div id='human' class='playerArea'>
          <h3>Human</h3>
          <div id='humanDice'>
          </div>
          <p id='humanTotal' class='total'></p>
        </div>
        
        <div id='computer' class='playerArea'>
          <h3>Computer</h3>
          <div id='computerDice'>
          </div>
          <p id='computerTotal' class='total'></p>
        </div>
        
        <div id='roll'>
          <a href='#' onclick='play(); return false;'>Roll</a>
        </div>
        
        <script type='text/javascript' src='lib.js'></script>
        <script type='text/javascript' src='dicegame.js'></script>
        
      </body>
    </html>
    *the external links are as follows*
    *Dicegame.css*
    body
    {
    background-color: #004400;
    }

    div.playerArea
    {
    position: absolute;
    top: 100px;
    bottom: 200px;
    width: 300px;

    background-color: #0996FF;
    border: 3px solid #0027C6;
    padding: 0 1em;
    }

    div#human
    {
    left: 100px;
    }

    div#computer
    {
    right: 100px;
    }

    div#roll
    {
    position: absolute;
    bottom: 50px;
    left: 100px;
    right: 100px;
    height: 100px;
    background-color: #FFFF00;
    border: 3px solid #FFBE00;

    }

    div#roll:hover
    {
    background-color: #FFFF99;
    }

    div#roll a
    {
    display: block;
    position: absolute;
    top: 0px;
    bottom: 0px;
    width: 100%;
    color: #004400;
    text-align: center;
    font-size: 90px;
    text-decoration: none;
    }

    div#roll a:hover
    {
    color: #FF0000;
    }

    p.total
    {
    margin: 10px;
    font-weight: bold;
    font-size: 8em;
    text-align: center;
    }

    p.winner
    {
    color: #00CC00;
    }

    p.loser
    {
    color: #CC0000;
    }[/CODE]

    *dicegame.js*
    Code:
    window.onload=function(){
    Nifty("div.playerArea", "big");
    }
    
    function roll()
    {
      var result = 0;
      result = Math.floor((Math.random() * 6) + 1);
      return result;
    }
    
    
    function play()
    {
      // create dice array
      var humanDice = new Array();
      var computerDice = new Array();
      
      // totals
      var humanTotal = 0;
      var computerTotal = 0;
      
      // output
      var out = "";
      
      // roll the dice
      for (var i = 0; i < 6; i++)
      {
        humanDice[i] = roll();
        humanTotal += humanDice[i];
        
        computerDice[i] = roll();
        computerTotal += computerDice[i];
      }
      
      // display human dice
      out = displayDice(humanDice);
      document.getElementById('humanDice').innerHTML = out;
      
      // display computer dice
      out = displayDice(computerDice);
      document.getElementById('computerDice').innerHTML = out;
      
      document.getElementById('humanTotal').innerHTML = humanTotal;
      document.getElementById('computerTotal').innerHTML =  computerTotal;  
      
      if (humanTotal > computerTotal)
      {
        document.getElementById('humanTotal').className = 'total winner';
        document.getElementById('computerTotal').className = 'total loser';
      }
      else if (computerTotal > humanTotal)
      {
        document.getElementById('humanTotal').className = 'total loser';
        document.getElementById('computerTotal').className = 'total winner';
      }
      else
      {
        document.getElementById('humanTotal').className = 'total';
        document.getElementById('computerTotal').className = 'total';
      }
    
    }
    
    function displayDice(dice)
    {
      var out = "";
      for (var i = 0; i < dice.length; i++)
      {
        out += "<img src='die" + dice[i] + ".png'/>";
      }
      
      return out;
    }
    *lib.js*

    Code:
    function output(text, tag)
    {
      document.write("<" + tag + ">" + text + "</" + tag + ">");
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Kill your lib.js file. It is doing nothing and even if it were it would be doing it wrong.

    Your dice should be showing up.

    Are you sure that you have the images (die1.png, die2.png, etc.) in the SAME DIRECTORY as the HTML code?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •