Shut the Box Project
First javascript file starter code
Instructions:
Use the code below to make a button and two new images on your HTML file called mainpage as well as your first javascript file.
This first set of code below are to be added in your mainpage.html. Two things to copy sepearatly. First the links to your new javascript file and a jQuery link to enable that library of functions. Copy these lines into the HEAD tag. The second part of the code is a button and two image tags and should be added to your BODY tag below your 'tile' div. You will need to find dice images and save them to your directory images/dice (make a dice folder). Name them 1.png, 2.png, etc....
Starter code to add on HTML file
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="stbScripts.js"></script>
<div id="leftside">
<button onclick="roll()">Roll</button>
</div>
<div id="dice">
<img src="images/dice/1.png" id="die1" class="numbers">
<img src="images/dice/1.png" id="die2" class="numbers">
</div>
Code for new JavaScript file
This second set of code is the new js file called 'stbScripts.js.' Copy and paste this second block of code into a new file and save it along side the CSS and HTML files in our top level.
//rolling the dice
function roll(){
// randomly choose dice
rand = Math.floor((Math.random() * 6) + 1);
rand2 = Math.floor((Math.random() * 6) + 1);
//img = document.getElementById("die1")
path='images/'+rand+'.png';
path2='images/'+rand2+'.png';
document.images["die1"].src = path;
document.images["die2"].src = path2;
//get new totals of dice
total = rand+rand2;
};