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

Hoping Ball

By: a guest on Apr 21st, 2011  |  syntax: JavaScript  |  size: 2.02 KB  |  hits: 254  |  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. <!doctype html>
  2.  
  3. <html>
  4.         <head>
  5.                 <script>
  6.                        
  7.                         var e = 0.8;
  8.                         var canvas;
  9.                         var ctx
  10.                        
  11.                         var width;
  12.                         var height;
  13.                        
  14.                         var ball;
  15.                        
  16.                         function init(){
  17.                                 initStage();
  18.                                 setInterval(onDraw, 20);                               
  19.                         }
  20.                        
  21.                         function initStage(){          
  22.                                 canvas = document.getElementById("canvas");
  23.                                 ctx = canvas.getContext("2d");
  24.                                                        
  25.                                 canvas.width = document.width - 100;
  26.                                 canvas.height = document.height - 100;
  27.                                                        
  28.                                 width = canvas.width;
  29.                                 height = canvas.height;
  30.                                
  31.                                 ctx.strokeStyle = "blue";
  32.                                
  33.                                 ball = new Ball();
  34.                         }
  35.                        
  36.                         function onDraw (){    
  37.                                 canvas.width = canvas.width;
  38.                                 ball.update(); 
  39.                         }
  40.                        
  41.                         function degToRad(deg){
  42.                                 return (Math.PI / 180) * deg;
  43.                         }
  44.                        
  45.                         function Ball(){
  46.                                 this.x = width / 2;
  47.                                 this.y = height / 2;
  48.                                 this.vx = 10;
  49.                                 this.vy = -5;
  50.                                 this.ax = 0;
  51.                                 this.ay = 1;
  52.                                 this.radius = 15;
  53.                                 this.lineWidth = 5;
  54.                                
  55.                                 this.update = function(){
  56.                                         this.updatePhysics();
  57.                                         this.redraw();
  58.                                 }
  59.                                
  60.                                 this.updatePhysics = function(){
  61.                                         this.x += this.vx;
  62.                                         this.vx += this.ax;
  63.                                        
  64.                                         this.y += this.vy;
  65.                                         this.vy += this.ay;
  66.                                        
  67.                                         if(this.x - this.radius < 0 || this.x + this.radius > width){
  68.                                                 if(this.x - this.radius < 0){
  69.                                                         this.x = this.radius;
  70.                                                 }else{
  71.                                                         this.x = width - this.radius;
  72.                                                 }
  73.                                                 this.vx *= -1 * e;
  74.                                         }
  75.                                         else if(this.y - this.radius < 0 || this.y + this.radius > height){
  76.                                                 if(this.y - this.radius < 0){
  77.                                                         this.y = this.radius;
  78.                                                 }
  79.                                                 else{
  80.                                                         this.y = height - this.radius;
  81.                                                 }
  82.                                                
  83.                                                 this.vy *= -1 * e;
  84.                                         }
  85.                                 }
  86.                                
  87.                                 this.redraw = function(){
  88.                                         ctx.beginPath();
  89.                                         ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
  90.                                         ctx.closePath();
  91.                                         ctx.lineWidth = this.lineWidth;
  92.                                         ctx.stroke();
  93.                                 }
  94.                         }
  95.                        
  96.                 </script>
  97.         </head>
  98.        
  99.         <body onload=init()>
  100.                 <canvas id="canvas" width="500" height="500" style="border: 1px gray solid"/>
  101.         </body>
  102. </html>
create a new version of this paste RAW Paste Data