index.html

Hello


<canvas id="gc" width="640" height="480"></canvas>

<script>

var cc;
var c;

var player1_y = 40;
var player2_y = 40;
var player_width = 10;
var player_height = 100;

var ball_x = 50;
var ball_y = 50;
var ball_diameter = 5;

var start_x_velocity = 4;
var start_y_velocity = 4;

var velocity_increase = 0.02;

var x_velocity = start_x_velocity;
var y_velocity = start_y_velocity;

var score1 = 0;
var score2 = 0;

var start_ai_speed = 6;
var ai_speed = start_ai_speed;

// Variables used for setting bacground color. You can play around with the numbers to achieve different effects!
var color = [18, 1, 88];
var color_alfa = 0.9;
var color_change = [5, 5, 5];
var color_upper_cutoff = [75, 75, 150];
var color_lower_cutoff = [50, 50, 50];
var color_increase = [true, true, true];
var background_update_speed = 5;
var background_count = 0;

window.onload=function() {
	c = document.getElementById('gc');
	cc = c.getContext('2d');

	setInterval(update, 1000/30);

	console.log("Is this reachable?");

	c.addEventListener('mousemove', function(event) {
		player1_y = event.clientY - player_height / 2;
	});
}

function reset() {
	console.log("Reset!");

	ball_x = c.width / 2;
	ball_y = c.height / 2;

	x_velocity = start_x_velocity;
	y_velocity = start_y_velocity;
	ai_speed = start_ai_speed;

}

function update() {
	if (x_velocity > 0) {
		x_velocity +=  velocity_increase;
	} else {
		x_velocity -=  velocity_increase;
	}
	if (y_velocity > 0) {
		y_velocity +=  velocity_increase;
	} else {
		y_velocity -=  velocity_increase;
	}

	ai_speed += velocity_increase/2;

	ball_x += x_velocity;
	ball_y += y_velocity;

	controlEdgeCollisions();

	updateAI();

	draw();
}


function controlEdgeCollisions() {

	if (ball_y < 0 && y_velocity < 0) {
		y_velocity = -y_velocity;
	}
	else if (ball_y > c.height - ball_diameter && y_velocity > 0) {
		y_velocity = -y_velocity;
	}
	if (ball_x < 0) {
		if (ball_y > player1_y && ball_y < player1_y + player_height) {
			x_velocity = -x_velocity;
			play('hit');
			var delta_y = ball_y - (player1_y + player_height / 2);
			y_velocity = delta_y * 0.3;
		}
		else {
			score2++;
			play('applause');
			reset();
		}
	}
	else if (ball_x > c.width - ball_diameter) {
		if (ball_y > player2_y && ball_y < player2_y + player_height) {
			x_velocity = -x_velocity;
			play('hit');
			var delta_y = ball_y - (player2_y + player_height / 2);
			y_velocity = delta_y * 0.3;
		}
		else {
			score1++;
			play('applause');
			reset();
		}
	}
}

function updateAI() {

	if (player2_y + player_height / 2 < ball_y) {
		player2_y += ai_speed;
	}
	else {
		player2_y -= ai_speed;
	}

}

function draw() {

	setBackgroundColor();
	cc.fillStyle = "rgba(" + color[0] + ", " + color[1] + ", " + color[2] + ", " + color_alfa + ")";
	cc.fillRect(0, 0, c.width, c.height);
	
	cc.fillStyle = 'white';
	cc.fillRect(0, player1_y, player_width, player_height);
	cc.fillRect(c.width - player_width, player2_y, player_width, player_height);

	cc.fillRect(ball_x, ball_y, ball_diameter, ball_diameter);

	cc.font = "30px Arial";
	cc.fillText(score1, 100, 100);
	cc.fillText(score2, c.width - 100, 100);
}

function setBackgroundColor(){
	background_count++;
	if(background_count == background_update_speed){	
		background_count = 0;
		var random = Math.floor(Math.random() * 3); //which color component to change

		//if color_increase is true, increase the component, else decrease it
		color[random] += color_increase[random] ? color_change[random] : - color_change[random] 
		
		//if the color component has reached the upper cutoff, start decreasing, if it reached the lower cutoff, start increasing
		if (color[random] >= color_upper_cutoff[random] && color_increase[random]) { 
			color_increase[random] = false;
		} else if (color[random] <= color_lower_cutoff[random] && ! color_increase[random]) {
			color_increase[random] = true;
		}			
	}
}

var appl = new Audio("sounds/applause.wav");

var snd = [];

for (var i = 0; i < 7; i++) {
	snd.push(new Audio("sounds/hit" + i + ".wav"));
}

function play(s) {
	if (s == 'hit') {
		snd[Math.floor(Math.random()*7)].play();
	} else if (s == 'applause') {
		appl.play()
	}
}



</script>