"pong"

HTML

<body onload="start()" onkeydown="move(event)">
<canvas id="canvas" height=500 width=500></canvas>
</body>

<script>
var canvas, plane;
var x = 0, y = 0, size = 100, xChange = 2, yChange = 2, paddleX = 0, height = 20, width = 150, arcsize = 20;
var playing =  true;

	function start() {
		canvas = document.getElementById("canvas");
		plane = canvas.getContext("2d");
		paddleX = (canvas.width - width) / 2;
		setInterval("animate()", 1000/60);
	}

	function drawPaddle() {
		plane.fillStyle = "yellow";
		plane.fillRect(paddleX, canvas.height - height, width, height);
	}

	function animate() {
		if(playing) {
		plane.clearRect(0, 0, canvas.width, canvas.height);
		plane.fillStyle = "red";
		plane.beginPath();
		plane.arc(x, y, arcsize, 0, Math.PI*2);
		plane.fill();
		plane.closePath();

		x += xChange;
		y += yChange;

		var collided = false;
		if (x < 0) {
			x = 0;
			xChange = -xChange;
			collided = true;
		}
		else if (x + size > canvas.width) {
			x = canvas.width - size;
			xChange = -xChange;
			collided = true;
		}
		if (y < 0) {
			y = 0;
			yChange = - yChange;
			collided = true;
		}
		if(y > (canvas.height - height - size)) {
			if (x + size > paddleX && x < paddleX + width) {
				yChange = -yChange;
			}
			else {
				if (y + size >= canvas.height) {
					playing = false;
				alert("Wow ur bad at atari breakout");
				document.location.reload();}
			}
		}

		if(collided) {
			var sounds = new Audio("mp3file.mp3");
			sounds.play();
		}
		drawPaddle();
		}
	}

	function move(event) {
		var key = event.which;
		if(key == 65) {
			paddleX -= 5;
		}
		else if (key == 68) {
			paddleX += 5;
		}
	}
</script>

CSS

canvas {
	background-color: black;
  }