Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
SQL Server

How We Can Make a Dice Roller Using JavaScript.

Author: DevASP
Download Source Code :

This article is about how you can make a dice roller. This is important if you are going to develop a dice roller game. How you can implement the roll of dice. How many dice you are going to roll and

Steps you will do.


Start visual studio and create a new web application.Open the HTML code of your web page and write the following JavaScript functions before closing the head tag.



<script language="JavaScript">


var die = 6;

var dice = 3;

function dice_roll(die, dice) {

var roll = 0;

for (loop=0; loop < dice; loop++) {


roll = roll + Math.round(Math.random() * die) % die + 1;


document.form.text.value = roll;






Now add the following HTML code in the body of your web page which will design layout of your web page.





<form name="form">

<table border="2" cellpadding="5">


<td colspan="2" align="center">What dice type?</td>

<td colspan="2" align="center">How many dice to roll?</td>



<td valign="top" align="center">

<p><input type="radio" name="sides" onclick="die = 3">3 Sided

<p><input type="radio" name="sides" onclick="die = 4">4 Sided

<p><input type="radio" name="sides" onclick="die = 5">5 Sided

<p><input type="radio" checked name="sides" onclick="die = 6">6 Sided

<p><input type="radio" name="sides" onclick="die = 8">8 Sided</p>


<td valign="top" align="center">

<p><input type="radio" name="sides" onclick="die = 10">   10 Sided

<p><input type="radio" name="sides" onclick="die = 12">12 Sided

<p><input type="radio" name="sides" onclick="die = 20">20 Sided

<p><input type="radio" name="sides" onclick="die = 30">30 Sided

<p><input type="radio" name="sides" onclick="die = 100">100 Sided</p>


<td valign="top" align="center">

<p><input type="radio" name="number" onclick="dice = 1">1

<p><input type="radio" name="number" onclick="dice = 2">2

<p><input type="radio" checked name="number" onclick="dice = 3">3

<p><input type="radio" name="number" onclick="dice = 4">4

<p><input type="radio" name="number" onclick="dice = 5">5</p>


<td valign="top" align="center">

<p><input type="radio" name="number" onclick="dice = 6">6

<p><input type="radio" name="number" onclick="dice = 7">7

<p><input type="radio" name="number" onclick="dice = 8">8

<p><input type="radio" name="number" onclick="dice = 9">9

<p><input type="radio" name="number" onclick="dice = 10">10</p>




<td align="center" colspan="4">

<input type="button" value="Roll Dice" name="button" onclick="dice_roll(die, dice)">

<input type="text" size="10" name="text">







<font face="arial, helvetica" size="-2">Dont forget to visit devasp<br>

<a href=""></a></font>




Run your application select the number of sides for a single dice after that selects total number of dice you want to roll. And finally click the button and see the result of rolled dice in text field.

Add Article Comment:
Name :
Email Address :
Comments :
<< How We can Retrieve File’s Time Information Using Win32 System Services :

Disclaimer - Privacy
© 2002-2017