Keep the score on screen.

See more:

Javascript

I am making a paddle ball game. Everything works except one thing. The displaying of the score. It seems like the number would just appear than disappear within a flash.


For example:

If you scored a point, you earn one point. The number 1 will appear near the score screen, but then it will disappear.

What I have tried:

This is my code.

var canvas;
var context;
var timer;

var interval = 1000/60;
var player1;
var player2;

var prevX;

var ball; 

var scoreText;

var p1Score = 0;
var p2Score = 0;

document.addEventListener("keydown", press);
document.addEventListener("keyup", release);


canvas = document.getElementById("canvas");
	context = canvas.getContext("2d");	
	
	player1 = new GameObject();
	player1.x = 50
	player1.width = 21
	player1.height = 200
	
	player2 = new GameObject();
	player2.x = 975
	player2.width = 21
	player2.height = 200
	
	ball = new GameObject();
	
	
	ball.vx = 2;
	ball.vy = 2;
		
	timer = setInterval(animate, interval);
	function animate(){
		
		context.clearRect(0,0,canvas.width, canvas.height);
		
		context.fillText( "P1Score:",40, 30);
		context.font = "30px Verdana";
		
		
		context.fillText("P2Score:",830,30);
		context.font = "30px Verdana";
		
		
	if(w)
	{
		console.log("Moving Up");
		player1.y += -5;
		
	}
	if(s)
	{
		console.log("Moving Down");
		player1.y += 5;
		
	}
		if(player1.y > canvas.height - player1.height/2)
		{
		player1.y = canvas.height - player1.height/2
		
		
		}
		if(player1.y < 0 + player1.height/2)
		{
			player1.y = 0 + player1.height/2
			console.log("colliding");
			
		}
		player1.drawRect();
		
		if(up)
		{
			console.log("Moving Up");
			player2.y += -5;
		}
		if(down)
		{
			console.log("Moving Down");
			player2.y += 5;
		}
		if(player2.y > canvas.height - player2.height/2)
		{
		player2.y = canvas.height - player2.height/2
		console.log("colliding");
		}
		//colliding up
		if(player2.y < 0 + player2.height/2)
		{
			player2.y = 0 + player2.height/2
			
		}
		
		
		player2.drawRect();
		
		
		
		ball.move();
	{
		ball.x += ball.vx;
		ball.y += ball.vy;
	}
	
	ball.move();
	if(ball.x > canvas.width - ball.width/2)
	{
		ball.x= canvas.width - ball.width/2
		ball.vx = -ball.vx
		  p1Score += 1;
		  context.fillText( "P1Score:" + p1Score,40, 30);
		alert('YOU GET 1 POINT!!!')//Win screen when ball hits right canvas
		return  ball.x = 500
		
	}
	if(ball.x < 0 + ball.height/2 )
	{
		p2Score += 1;
		context.fillText("P2Score:" + p2Score, 830, 30);
		alert('P2 GETS 1 POINT!!!')//Lose screen when it hits left side of canvas
		return ball.x = 500
		console.log(p2Score);//Adds score by 1
		
	}
	
	if(ball.y > canvas.height - ball.height/2)
	{
		ball.y = canvas.height - ball.height/2
		ball.vy = -ball.vy
		
	}
	if(ball.y < 0 + ball.height/2)
	{
		ball.y = 0 + ball.height/2
		ball.vy = -ball.vy
	}
		
		
	if(ball.hitTestObject(player1)) 
		{
			 ball.x - ball.width/2;
			 ball.vx = -ball.vx;
			
				
		}
		if(ball.hitTestObject(player2))
		{
			ball.x - ball.width/2;
			ball.vx = -ball.vx;
		}
		
		if(ball.hitTestObject(player2))
		{
			//ball hits top
			if(ball.y < player2.y)
			{
				ball.vy = ball.vy
			}
			else if(ball.x < player2.x)
			{
				ball.vx = ball.vx
			}
			else if(ball.y > player2.y)
			{
				ball.vy = -ball.vy
			}
		}
		
		if(ball.hitTestObject(player1))//collision detected
		{
			//ball hits top
			if(ball.y < player1.y)
			{
				ball.vy = -ball.vy
			}
			//ball hits middle
			else if(ball.x < player1.x)
			{
				ball.vx = -ball.vx
			}
			//ball hits bottom
			else if(ball.y > player1.y)
			{
				ball.vy = ball.vy
			}
		}
		
		ball.drawCircle();
		}