Untitled

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
    	* { padding: 0; margin: 0; }
    	canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
	var canvas = document.getElementById("myCanvas");
	var ctx = canvas.getContext("2d");
	var x = canvas.width/2;
	var y = canvas.height-30;
	var dx = 2;
	var dy = -2;
	var ballRadius = 10;
	var paddleHeight = 10;
	var paddleWidth = 75;
	var paddleX = (canvas.width-paddleWidth)/2;
	var leftPressed = false;
	var rightPressed = false;
//dibujamos la bola
	function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
		drawBall();
		drawBarra();
		x += dx;
	    y += dy;
		if(y + dy < ballRadius) {
		    dy = -dy;
		} else if(y + dy > canvas.height-ballRadius) {
		    if(x > paddleX && x < paddleX + paddleWidth) {
		        dy = -dy;

		    }
		    else {
		        alert("GAME OVER");
		        document.location.reload();
		    }
		}
		if(x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
	    dx = -dx;
		}
if(rightPressed && paddleX < canvas.width-paddleWidth) {
    paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
    paddleX -= 7;
}
	}
	function drawBall(){
	ctx.beginPath();
	ctx.arc(x, y, ballRadius, 0, Math.PI*2);
	ctx.fillStyle = "#0095DD";
	ctx.fill();
	ctx.closePath();
	}
	function drawBarra(){
		ctx.beginPath();
		ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
		ctx.fillStyle = "#FF0000";
		ctx.fill();
		ctx.closePath();
	}
	function keyDownHandler(e) {
	    if(e.key == "Right" || e.key == "ArrowRight") {
	        rightPressed = true;
	    }
	    else if(e.key == "Left" || e.key == "ArrowLeft") {
	        leftPressed = true;
	    }
	}

	function keyUpHandler(e) {
	    if(e.key == "Right" || e.key == "ArrowRight") {
	        rightPressed = false;
	    }
	    else if(e.key == "Left" || e.key == "ArrowLeft") {
	        leftPressed = false;
	    }
	}
	document.addEventListener("keydown", keyDownHandler, false);
	document.addEventListener("keyup", keyUpHandler, false);
	var interval = setInterval(draw,10);
</script>

</body>
</html>