Help creating a javascript dice game.

pengu · 11-14-2011, 03:20 AM

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 + ">");
}

Old Pedant · 11-14-2011, 04:01 AM

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?