Added y-movement, y-bouncing, and preliminary 'AI'

custom.js

@@ -1,24 +1,30 @@
 addShortcut(function(){
    toggleFullScreen();   
 },[key.F]);
-
 addShortcut(function(){
-    userDir=-1;    
+    userDir=-1;
+	if(userSpeed<0)
+	{
+		userSpeed=0;
+	}
+	userTimerCount=0;
+	userSpeed-=.25;
 },[key.UP]);
 addRemovalShortcut(function(){
-    userDir=0;    
+    userDir=0;
+	userTimerCount+=0.01;
 },[key.UP]);
 addRemovalShortcut(function(){
     userDir=0;    
 },[key.DOWN]);
 addShortcut(function(){
-    userDir=1;    
-},[key.DOWN]);
-addRemovalShortcut(function(){
-    console.log(1);    
-},[key.DOWN]);
-addShortcut(function(){
-    console.log(2);
+    userDir=1;
+	if(userSpeed>0)
+	{
+		userSpeed=0;
+	}
+	userTimerCount=0;
+	userSpeed+=.25;    
 },[key.DOWN]);
 
 

gameScripts.js

@@ -1,4 +1,5 @@
 var score=0;
+var difficulty=1;
 var isMute = false;
 //var kingAudio = new Audio('King.mp3'), knockAudio = new Audio('Knock.mp3'), matchAudio = new Audio('match.mp3');
 
@@ -12,12 +13,27 @@ var userDir=0;
 var compDir=0;
 var gameSpeed=2;
 
+var userSpeed=0;
+var compSpeed=0;
+var ballSpeed=0;
+var userTimerCount=0;
+var compTimerCount=0;
+
 var userLoc, compLoc, ballXLoc, ballYLoc;
 
-var gameLoop
+var gameLoop;
 
 function newGame()
 {
+	ballDir=1;
+	userDir=0;
+	compDir=0;
+	gameSpeed=2;
+	userSpeed=0;
+	compSpeed=0;
+	ballSpeed=0;
+	userTimerCount=0;
+	compTimerCount=0;
 	canvas = document.getElementById("myCanvas");
 	canvas.width=screen.availWidth*.98;
 	canvas.height=screen.availHeight*.899;
@@ -26,7 +42,7 @@ function newGame()
 	height = canvas.height;
 	userLoc = height*.45-10;
 	compLoc = height*.5-10;
-	ballXLoc = width*.06-10;
+	ballXLoc = width*.45-10;
 	ballYLoc = height*.5-10;
     gameOver = false;
     drawBoard();
@@ -38,6 +54,7 @@ function newGame()
     // isMute = false;
     // multPossible = false;
 //	gameLoop= setInterval(move,5);
+
 	
 }
 function toggleFullScreen() 
@@ -97,17 +114,54 @@ function drawUser()
 function drawComp()
 {
 	ctx.fillStyle = "#000000";
+	compLoc=compLoc+gameSpeed*difficulty/3*compDir;
+	if(compLoc>height*.95-175)
+	{
+		compLoc=height*.95-175;
+	}
+	else if(compLoc<height*.05)
+	{
+		compLoc=height*.05;
+	}
 	ctx.fillRect((width*.02),compLoc,50,175);
 }
 
 function drawBall()
 {
+	if(userTimerCount>0.3)
+	{
+		userSpeed=0;
+	}
+	if(compTimerCount>0.3)
+	{
+		compSpeed=0;
+	}
 	ctx.fillStyle = "#000000";
-	if((ballYLoc-userLoc<=175&&userLoc-ballYLoc<=25&&Math.abs(ballXLoc-(width*.96-10))<3)||(ballYLoc-compLoc<=175&&compLoc-ballYLoc<=25&&Math.abs(ballXLoc-(width*.02+50))<3))
+	if((ballYLoc-userLoc<=175&&userLoc-ballYLoc<=25&&Math.abs(ballXLoc-(width*.96-10))<3))
 	{
 		ballDir*=-1;
+		ballSpeed+=userSpeed;
+		if(ballSpeed*userSpeed>=0)
+		{
+			// ballSpeed*=-1;
+		}
+		console.log(ballSpeed);
+		console.log(ballYLoc+ballSpeed);
 	}
+	else if((ballYLoc-compLoc<=175&&compLoc-ballYLoc<=25&&Math.abs(ballXLoc-(width*.02+50))<3))
+	{
+		ballDir*=-1;
+		ballSpeed+=compSpeed;
+		console.log(ballSpeed);
+	}
+	
+	if(Math.abs(ballYLoc-height*.05)<25||Math.abs(ballYLoc-height*.95)<25)
+	{
+		ballSpeed*=-1;
+	}
+	
 	ballXLoc=ballXLoc + gameSpeed*ballDir;
+	ballYLoc+=ballSpeed;
 	ctx.fillRect(ballXLoc,ballYLoc,25,25);
 	if(ballXLoc>width||ballXLoc<-10)
 	{
@@ -122,7 +176,25 @@ function move()
 	// compDir=0;
 	// gameSpeed=5;
 	//requestAnimationFrame(move);
-	
+	if(ballDir==-1)
+	{
+		moveAI();
+	}
+	else 
+	{
+		compDir=0;
+	}
+}
+function moveAI()
+{
+	if((ballYLoc>compLoc+175/2)&&(compLoc<height*.95-175))
+	{
+		compDir=1;
+	}
+	else if((ballYLoc<compLoc+175/2)&&(compLoc>height*.05-175))
+	{
+		compDir=-1;
+	}
 }
 function mute()
 {

index.html

@@ -7,7 +7,7 @@
     </head>
     <link rel="stylesheet" type="text/css" href="gameStyles.css"/>
 	<center>
-		<canvas id="myCanvas"  style="border:3px solid #98999A;">
+		<canvas id="myCanvas"  style="border:3px solid #98999A;" onclick="toggleFullScreen();">
 			Your browser does not support the HTML5 canvas tag. <br>
 			Try using a more modern browser, like <a href="https://www.google.com/chrome/browser/">Google Chrome</a>,to play the game.
 		</canvas>