View difference between Paste ID: <a href="/yqxbsADc">yqxbsADc</a> and <a href="/Px4gs8aA">Px4gs8aA</a>

<!DOCTYPE html>
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;
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,
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)
189	+	if(yvar < 200)//CHANGED
190	-	yvar++;
190	+	yvar++; //CHANGED
191	-	else
191	+	else //CHANGED
192	-	yvar= 0;
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>