Help with Java Script Dice Game

TBreitenfeldt · July 18, 2015

I am sort of new to Java Script. I decided to practice my skills by creating a dice game using rules I made up based on the conditional statements in the logic. I was able to run the script fine as a very simple script where the dice would display on the page and based on the rules below, add up a score in a seperat spot on the page. However, I wanted to take it a step farther and add a "turn" bariable so that two people can play the game to win. I keep getting an error though saying that there is something wrong with my function.

More spacifically...

"Error Reference Error: rollDice is not defined Line 1"

rollDice() is my function that I want to call onclick

I am not sure what to do about this error.

Can someone help!

Here are the rules to the game I made. It is pretty obvius in the code where the conditional statements are for the rules.

This game is played with two die. The goal is to roll a score greater than or equal to 100.

You score by rolling a 6, which is worth 6 points, a double, which is worth 12 points, or a double 6 which is worth 18 points.

Here is my HTML Code.

<!DOCTYPE HTML>
<HTML LANG="EN">
<head>
<script src="DiceRoll.js"> </script>
<title> Dice Game </title>
<meta charset="utf-8">
<link href="format.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="header">
<p class="page-title"> Dice Game </p>
<p class="tagline"> Dueling Dice </p>
</div>
<div id="GameContent">
<h2> How to Score </h2>
<p> You score by rolling a 6, which is worth 6 points, a double, which is worth 12 points, or a double 6 which is worth 18 points. </p>
<h3> Dice Result </h3>
<div id="diceRoll">
</div>
<div id="score">
<h3> Score </h3>
<p>player 1 score is:</p>
<div id="player1Score">
</div>
<p>Player2 score is:</p>
<div id="player2Score">
</div>
</div> <!-- end score -->
<br>
<br>
<form>
<input type="button" value="Roll" name="roll" id="roll" onclick="rollDice()" accesskey="r">
</form>
</div> <!-- End content -->

</body>
</html>

And here is my Java Script

var dice1;
var dice2;
var score = 0;
var dice;
var turn;
var player1;
var player2;

function rollDice()
{
var dice1=Math.floor(Math.random()*6)+1;
var dice2=Math.floor(Math.random()*6)+1;
var diceRoll =document.getElementById('diceRoll').innerHTML = dice1 + "<br/>" + dice2 + "<br/>";

//turns
turn = player1 || player2;
switch (turn) {
case player1:
if (document.getElementById("roll").onclick == true) {
turn = player2;
}
else {
turn = player1;
}
break;
case player2:
if (document.getElementById("roll").onclick == true) {
turn = player1;
}
else {
turn = player 2;
}
break;
default:
turn = player1;
}
}
var player1=document.getElement.ById("player1Score").innerHTML = player1;
var player2=document.getElementById("player2Score".innerHTML = player2;)

turn = score;
 
//Rules for the game
if (dice1 == 6 || dice2 == 6)
{
score += 6;
}
if (dice1 == dice2)
{
score += 12;
}
if (dice1 ==6 & dice2 == 6)
{
score += 6;
}
if (score > 99)
{
alert("you rolled a " + dice1 + " and " + dice2 + ". Your score is " + score + ". Congradulations you won!!!");
score = 0
}
else
{
alert("you rolled a " + dice1 + " and " + dice2 + ". Your score is " + score + ".");
}
}

Right now I just want to get the script working, eventually I will make the html presentation look nicer.

Hope someone can help,

TJ Breitenfeldt

Edited July 19, 2015 by Ch0cu3r

scootstah · July 18, 2015

Your HTML is rendered before the Javascript is loaded. So at the time of onclick="rollDice()", the JS has not loaded yet and so the function does not exist.

Easy solution: Load your JS files just before the closing body tag.

<script src="DiceRoll.js"> </script>
</body>

EDIT: Actually, that was not accurate - you only have to load at the end of the body if you want JS to access DOM elements that otherwise wouldn't have existed yet. I had that backwards. As it turns out, in your case you still have to load it before the closing body tag, though, since you are looking for DOM elements that otherwise won't exist.

Your function was "not defined" because you have a whole bunch of syntax errors that are terminating the script. Have a look at the error console while loading your page, and try to work through them. You can access the developer console in Chrome by hitting CTRL+SHIFT+I, or going to the hamburger menu on the top right and then Tools -> Developer Tools.

Also, it is in your best interest to format your code properly - use proper indentation and line spacing. It's an illegible mess at the moment, so it's easy to make mistakes. Run it through this to see what I mean: http://jsbeautifier.org/

Edited July 18, 2015 by scootstah

TBreitenfeldt · July 19, 2015

Thanks for the help. I am actually visually impaired, so I have not cared to much about what the formatting of the code looks like. I went to the site you gave and managed to get all my Java Script spaced much better. I will try and start making it a habit to make my code look more like this.

I still need some help. I have been trying to find a good way to check errors in my Java Script that is accessible, but I am having some problems. I have tried the web consul in Firefox, IE, and Google Chrome and none of them are accessible enough to for me to read the Java Script errors. I found some code for an error trapper for Java Script and that is what I have been using.

Here is the code...

function ErrorTrap(msg,url,lineNo) {
window.alert("Error: " + msg + "\nLine: " + lineNo +
"\nULR: " + url);
}

onerror = ErrorTrap;

I have found a lot of errors with this, but I am stuck again.

In Firefox I am getting an error:

"Error: Script Error, Line 0"

Internet Explorer:

"Error: Syntax line: 117" which in notepad++ is my closing brase for my dice roll function.

Chrome:

"Error: Script Error, Line 0"

I am not sure what to do.

here is my html code again after the small change of moving the script tag to the bottom of the page.

<!DOCTYPE HTML>
<HTML LANG="EN">
<head>
<title> Dice Game </title>
<meta charset="utf-8">
<link href="format.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<p class="page-title"> Dice Game </p>
<p class="tagline"> Dueling Dice </p>
</div>
<div id="GameContent">
<h2> How to Score </h2>
<p> You score by rolling a 6, which is worth 6 points, a double, which is worth 12 points, or a double 6 which is worth 18 points. </p>
<h3> Dice Result </h3>
<div id="diceRoll">
</div>
<div id="score">
<h3> Score </h3>
<p>player 1 score is:</p>
<div id="player1Score">
</div>
<p>Player2 score is:</p>
<div id="player2Score">
</div>
</div> <!-- end score -->
<br>
<br>
<form>
<input type="button" value="Roll" name="roll" id="roll" onclick="rollDice()" accesskey="r">
</form>
</div> <!-- End content -->
<script src="DiceRoll.js"> </script>
</body>
<code>
</html>
 
Here is my Java Script again, after I have made some changes...
<code>
var dice1;

var dice2;

var score = 0;

var dice;

var turn;

var player1;

var player2;


function rollDice() {

var dice1 = Math.floor(Math.random() * 6) + 1;

var dice2 = Math.floor(Math.random() * 6) + 1;

var diceRoll = document.getElementById("diceRoll")

        .innerHTML = dice1 + "<br/>" + dice2 + "<br/>";


//turns

turn = player1 || player2;

switch (turn) {

case player1:

if (document.getElementById("roll")

            .onclick == true) {

turn = player2;

        } else {

turn = player1;

        }

break;

case player2:

if (document.getElementById("roll")

            .onclick == true) {

turn = player1;

        } else {

turn = player2;

        }

break;

default:

turn = player1;

    }

}

var player1 = document.getElement.ById("player1Score")

    .innerHTML = player1;

var player2 = document.getElementById("player2Score")

.innerHTML = player2;


turn = score;


//rules for the game

if (dice1 == 6 || dice2 == 6) {

score += 6;

}

if (dice1 == dice2) {

score += 12;

}

if (dice1 == 6 & dice2 == 6) {

score += 6;

}

if (score > 99) {

window.alert("you rolled a " + dice1 + " and " + dice2 + ". Your score is " + score + ". Congradulations you won!!!");

score = 0

} else {

window.alert("you rolled a " + dice1 + " and " + dice2 + ". Your score is " + score + ".");

}

}

If you have any ideas for possible ways I can try to error check my Java Script in a better way please let me know.

Thanks,

TJ Breitenfeldt

Edited July 19, 2015 by Ch0cu3r

scootstah · July 19, 2015

I'm not sure what you mean by "not accessible". Using sometihng like Chrome Developer Tools is going to be the best way. I've attached a screenshot of what an error looks like in the console. I purposefully tried to reference a variable that didn't exist, which creates an error. With a real error, it would show the file and line number on the right hand side, and if you click it it takes you right to that file and line.

Also, you're not using the correct tags to post your code here in the forum. If you're using the WYSIWYG editor (the default), just click the little <> icon and then add your code. Otherwise, you need to use square brackets instead of angle brackets.

code here

Ch0cu3r · July 19, 2015

BTW If you are finding the text hard to read in the browser console, click on the console and hold down the Ctrl key and press either the - or + keys (or mouse wheel up and down) to re-size the text.

TBreitenfeldt · July 19, 2015

Thanks for the tip about the code tag, I have never posted code on a form before.

Sorry, I should have been more specific. I am blind, I use a screen reader to use the computer. I say inaccessible because my screen reader doesn't function well with any of the web consuls that I mentioned earlier. So I am using that error script in an external Java Script, so all I have to do is enter in the script tag with the attribute src to use the file. It is only so effective though.

If you have any suggestions for other ideas I could try with my screen reader for checking my code that would be very helpful.

TJ Breitenfeldt

Sign In

Help with Java Script Dice Game

Recommended Posts

TBreitenfeldt

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

TBreitenfeldt

Link to comment

Share on other sites

scootstah

Link to comment

Share on other sites

Ch0cu3r

Link to comment

Share on other sites

TBreitenfeldt

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information