SHARE
TWEET

JavaScript Animation 2

redandwhite Mar 22nd, 2012 39 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>Animation</title>
  6. </head>
  7.  
  8. <script language="javascript">
  9. var ball = new Array(4);
  10. var curPos = 0;
  11. var startRolling;
  12.  
  13. var origX = 0;
  14. var origY = 0;
  15.  
  16. var powerVal = 1;
  17. var shot = 0;
  18. // assigning ball0.png to ball[0], ball1.png to ball[1], etc
  19. for (i=0; i < ball.length; i++) {
  20.         ball[i] = "ball"+i+".png";
  21. }
  22.  
  23. function moveRight(object, amount) {
  24.         var newPos = parseInt(object.style.left);
  25.         newPos = newPos+amount;
  26.         object.style.left = newPos + "px";
  27.         console.log("X:"+object.x);
  28. }
  29.  
  30. function moveDown(object, amount) {
  31.         var newPos = object.y;
  32.         newPos = newPos+amount;
  33.         object.style.top = newPos + "px";
  34.         console.log("Y:"+object.y);
  35. }
  36.  
  37. function rotateImg(imgToRotate, arrayOfImg, current) {
  38.        
  39.         if ((current >= (arrayOfImg.length-1)) || (current < 0)) {
  40.                 current = 0;
  41.         } else {
  42.                 current++;
  43.         }
  44.         // change image source to the current image, e.g. ball[2].png
  45.         imgToRotate.src = arrayOfImg[current];
  46.        
  47.         return current;
  48. }
  49.  
  50. function roll() {
  51.         var b = document.animatedBall;
  52.         var bin = document.bin;
  53.        
  54.         b.style.display = "block";
  55.         document.getElementById("rollButton").style.display = "none";
  56.        
  57.         if (origX == 0) {
  58.                 origX = getX(b);
  59.         }
  60.        
  61.         if (origY == 0) {
  62.                 origY = getY(b);
  63.         }
  64.        
  65.         curPos = rotateImg(b, ball, curPos);
  66.        
  67.         shot = powerVal*20;
  68.        
  69.         if (parseInt(b.style.left) < 530) {
  70.                 moveRight(b, 5);
  71.         } else {       
  72.                
  73.                 shot = shot + 540;
  74.                 moveImg(b, shot, 235, 50);
  75.                 console.log("shot:"+shot);
  76.         }
  77.        
  78.         if (getY(b) > 230) {
  79.                 var text = document.getElementById("wonLost");
  80.                 if (shot == getX(bin)) {
  81.                         moveDown(b, 45);
  82.                         text.innerHTML = "You&nbsp;won!";
  83.                         b.style.display = "none";
  84.                 } else {
  85.                         text.innerHTML = "Try&nbsp;again";
  86.                 }
  87.                
  88.                 clearInterval(startRolling);
  89.         }
  90. }
  91.  
  92. function getX(image) {
  93.         return parseInt(image.style.left);
  94. }
  95.  
  96. function getY(image) {
  97.         return image.y;
  98. }
  99.  
  100. function moveImg(image, endX, endY, totalSteps) {
  101.         var moveX = endX / totalSteps;
  102.         if (moveX < 1) {
  103.                 moveX = 1;
  104.         }
  105.        
  106.         var moveY = endY / totalSteps;
  107.         if (moveY < 1) {
  108.                 moveY = 1;
  109.         }
  110.        
  111.         if (getX(image) <= endX) {
  112.                 moveRight(image, moveX);
  113.         }
  114.        
  115.         if (getY(image) <= endY) {
  116.                 moveDown(image, moveY);
  117.         }
  118. }
  119.  
  120. function resetBall(x, y) {
  121.         var b = document.animatedBall;
  122.         b.style.left = x + "px";
  123.         b.style.top = y + "px";
  124.         clearInterval(startRolling);
  125.         document.getElementById("wonLost").innerHTML = "";
  126.         document.getElementById("rollButton").style.display = "inline";
  127.         document.animatedBall.style.display = "block";
  128.         showAndSetPower(powerVal);
  129.         randomBinPosition();
  130. }
  131.  
  132. function randomBinPosition() {
  133.         var r=Math.floor(Math.random()*5);
  134.         r++;
  135.         r = r*20;
  136.         r = r+540;
  137.         document.bin.style.left = r+"px";
  138.         document.getElementById("binPos").innerHTML = r;
  139. }
  140.  
  141. function showAndSetPower(newVal) {
  142.         document.getElementById("powerDisplay").innerHTML=newVal;
  143.         document.getElementById("shotPos").innerHTML = 540+(newVal*20);
  144.         powerVal = newVal;
  145. }
  146. </script>
  147. </head>
  148. <body style="font-family:sans-serif;" onLoad="origX=40;origY=13;resetBall(origX, origY);">
  149. <img src="ball0.png" name="animatedBall"
  150.         style="position:absolute;left:550px; top:280px; z-index:1" width="50">
  151. <img src="desk.jpg" name="desk"
  152.         style="position:absolute; left:-50px; top:60px; z-index:-1;">
  153.  
  154. <img src="bin.png" name="bin" width="55"
  155.         style="position:absolute; left:550px; top: 280px; z-index:2;">
  156.  
  157. <form style="position:absolute; top:200px; left:100px;">
  158. <input type="button" name="roll" id="rollButton" value="Roll"
  159.         onClick="startRolling=setInterval('roll()',10);">
  160.        
  161. <input type="button" name="reset" value="Reset"
  162.         onClick="resetBall(origX, origY);">
  163.  
  164. <b>Power:&nbsp;</b>
  165. <input type="range" name="power" id="power" value="1" min="1" max="5" style="max-width:75px;"
  166.         onChange="showAndSetPower(this.value);"><span id="powerDisplay">1</span>
  167. <br>
  168. <span id="wonLost" style="color:red; position:absolute; top:50px; left:100px; font-size:1.2em;"></span>
  169.  
  170. <div id="valueLog" style="font-size:0.6em; top:120px; left:300px; position:absolute;">
  171. Bin:&nbsp;<span id="binPos" style="">0</span><br>
  172. Shot:&nbsp;<span id="shotPos" style="">0</span></div>
  173. </form>
  174. <hr style="position:absolute; top:340px; min-width:700px; min-height:5px;">
  175. <p style="position:absolute; font-size:0.8em; top:400px; max-width:320px; line-height:1.5em; left: 100px">The bin to the  right of the desk will move to a random position every time you click the <em>Reset</em> button. You have to select a power, and click the <em>Roll</em> button. This will only work in browsers that support the HTML5 slider, the <em>range</em> element. Currently this means webkit-based browsers like Apple Safari or Google Chrome. More info <a style="color:#666" href="post.html">available here</a>.</p>
  176. </body>
  177. </html>
RAW Paste Data
Want to get better at HTML 5?
Learn to code HTML 5 in 2017
Top