paddle wars


<html>

<center>

<canvas id="gamecanvas" width="800" height="600"></canvas>

	<script>
		var canvas;
		var canvasContext;
		var ballx = 100;
		var bally = 100;
		var paddle_length = 70;
		var paddle_width = 10;
		var ball_speedx = 6;
		var ball_speedy = 5
		var player_y = 100;
		var enemy_y = 100;
		var game_state = 0;
		var timer = 80;
		var max_ball_speed = 17;

		enemy_accuracy = 1

		var player_hits = 0;
		var enemy_hits = 0;

		function enemy() {
			enemy_y = bally * enemy_accuracy;
		}

		function reset_ball() {
			timer = 80;
			enemy_accuracy = 1;
			game_state = 0;
			if (Math.floor(Math.random() * 2) == 1) {
				enemy_accuracy += 0.07;
			}
			else
			{
				enemy_accuracy -= 0.07;
			}
			ballx = canvas.width / 2;
			bally = canvas.height / 2;
			ball_speedy = Math.floor(Math.random() * 7) + 2;
			ball_speedx = -ball_speedx;
			if (Math.floor(Math.random() * 2) == 1) ball_speedy *= -1;

		}

		function mouse_xy(evt) {
			var rect = canvas.getBoundingClientRect();
			var root = document.documentElement;
			var mouseX = evt.clientX - rect.left - root.scrollLeft;
			var mouseY = evt.clientY - rect.top - root.scrollTop;
			return { x:mouseX, y:mouseY };
		}

		window.onload = function() { // onces window finishes loading, run function...

			canvas = document.getElementById("gamecanvas");
			canvasContext = canvas.getContext("2d");

			setInterval(function() {
				motion();
				draw_all()
			}, 17);

			canvas.addEventListener("mousemove", function(evt) {

				var mousepos = mouse_xy(evt);
				player_y = mousepos.y;
			});
		}

		function motion() {

			if (game_state == 0) {
				ballx += ball_speedx;
				bally += ball_speedy;

				if (ballx < 10) {
					if (bally >= player_y - paddle_length / 2 && bally <= player_y + paddle_length / 2) {
						ball_speedx = -ball_speedx;
						if (ball_speedx < max_ball_speed && ball_speedx > -max_ball_speed) { ball_speedx *= 1.05 }

						var deltaY = bally - player_y;
						ball_speedy = deltaY * 0.35;
					}
					else
					{
						if (game_state == 0) enemy_hits += 1;
						game_state = -1;

					}
				}
				if (ballx >= canvas.width - 10) {
					if (bally >= enemy_y - paddle_length / 2 && bally < enemy_y + paddle_length / 2) {
						ball_speedx = -ball_speedx;
						if (ball_speedx < max_ball_speed && ball_speedx > -max_ball_speed) { ball_speedx *= 1.05; }
						var deltaY_enemy = bally - enemy_y;
						ball_speedy = deltaY_enemy * 0.35;
					}
					else
					{
						if (game_state == 0) player_hits += 1;
						game_state = 1;
					}

				}
				if (bally < 10) {
					ball_speedy *= -1;
				}
				if (bally >= canvas.height - 10) {
					ball_speedy *= -1;
				}
				enemy();
				}
			else
			{
				ballx = -24;
				if (timer == 0) {
					reset_ball();

				}
				timer--;
			}
		}

		function draw_all() {
			var bg_color = "black";
			if (game_state == -1) {
				bg_color = "#460000";
			}
			else if (game_state == 1) {
				bg_color = "#001b00";
			}
			Rect(0,0, canvas.width, canvas.height, bg_color);
			Rect(0,(player_y) - (paddle_length / 2), paddle_width,paddle_length, "#66ff99");
			Rect(canvas.width - paddle_width,(enemy_y) - (paddle_length / 2), paddle_width,paddle_length, "#66ff99");
			Circle(ballx, bally, 5, "#66ff99");
		}

		function Rect(x, y, Width, Height, color) {
			canvasContext.fillStyle = color;
			canvasContext.fillRect(x,y, Width, Height);
		}

		function Circle(x, y, radius, color) {
			// The ball
			// Rect(ballx,canvas.height/2 - (10),20,20,"red");
			canvasContext.fillStyle = color;
			canvasContext.beginPath();
			canvasContext.arc(x, y, radius, 0, Math.PI * 2, true);
			canvasContext.fill();

			canvasContext.fillStyle = "white";
			canvasContext.fillText("Player : " + player_hits, 10, 20);
			canvasContext.fillText("Enemy : " + enemy_hits, canvas.width - 60, 20);
		}


	</script>
</center>

</html>