API tools faq
paste
Advertisement
Guest User

bricksmovechanged

a guest
Jan 24th, 2015
176
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.45 KB | None | 0 0
raw download clone embed print report diff
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>Bricks and Ball </title>
  5.     <style type="text/css">
  6.         canvas { border: 3px solid black; }
  7.     </style>
  8.     <script type="text/javascript">
  9.         // Global variable here
  10.         var yvar = 0; //CHANGED
  11.         var x = 150;
  12.         var y = 150;
  13.         var dx = 2;
  14.         var dy = 4;
  15.         var WIDTH=100;
  16.         var HEIGHT=100;
  17.         var ctx;
  18.         var interval =10;
  19.         var canvas;
  20.         var intervalId = 0;
  21.         var rightDown = false;
  22.         var leftDown = false;
  23.         var canvasMinX = 0;
  24.         var canvasMaxX = 300;
  25.         // -- Paddle
  26.         var paddlex;
  27.         var paddleh;
  28.         var paddlew;
  29.         // --- Bricks
  30.         var bricks;
  31.         var NROWS;
  32.         var NCOLS;
  33.         var BRICKWIDTH;
  34.         var BRICKHEIGHT;
  35.         var PADDING;
  36.         // 2 Dimensional Array of Bricks
  37.         // http://www.webreference.com/programming/javascript/diaries/12/index.html
  38.         // javascript arrays
  39.         function initbricks()
  40.         {
  41.             NROWS = 5;
  42.             NCOLS = 5;
  43.             BRICKWIDTH = (WIDTH/NCOLS) - 1; // fill the canvas Width
  44.             BRICKHEIGHT = 15;
  45.             PADDING = 1;
  46. // create array of bricks here
  47.             bricks = new Array(NROWS); // array of row arrays
  48.             for ( i=0; i < NROWS; i++ ) // traverse rows
  49.             {
  50.                 bricks[i] = new Array(NCOLS); // one row array
  51.                 for (j=0; j < NCOLS; j++) // get to a single brick
  52.                 {
  53.                     bricks[i][j] = 1; // if it exists it is 1 (not broken)
  54.                 }
  55.             }
  56.         }
  57.         function reinit()
  58.         {
  59.             x = 150;
  60.             y = 150;
  61.             var dx = 2;
  62.             var dy = 4;
  63.             rightDown = false;
  64.             leftDown = false;
  65.         }
  66.         function init_mouse()
  67.         {
  68. // ************* DOESN't WORK
  69. // canvasMinX = ctx.canvas.offset().left;
  70. // canvasMaxX = ctx.canvasMinX + WIDTH;
  71.         }
  72.         function onMouseMove(evt)
  73.         {
  74.             if ( evt.pageX > canvasMinX && evt.pageX < canvasMaxX )
  75.             {
  76.                 paddlex = evt.pageX - canvasMinX;
  77.             }
  78.         }
  79.         function onKeyDown(evt)
  80.         {
  81.             if (evt.keyCode == 39) rightDown = true;
  82.             else if (evt.keyCode == 37) leftDown = true;
  83.         }
  84.         function onKeyUp(evt)
  85.         {
  86.             if (evt.keyCode == 39) rightDown = false;
  87.             else if (evt.keyCode == 37) leftDown = false;
  88.         }
  89.         function init()
  90.         {
  91.             ctx = document.getElementById('canvas').getContext('2d');
  92.             canvas = document.getElementById('canvas');
  93.             WIDTH = ctx.canvas.width; // not with the canvas 'variable'
  94.             HEIGHT = ctx.canvas.height;
  95.             window.addEventListener('keydown',onKeyDown, true);
  96.             window.addEventListener('keyup',onKeyUp, true);
  97.             window.addEventListener( 'mousemove',onMouseMove,false)
  98.             init_paddle();
  99.             init_mouse();
  100.             initbricks(); // initialize all the bricks to exist
  101.             // call setInterval to request browser to run function every 10 milliseconds
  102.             setInterval( draw, interval );
  103.         }
  104.         function circle(x,y,r)
  105.         {
  106.             ctx.beginPath();
  107.             ctx.arc(x, y, r, 0, Math.PI*2, true);
  108.             ctx.closePath();
  109.             ctx.fill();
  110.         }
  111.         function rect(x,y,w,h)
  112.         {
  113.             ctx.beginPath();
  114.             ctx.rect(x,y,w,h);
  115.             ctx.closePath();
  116.             ctx.fill();
  117.         }
  118.         function clear()
  119.         {
  120.             ctx.clearRect(0, 0, WIDTH, HEIGHT);
  121.         }
  122.         function init_paddle()
  123.         {
  124.             paddlex = WIDTH / 2;
  125.             paddleh = 10;
  126.             paddlew = 75;
  127.         }
  128.         function draw()
  129.         {
  130.             clear();
  131.             circle(x,y,10);
  132. //*** move the paddle if left or right is currently pressed
  133.             if (rightDown) paddlex += 5;
  134.             else if (leftDown) paddlex -= 5;
  135. // paddle
  136.             rect(paddlex, HEIGHT-paddleh, paddlew, paddleh);
  137. //draw bricks
  138.             for ( i=0; i < NROWS; i++ )
  139.             {
  140.                 for ( j=0; j < NCOLS; j++ )
  141.                 {
  142.                     if ( bricks[i][j] == 1 )
  143.                     {
  144.                         rect(
  145.                                         (j * (BRICKWIDTH + PADDING)) + PADDING,
  146.                                         (i * (BRICKHEIGHT + PADDING)) + PADDING + yvar, //CHANGED (added + yvar)
  147.                                 BRICKWIDTH, BRICKHEIGHT );
  148.                     } // if
  149.                 } // for j
  150.             } // for i
  151. //have we HIT a brick?
  152.             rowheight = BRICKHEIGHT + PADDING;
  153.             colwidth = BRICKWIDTH + PADDING;
  154.             row = Math.floor(y/rowheight); // y = 1, y/15 then in column 0
  155.             col = Math.floor(x/colwidth); // x = 1, x/59 then in column 0
  156. // ctx.fillStyle = "blue"; // DEBUGGING
  157. // ctx.font = "bold 16px Arial";
  158. // ctx.fillStyle = "blue";
  159. // ctx.fillText( row + ' x ' + col, 20, 200);
  160. // ctx.fillStyle = "black";
  161. //if so, reverse the ball and mark the brick as broken
  162.             if ( y < NROWS * rowheight // 5 x 15 = 75 y is in the upper
  163. // area where there are briks
  164. // && row >= 0 // and positive (is this ever negative?)
  165. //&& col >= 0 // and positive (si this ever negavive?)
  166.                     && bricks[row][col] == 1) // and it is alive! then remove it!
  167.             {
  168.                 dy = -dy;
  169.                 bricks[row][col] = 0;
  170.             }
  171. // add this for bouncing
  172. // if outside the width canvas, change direction of ball.
  173.             if (x + dx > WIDTH || x + dx < 0)
  174.                 dx = -dx;
  175.             if (y + dy < 0)
  176.                 dy = -dy;
  177.             else if ( y + dy > HEIGHT )
  178.             {
  179.                 if (x > paddlex && x < paddlex + paddlew)
  180.                     dy = -dy;
  181.                 else
  182.                 {
  183. //clearInterval(intervalId);
  184.                 }
  185.             }
  186. // add this for bouncing
  187.             x += dx;
  188.             y += dy;
  189.             if(yvar < 200)//CHANGED
  190.             yvar++; //CHANGED
  191.             else        //CHANGED
  192.             yvar= 0;//CHANGED
  193.         }
  194.     </script>
  195. </head>
  196. <body onload="init()">
  197. <canvas id="canvas" height="300" width="300"> Your browser does not support the canvas element. </canvas>
  198. <button onclick="reinit()">Restart</button>
  199. </body>
  200. </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!