<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="raf.js"></script> <script type="text/javascript" src="Paddle.js"></script> <script type="text/javascript" src="ball.js"></script>				 <script> 	var paddle; 	var ball; 	var brick; 	var ctx; 	var canvas; 	var WIDTH; 	var HEIGHT; 	var rightDown = false, leftDown =  false; 	var ballNum = 3; 		 	function init() { 		canvas = document.getElementById("canvas");				 		canvas.bgcolor 		ctx = canvas.getContext("2d"); 		 		WIDTH = canvas.width; 		HEIGHT = canvas.height; 		 		ctx.fillStyle = '#000000'; 		ctx.fillRect(0,0, WIDTH, HEIGHT); 		 		console.log("hello"); 		paddle = new Paddle(8, 100); 		paddle.x = 300; 		paddle.y = 595; 		 		ball = new Ball(3, "#FFFFFF"); 		ball.x = 100; 		ball.y = 100; 		 		brick = new Paddle(5, 50); 		brick.x = 50; 		brick.y = 50; 		 		paddle.draw(ctx); 		ball.draw(ctx); 		brick.draw(ctx); 		loop(); 	} 	 	function startGame() { 		ctx.clearRect(0, 0, WIDTH, HEIGHT); 		//start position of ball  		ball.x += ball.dx; 		//randomising velocity of ball  	} 	 	 	function loop() { 		ctx.fillStyle = '#000000'; 		ctx.fillRect(0,0, WIDTH, HEIGHT); 		//setting fonts up 		ctx. fillStyle = ("#ffcccc"); 		ctx.font=("30px Arial"); 		ctx.fillText("Breakout", 300, 30); 		 		ctx. fillStyle = ("#ffcccc"); 		ctx.font=("15px Arial"); 		ctx.fillText("Lives:", 50, 30); 		 	requestAnimationFrame(loop); 		 		//moving the paddle 		if(rightDown==true){ 			paddle.x += paddle.dx; 			 		} 		if(leftDown == true){ 			paddle.x -= paddle.dx; 			 		} 		 		//collision detection for the boundary 		 		//check if ball is between the paddle x and paddle.x  + width	 		if(ball.x +ball.dx > WIDTH || ball.x <0){ 			ball.dx *=-1; 			 		} 		if(ball.y <0){ 			ball.dy *= -1; 			 		} 		else if(ball.y + ball.dy > HEIGHT){ 			if((ball.x > paddle.x) && (ball.x < (paddle.x +paddle.width))){ 				ball.dy = -ball.dy; 			} 		} 		//if so reverse the ball.dy	 				//console.log("ball x: " + ball.x);  				//console.log("paddle x: " + paddle.x); 				//console.log("paddle x+ width: " + (paddle.x + paddle.width)); 		 		//otherwise 			//game over, so stop the animation 			//decrease ballNums 			//restart the Game       		//	console.log("ball.x outside paddle x"); 			paddle.draw(ctx); 		   		//update the ball position by adding dx and dy to x and y of ball 		ball.x +=ball.dx; 		ball.y +=ball.dy; 		//draw paddles and draw ball 		paddle.draw(ctx); 		ball.draw(ctx); 	} 	 	//set rightDown or leftDown if the right or left keys are down 	function onKeyDown(evt) { 	  if (evt.keyCode == 39) rightDown = true; 	  else if (evt.keyCode == 37) leftDown = true; 	  console.log(rightDown, leftDown); 	} 	 	//and unset them when the right or left key is released 	function onKeyUp(evt) { 	  if (evt.keyCode == 39) rightDown = false; 	  else if (evt.keyCode == 37) leftDown = false; 	} 		 </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Breakout</title> </head>  <body onload="init()" onkeydown="onKeyDown(event)" onkeyup="onKeyUp(event)"> 	<canvas id="canvas" width="800" height="600" style="border:1px solid #d3d3d3 bgcolor ;"> 			Canvas is not supported 	</canvas> </body> </html>