{"id":2140,"date":"2017-08-11T13:35:48","date_gmt":"2017-08-11T13:35:48","guid":{"rendered":"http:\/\/javascript-tutor.net\/?page_id=2140"},"modified":"2018-04-08T02:21:20","modified_gmt":"2018-04-08T02:21:20","slug":"animated-dice","status":"publish","type":"page","link":"https:\/\/javascript-tutor.net\/index.php\/animated-dice\/","title":{"rendered":"Animated Dice"},"content":{"rendered":"

We have shown how to create a dice in our example, Graphical Dice<\/a>. However, we need to refresh the web page in order to change the faces of the dice, therefore, it is not suitable for playing games.<\/p>\n

In this example, we will create an animated dice that changes rapidly when we click the roll dice button. In order to create an animated dice, first of all, you need to design 6 images of a dice that represent \u00a01, 2, 3,4, 5 and 6,\u00a0Next, we need to create a JavaScript function that can generate an animated dice.<\/p>\n

To create animation, we use the setInterval<\/strong> method, the syntax is as follows:<\/p>\n

myVariable=setInterval(myfunction, time interval)<\/pre>\n
The setInterval method runs a function created by you at a certain time interval in milliseconds. \u00a0For example, \u00a0a time interval of 1000 equals to 1 second.<\/p>\n
We use the following syntax to create 6 random numbers:<\/p>\n
ranNum = Math.floor( 1 + Math.random() * 6 );<\/pre>\n
We also use the following statement to load the first image as default image.<\/p>\n
<img id=\"die\" src=\"1.jpg\" width=\"50\" height=\"50\"><\/pre>\n
The id is important as we shall use it to load other images when animation starts, as shown in the following code:<\/p>\n
var ranNum = Math.floor( 1 + Math.random() * 6 );\r\nvar dice = document.getElementById(\"die\");\r\ndice.src=ranNum+\".jpg\";\r\n}\r\n<\/pre>\n
ranNum will be a random integers from 1 to 6, and by using the src property and combining ranNum+”.jpg”, we will be able to load the 6 images randomly.<\/p>\n
The full script:<\/p>\n
<html>\r\n<head>\r\n<meta http-equiv=\"Content-Type\" content=\"text\/html; charset=windows-1252\">\r\n<title>JavaScript Graphical Dice Function<\/title>\r\n<meta name=viewport content=\"width=device-width, initial-scale=1\">\r\n\r\n<\/head>\r\n<body>\r\n<img id=\"die\" src=\"1.jpg\" width=\"50\" height=\"50\">\r\n\r\n<button onclick=\"AniDice()\">Roll Dice<\/button>\r\n<button onclick=\"stopDice()\">Stop<\/button>\r\n\r\n<script>\r\n\r\nfunction AniDice()\r\n{\r\nmyVar=setInterval(rolldice,20)\r\n}\r\n\r\nfunction rolldice()\r\n{\r\nvar ranNum = Math.floor( 1 + Math.random() * 6 );\r\nvar dice = document.getElementById(\"die\");\r\ndice.src=ranNum+\".jpg\";\r\n}\r\nfunction stopDice()\r\n{clearInterval(myVar);}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
View Animated Dice <\/a>here.<\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
We have shown how to create a dice in our example, Graphical Dice. However, we need to refresh the web page in order to change the faces of the dice, therefore, it is not suitable for playing games. In this example, we will create an animated dice that changes rapidly when we click the roll … Continue reading “Animated Dice”<\/span><\/a><\/p>\n","protected":false},"author":35895,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2140","page","type-page","status-publish","hentry"],"yoast_head":"\nAnimated Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials<\/title>\n<meta name=\"description\" content=\"Creating an animated dice in JavaScript\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animated Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"og:description\" content=\"Creating an animated dice in JavaScript\" \/>\n<meta property=\"og:url\" content=\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\" \/>\n<meta property=\"og:site_name\" content=\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-08T02:21:20+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/javascript-tutor.net\/index.php\/animated-dice\/\",\"url\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\",\"name\":\"Animated Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"isPartOf\":{\"@id\":\"https:\/\/javascript-tutor.net\/#website\"},\"datePublished\":\"2017-08-11T13:35:48+00:00\",\"dateModified\":\"2018-04-08T02:21:20+00:00\",\"description\":\"Creating an animated dice in JavaScript\",\"breadcrumb\":{\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/javascript-tutor.net\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animated Dice\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/javascript-tutor.net\/#website\",\"url\":\"https:\/\/javascript-tutor.net\/\",\"name\":\"Learn JavaScript Online | Free Interactive JavaScript Tutorials\",\"description\":\"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.\",\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Animated Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Creating an animated dice in JavaScript","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html","og_locale":"en_US","og_type":"article","og_title":"Animated Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials","og_description":"Creating an animated dice in JavaScript","og_url":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html","og_site_name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","article_modified_time":"2018-04-08T02:21:20+00:00","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/javascript-tutor.net\/index.php\/animated-dice\/","url":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html","name":"Animated Dice - Learn JavaScript Online | Free Interactive JavaScript Tutorials","isPartOf":{"@id":"https:\/\/javascript-tutor.net\/#website"},"datePublished":"2017-08-11T13:35:48+00:00","dateModified":"2018-04-08T02:21:20+00:00","description":"Creating an animated dice in JavaScript","breadcrumb":{"@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/javascript-tutor.net\/jSample\/jsp_anidice2.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/javascript-tutor.net\/"},{"@type":"ListItem","position":2,"name":"Animated Dice"}]},{"@type":"WebSite","@id":"https:\/\/javascript-tutor.net\/#website","url":"https:\/\/javascript-tutor.net\/","name":"Learn JavaScript Online | Free Interactive JavaScript Tutorials","description":"Master JavaScript with free, interactive tutorials for beginners and experienced coders. Practice live coding and visualize how JavaScript works step by step.","inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2140","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/users\/35895"}],"replies":[{"embeddable":true,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/comments?post=2140"}],"version-history":[{"count":4,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2140\/revisions"}],"predecessor-version":[{"id":2144,"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/pages\/2140\/revisions\/2144"}],"wp:attachment":[{"href":"https:\/\/javascript-tutor.net\/index.php\/wp-json\/wp\/v2\/media?parent=2140"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}