open_in_new content_copy 
<html>

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

<script>
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 4;

var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 10;

var showingWinScreen = false;

var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;

function calculateMousePos(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() {
        canvas = document.getElementById('gameCanvas');
        canvasContext = canvas.getContext('2d');

        var framesPerSecond = 30;
        setInterval(function() {
                moveEverything();
                drawEverything();
         }, 1000/framesPerSecond );

         canvas.addEventListener('mousemove',
                 function(evt) {
                         var mousePos = calculateMousePos(evt);
                         paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
                 });       
}

function ballReset() {
        if(player1Score >= WINNING_SCORE ||
           player2Score >= WINNING_SCORE) {
                player1Score = 0;
                player2Score = 0;
                showingWinScore = true;
}

        ballSpeedX = -ballSpeedX;
        ballX = canvas.width/2;
        ballY = canvas.height/2;
}

function computerMovement() {
        var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2); 
        if(paddle2YCenter < ballY- 35) {
                paddle2Y += 6;
        } else  if(paddle2YCenter > ballY + 35) {
                paddle2Y -= 6;
        }
}

function moveEverything() {
        if(showingWinScreen) {
                return;
        }
        computerMovement();

        ballX = ballX + ballSpeedX;
        ballY = ballY + ballSpeedY;

        if(ballX < 0) {
                if(ballY > paddle1Y &&
                   ballY < paddle1Y+PADDLE_HEIGHT) {
                        ballSpeedX = -ballSpeedX;
                        
                        var deltaY = ballY
                                -(paddle1Y+PADDLE_HEIGHT/2);
                        ballSpeedY = deltaY * 0.35; 
                } else {
                        player2Score += 1; // must be BEFORE ballReset()
                        ballReset();
                }
        }
        if(ballX > canvas .width) {
                if(ballY > paddle2Y &&
                   ballY < paddle2Y+PADDLE_HEIGHT) {
                        ballSpeedX = -ballSpeedX;
                        var deltaY = ballY
                                -(paddle2Y+PADDLE_HEIGHT/2);
                        ballSpeedY = deltaY * 0.35; 
                } else {
                       player1Score += 1; // must be BEFORE ballReset()
                        ballReset();
                }
        }
        if(ballY < 0) {
                ballSpeedY = -ballSpeedY;
        }
        if(ballY > canvas.height) {
                ballSpeedY = -ballSpeedY;
        }            
}
 
function drawEverything() {
        // next line blanks out the screen with black
        colorRect(0,0,canvas.width,canvas.height,'black');

        if(showingWinScreen) {
                canvasContext.fillStyle = "white";
                canvasContext.fillText("click to continue", 100,100);
                return;
        }

        // this is left player paddle
        colorRect(5,paddle1Y,10,100,'white');

        // this is right computer paddle
        colorRect(785,paddle2Y,
        PADDLE_THICKNESS,PADDLE_HEIGHT, 'white');

        // next line draws the ball
        colorCircle(ballX, ballY, 10, 'white');

        canvasContext.fillText(player1Score, 100,100);
        canvasContext.fillText(player2Score, canvas.width-100,100);
}

function colorCircle(centerX, centerY, radius, drawColor) {
        canvasContext.fillStyle = drawColor;
        canvasContext.beginPath();
        canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
        canvasContext.fill();       
}

function colorRect(leftX,topY, width,height, drawColor) {
        canvasContext.fillStyle = drawColor;
        canvasContext.fillRect(leftX,topY, width,height, drawColor);
}

</script>


</html>