8 Replies - 3692 Views - Last Post: 26 May 2012 - 08:58 PM

#1 busta5000  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: -7
  • View blog
  • Posts: 147
  • Joined: 08-March 08

JavaScript dice rolling game concatenation

Posted 06 February 2012 - 03:11 AM

Objective:
  • A button to run the function 5 times only.
  • 2 players each player has 2 dices.
  • cocatinate the total e.x. X=1, Y=3 so total =13.
  • compare the total of both players to decide which value is larger.
  • put it in a table.


I should make a dice game rolling game, there are two players each player has two dices. So thats a total of 4 dices. The dices values are random from 1 to 6. Then the values of the dices for every player are concatenated.
e.x. if dice1 = 2; dice2 = 3; then the total would be 23. After that I compare the total1 with total2 to check who won. So the winner will have a score so both start at nothing like 0 then the winner will start with the score 1; until 5 rounds have been finished the score will be compared and will decide who is the winner. There must be a button that says roll it will start 5 rounds. So the button will start the function 5 times. so when you click the button again it will start a new line.

This is the code:

<html>
<head>
<script type = "text/javascript">

//player1 variables
var dice1 = ["1", "2", "3", "4", "5", "6"];  //string for concatenation
var dice2 = ["1", "2", "3", "4", "5", "6"];
var score1;			//concatenation
var total1 = 0;			//total number of wins

//player2 variables
var dice3 = ["1", "2", "3", "4", "5", "6"];
var dice4 = ["1", "2", "3", "4", "5", "6"];
var score2;
var total2 = 0;
var rnum = 0;    //round number for table from 1 till 5
var decicsion1; //if player1 won
var decision2; // if player2 won
var round = 0;	  //the counter variable to limit the button to be clicked 5 times


//starting table headers
 document.writeln("<table border = \"1\"><thead>");
document.writeln("<th>Round</th>" + "<th>Player 1</th>" + "<th>Player 2</th></thead><tbody>"); //1st row

if (round<=5) // here starts the counter to limit and let the function only work 5 times for the button
{
//IDK what to put here return 0; does nothing obviously. I want it to close after the button has been clicked the 5th time.

function play()
{
//player1
dice1 = Math.floor( 1 + Math.random() * 6 ); //this should randomize the string values or generate new numbers.
dice2 = Math.floor( 1 + Math.random() * 6 );
score1 = dice1 + dice2;  //concatination I've seen this method there is another methods like score1 = dice1.concat(dice2); both do not work

//player2
dice3 = Math.floor( 1 + Math.random() * 6 );
dice4 = Math.floor( 1 + Math.random() * 6 );
score2 = dice3 + dice4;


//total wins
/*what I want this to do is add 1 to the winner so player1, 2 start at 0,0 
then who ever wins its 0,1 then 1,1 or 0,1 like a soccer scoring board*/
if (score1>score2)					
						{
						total1 += 1; 
						total2 += 0;
						}
						else{

						total1 += 0;
						total2 += 1;
						}
//desicion of who won
if (total1>total2)
	{
decision1= document.write("Winner");
decision1= document.write("Loser");
	}
						else{
decision1= document.write("Loser");
decision1= document.write("Winner");
						}

						
						
						
// The 3x8 table that has all the results 
rnum = Math.floor(5 * Math.random()); //round  number
document.writeln("<tr><td>round</td><td>"+rnum+"</td><td>"+score1+"</td><td>"+score2+"</td><tr>");// 1-5 rows
document.write("<tr><td>total</td><td>"+total1+"</td><td>"+total2+"</td><tr>"); //6th row
document.write("<tr><td>Winner</td><td>"+decision1+"</td><td>"+decision2+"</td><tr>"); //7th row
}
} //closeing of the if-statment

</script>
</head>
<body>
<form action="">
<input type="button" value="Roll Dice" onclick="play()"> 
</form>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: JavaScript dice rolling game concatenation

#2 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3510
  • View blog
  • Posts: 10,133
  • Joined: 08-June 10

Re: JavaScript dice rolling game concatenation

Posted 06 February 2012 - 04:00 AM

and it's not working?
Was This Post Helpful? 0
  • +
  • -

#3 busta5000  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: -7
  • View blog
  • Posts: 147
  • Joined: 08-March 08

Re: JavaScript dice rolling game concatenation

Posted 06 February 2012 - 04:19 AM

View PostDormilich, on 06 February 2012 - 04:00 AM, said:

and it's not working?


yes its not working
Was This Post Helpful? 0
  • +
  • -

#4 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3510
  • View blog
  • Posts: 10,133
  • Joined: 08-June 10

Re: JavaScript dice rolling game concatenation

Posted 06 February 2012 - 05:17 AM

and what it is not doing it should?

have you checked the Error Console?
Was This Post Helpful? 0
  • +
  • -

#5 busta5000  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: -7
  • View blog
  • Posts: 147
  • Joined: 08-March 08

Re: JavaScript dice rolling game concatenation

Posted 06 February 2012 - 05:51 AM

View PostDormilich, on 06 February 2012 - 05:17 AM, said:

and what it is not doing it should?

have you checked the Error Console?


yes everything is not working. Even though these codes work if written alone in a basic more limited function. It also doesn't give hits or reason why the codes doesn;t give the reasons.

e.x. it gives syntax error for this line
document.write("<table border = \"1\"><thead><tr>");

after I put the this part inside the function it was fixed but it gave another syntax error
document.write("<table border = \"1\"><thead><tr>");


so I;m not sure why since I typed these codes and they worked fine separately.
Was This Post Helpful? 0
  • +
  • -

#6 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3510
  • View blog
  • Posts: 10,133
  • Joined: 08-June 10

Re: JavaScript dice rolling game concatenation

Posted 06 February 2012 - 05:53 AM

do tables belong in the head section of a HTML page?

and then there is the one problem nearly every beginner has with document.write()*.







* - you have never been explained what document.write() really does

This post has been edited by Dormilich: 06 February 2012 - 05:59 AM

Was This Post Helpful? 0
  • +
  • -

#7 busta5000  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: -7
  • View blog
  • Posts: 147
  • Joined: 08-March 08

Re: JavaScript dice rolling game concatenation

Posted 06 February 2012 - 09:56 PM

View PostDormilich, on 06 February 2012 - 05:53 AM, said:

do tables belong in the head section of a HTML page?

and then there is the one problem nearly every beginner has with document.write()*.







* - you have never been explained what document.write() really does


well that is not the main problem I want the header to be outside the function so that the function creates a new row for the table. Or there is another method which is create the entire table outside the function and put strings inside the table and then the function would replace these strings line by line IDK. the objective is obvious every time I click roll a new round starts giving who won the game.

please try to run the code to understand what its real problem is and how it should work I already gave the objectives
here are the problems. I re-edited the code and changed few things and I am certain no one read the code because the first problem was easy to notice but those fixed were minor compared to the real problems:
  • table was not closed </tbody></table> (fixed)
  • button disappears after it runs the function
  • the counter examples do not teach how to limit the button clicks to a specific number of clicks.
  • the concatination works fine now but the total used to work but it resets the value 0-1 or 1-0 it doesn't add even though I added total+=1 in an if-statment.
  • the counter should run the code max 5 times every time it starts a new row max of 5 rows
  • the values of previous round should not disappear yet every time the function resets so there must be a way to save the values.


This is the same code but fixed few problems. changed few things etc plus I already put comments to explain the code.
<html>
<head>
<script type = "text/javascript">

//player1 variables
var dice1;  //string for concatenation
var dice2;
var score1;									//concatenation
var total1 = 0;								//total number of wins

//player2 variables
var dice3;
var dice4;
var score2;
var total2 = 0;
var rnum = 0;    //round number for table from 1 till 5
var decicsion1; //if player1 won
var decision2; // if player2 won
var round = 0;	  //the counter variable to limit the button to be clicked 5 times
var game1;
var game2;
var game3;
var game4;
var game5;



if (round<=5) // here starts the counter to limit and let the function only work 5 times for the button
{
<button roll="disabled">

//IDK what to put here return 0; does nothing obviously. I want it to close after the button has been clicked the 5th time.
//starting table headers
document.write("<table border = \"1\"><thead><tr>");
document.write("<th>Round</th><th>Player 1</th><th>Player 2</th>");
document.write("</tr></thead>"); //1st row
function play()
{
//player1
dice1 = Math.floor(  1 + Math.random() * 6 )+''; //this should randomize the string values or generate new numbers.
dice2 = Math.floor(  1 + Math.random() * 6 )+'';
if(dice1>dice2)
score1 = dice1 + dice2;  //concatination I've seen this method there is another methods like score1 = dice1.concat(dice2); both do not work
else
score1 = dice2 + dice1;
document.write("Score 1: "+score1+"<br/>");
//player2
dice3 = Math.floor( 1 + Math.random() * 6 )+'';
dice4 = Math.floor( 1 + Math.random() * 6 )+'';
if(dice3>dice4)
score2 = dice3 + dice4;
else
score2 = dice4 + dice3;


//total wins
/*what I want this to do is add 1 to the winner so player1, 2 start at 0,0 
then who ever wins its 0,1 then 1,1 or 0,1 like a soccer scoring board*/
if (score1>score2)					
						{
						total1 += 1; 
						//total2 += 0;
						}
						else{

						//total1 += 0;
						total2 += 1;
						}
//desicion of who won
if (total1>total2)
	{
decision1= document.write("Winner");
decision2= document.write("Loser");
	}
						else{
decision1= document.write("Loser");
decision1= document.write("Winner");
						}


// The 3x8 table that has all the results 
rnum = Math.floor(1 + Math.random()*5); //round  number	
document.write("<tbody><tr><td>round</td><td>"+rnum+"</td>");
document.write("<td>"+score1+"</td><td>"+score2+"</td><tr>");// 1-5 rows
document.writeln("<tr><td>total</td><td>"+total1+"</td>");
document.write("<td>"+total2+"</td><tr>"); //6th row
document.writeln("<tr><td>Winner</td><td>"+decision1);
document.write("</td><td>"+decision2+"</td><tr>"); //7th row
document.write("</tbody></table>"); //closing table					

} //this is the closing of this play
}




</script>
</head>
<body>

<form action="">
<input type="button" value="Roll" onclick="play()"> 

</form>
</body>
</html>


This post has been edited by busta5000: 06 February 2012 - 10:03 PM

Was This Post Helpful? 0
  • +
  • -

#8 Dormilich  Icon User is online

  • 痛覚残留
  • member icon

Reputation: 3510
  • View blog
  • Posts: 10,133
  • Joined: 08-June 10

Re: JavaScript dice rolling game concatenation

Posted 06 February 2012 - 11:16 PM

View Postbusta5000, on 07 February 2012 - 05:56 AM, said:

please try to run the code to understand what its real problem is

without trying I can tell you that once you click the roll-button, the play() function will erase all (Javascript) code including itself.

besides that, tables are not allowed inside <head>. period.
Was This Post Helpful? 0
  • +
  • -

#9 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 826
  • Joined: 25-October 08

Re: JavaScript dice rolling game concatenation

Posted 26 May 2012 - 08:58 PM

This is NOT the final solution to your problem (you have several more)
but at least it will show something to work with to fix.
<html>
<head>
<script type = "text/javascript">

//player1 variables
var dice1;  //string for concatenation
var dice2;
var score1;									//concatenation
var total1 = 0;								//total number of wins

//player2 variables
var dice3;
var dice4;
var score2;
var total2 = 0;

var rnum = 0;    //round number for table from 1 till 5
var decicsion1;  //if player1 won
var decision2;   // if player2 won
var round = 0;	 //the counter variable to limit the button to be clicked 5 times
var game1;
var game2;
var game3;
var game4;
var game5;

function play() {
  var str = '';
//starting table headers
  str += "<table border = \"1\"><thead><tr>";
  str += "<th>Round</th><th>Player 1</th><th>Player 2</th>";
  str += "</tr></thead>"; //1st row

//player1
 dice1 = Math.floor(  1 + Math.random() * 6 )+''; //this should randomize the string values or generate new numbers.
 dice2 = Math.floor(  1 + Math.random() * 6 )+'';
 if (dice1>dice2) score1 = dice1 + dice2;  
             else score1 = dice2 + dice1;
 str += "Score 1: "+score1+"<br/>";
//player2
 dice3 = Math.floor( 1 + Math.random() * 6 )+'';
 dice4 = Math.floor( 1 + Math.random() * 6 )+'';
 if (dice3>dice4) score2 = dice3 + dice4;
             else score2 = dice4 + dice3;

//total wins
/*
what I want this to do is add 1 to the winner so player1, 2 start at 0,0 
then who ever wins its 0,1 then 1,1 or 0,1 like a soccer scoring board
*/
if (score1>score2) { total1 += 1;  } //total2 += 0;
              else { total2 += 1; }  //total1 += 0;

//desicion of who won
if (total1>total2) {
  decision1= "Winner";  decision2= "Loser";
} else {
  decision1= "Loser";   decision1= "Winner";
}

// The 3x8 table that has all the results 
 rnum = Math.floor(1 + Math.random()*5); //round  number	
  str += "<tbody><tr><td>round</td><td>"+rnum+"</td>";
  str += "<td>"+score1+"</td><td>"+score2+"</td><tr>";// 1-5 rows
  str += "<tr><td>total</td><td>"+total1+"</td>";
  str += "<td>"+total2+"</td><tr>"; //6th row
  str += "<tr><td>Winner</td><td>"+decision1;
  str += "</td><td>"+decision2+"</td><tr>"; //7th row
  str += "</tbody></table>"; //closing table					
  document.getElementById('tblDisplay').innerHTML += str;
//this is the closing of this play
}

</script>
</head>
<body>
<form name="myForm" action="" method="post" onsubmit="return false">
<input type="button" value="Roll" onclick="play()"> 
<div id="tblDisplay"></div>
</form>
</body>
</html>


What does it leave out?
1. It does not limit to five rounds. It is best to make one round work first, then make the changes to limit the number of times the round is executed.
2. Your table has the score in the wrong place for me, but it is your game design.

Suggest you use error console in FF to see errors as you make further changes.
As 'Dormilich' pointed out, you cannot use document.write() if you plan on updating the page after the first roll of the die. This version uses .innerHTML to at least display the round.

I do not understand the rules of the game. Concatenation is fine, but how would you determine if the roll was 1+3 to equal 13 and not 31 if both die are rolled simultaneously?

This post has been edited by JMRKER: 26 May 2012 - 08:59 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1