Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 7th, 2012  |  syntax: None  |  size: 3.32 KB  |  hits: 15  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. JavaScript: HTML5 and sliding a ball up the page
  2. var context, canvas;
  3. var x = 100;
  4. var y = 200;
  5. var dx = 5;
  6. var dy = .02;
  7.  
  8. function drawCircle(move) {
  9.     if(move) {
  10.         x = move.x
  11.         y = move.y
  12.     }
  13.  
  14.     canvas = document.getElementById('myCanvas');
  15.     context = canvas.getContext('2d')
  16.     context.clearRect(0,0,canvas.width, canvas.height);
  17.     context.beginPath()
  18.     context.fillStyle = "#0000ff";
  19.     context.arc(x, y, 20, 0, Math.PI*2, true);
  20.     context.closePath();
  21.     context.fill();
  22.     // if(x < 0 || x > canvas.width) dx=-dx;
  23.     // if(y < 0 || y > canvas.height) dy =- dy;
  24.  
  25.     if(move) {
  26.             y+=dy
  27.     }
  28.  
  29.     // x+=dx
  30.     // y+=dy
  31. }
  32.  
  33. window.onload = function(e){
  34.     // setInterval(drawCircle, 10)
  35.     drawCircle()
  36.     canvas.onclick = function(){
  37.         var move = {
  38.             x: 100,
  39.             y: 100
  40.         }
  41.         drawCircle(move)
  42.     }
  43. }
  44.        
  45. var context, canvas, target;
  46. var x = 100;
  47. var y = 200;
  48. var dx = 5;
  49. var dy = 2; //.2 is pretty slow
  50.  
  51. function drawCircle() {
  52.  
  53.     // sliding up
  54.     if (y > target) {
  55.         y -= dy;
  56.     }
  57.         context.clearRect(0, 0, canvas.width, canvas.height);
  58.         context.beginPath()
  59.         context.fillStyle = "#0000ff";
  60.         context.arc(x, y, 20, 0, Math.PI * 2, true);
  61.         context.fill();
  62.         context.closePath();
  63.  
  64. }
  65.  
  66. window.onload = function () {
  67.  
  68.     // get canvas, and context once
  69.     canvas = document.getElementById('myCanvas');
  70.     context = canvas.getContext('2d');
  71.  
  72.     // set target y position
  73.     canvas.onclick = function (e) {
  74.         target = e.clientY;
  75.     }
  76.     // 30fps
  77.     setInterval(drawCircle, (1000 / 30));
  78. }
  79.        
  80. var context, canvas;
  81.     var x = 100;
  82.     var y = 200;
  83.     var dx = 5;
  84.     var dy = 5; //0.02 makes it move v. slowly!
  85.  
  86.     function drawCircle(move) {
  87.         if(move) {
  88.             x = move.x
  89.             y = move.y
  90.         }
  91.  
  92.         context.clearRect(0,0,canvas.width, canvas.height);
  93.         context.beginPath()
  94.         context.fillStyle = "#0000ff";
  95.         context.arc(x, y, 20, 0, Math.PI*2, true);
  96.         context.closePath();
  97.         context.fill();
  98.     }
  99.  
  100.     window.onload = function(e){
  101.         canvas = document.getElementById('myCanvas');
  102.         context = canvas.getContext('2d');
  103.         drawCircle()
  104.         var interval;
  105.         canvas.onclick = function(){
  106.            if(interval) //don't run if already doing so..
  107.                 return;
  108.             var end_move = {
  109.                 x: 100,
  110.                 y: 100
  111.             };
  112.             var interval = setInterval(function(){
  113.                 if(x === end_move.x && y === end_move.y){
  114.                      //stop animation case..
  115.                      clearInterval(interval);
  116.                      interval = undefined;
  117.                 } else {
  118.                     var newX;
  119.                     if(Math.abs(x - end_move.x) < dx){
  120.                        newX = x;
  121.                     } else {
  122.                         newX = (x > end_move.x) ? x-dx : x+dx;
  123.                     }
  124.                     var newY;
  125.                     if(Math.abs(y - end_move.y) < dy){
  126.                        newY = y;  
  127.                     } else {
  128.                         newY = (y > end_move.y) ? y-dy : y+dy;
  129.                     }
  130.                     drawCircle({
  131.                         x: newX,
  132.                         y: newY
  133.                     });  
  134.                 }
  135.             }, 10);
  136.         }
  137.     }
create a new version of this paste RAW Paste Data