API tools faq
paste
Advertisement
redandwhite

JavaScript Animation 2

redandwhite
Mar 22nd, 2012
98
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 4.76 KB | None | 0 0
raw download clone embed print report
  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>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!