obikag/tennis.html

## tennis.html
<!DOCTYPE html>
    <html>

    <head>
    </head>

    <body>
        <canvas id="gameCanvas" width="800" height="600"></canvas>
        <script>
            var canvas;
            var canvasContext;
            var ballX = 50;
            var ballSpeedX = 10;
            var ballY = 50;
            var ballSpeedY = 4;

            var playerScore = 0;
            var cpuScore = 0;
            const WIN_SCORE = 3;

            var playerPaddleY = 210;
            var cpuPaddleY = 210;

            const PADDLE_WIDTH = 10;
            const PADDLE_HEIGHT = 100;

            var winCondition = false;

            function calmousePos(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
                };
            }

            function handlemouseClick(evt){
                if(winCondition){
                    playerScore = 0;
                    cpuScore = 0;
                    winCondition = false;
                }
            }

            function ballReset(){
                    if (playerScore >= WIN_SCORE ||
                        cpuScore >= WIN_SCORE){
                        winCondition = true;
                    }
                    ballSpeedX = -ballSpeedX;
                    ballX = canvas.width/2;
                    ballY = canvas.height/2;
            };

            window.onload = function(){
                canvas = document.getElementById('gameCanvas');
                canvasContext = canvas.getContext('2d');
                var fps = 30
                setInterval(function() {
                    moveBall();
                    drawObjects();
                }, 1000/fps);
                canvas.addEventListener('mousemove',
                    function(evt){
                        var mousePos = calmousePos(evt);
                        playerPaddleY = mousePos.y-(PADDLE_HEIGHT/2);
                    });
                canvas.addEventListener('mousedown',handlemouseClick);
            }

            function cpuAI(){
                var cpuPaddleCenter = cpuPaddleY + (PADDLE_HEIGHT/2);
                if (cpuPaddleCenter < ballY-35) {
                    cpuPaddleY += 6;
                } else if (cpuPaddleCenter > ballY+35) {
                    cpuPaddleY -= 6;
                }
            }

            function moveBall(){
                if (winCondition){
                    return;
                }

                cpuAI();

                ballX += ballSpeedX;
                ballY += ballSpeedY;
                if (ballX < 20){
                    if(ballY > playerPaddleY &&
                        ballY < playerPaddleY+PADDLE_HEIGHT){
                        ballSpeedX = -ballSpeedX;
                        var deltaY = ballY
                            - (playerPaddleY+PADDLE_HEIGHT/2);
                        ballSpeedY = deltaY * 0.35;
                    } else {
                        cpuScore++;
                        ballReset();
                    }
                }
                if (ballX > canvas.width-20) {
                    if(ballY > cpuPaddleY &&
                        ballY < cpuPaddleY+PADDLE_HEIGHT){
                        ballSpeedX = -ballSpeedX;
                        var deltaY = ballY
                            - (cpuPaddleY+PADDLE_HEIGHT/2);
                        ballSpeedY = deltaY * 0.35;
                    } else {
                        playerScore++;
                        ballReset();
                    }
                }
                if (ballY < 10){
                    ballSpeedY = -ballSpeedY;
                }
                if (ballY > (canvas.height - 10)) {
                    ballSpeedY = -ballSpeedY;
                }
            }

            function drawNet(){
                for(var i=0; i<canvas.height; i+=40){
                    colorRect(canvas.width/2-1,i,2,20,'white');
                }
            }

            function drawObjects(){
                //Space
                colorRect(0,0,canvas.width,canvas.height, 'black');
                if (winCondition){
                    canvasContext.fillStyle = 'white';
                    if (playerScore >= WIN_SCORE) {
                        canvasContext.fillText('PLAYER WINS!!', canvas.width/2, 200);
                    } else {
                        canvasContext.fillText('CPU WINS!!', canvas.width/2, 200);
                    }
                    canvasContext.fillText('Click to continue', canvas.width/2, 400);
                    return;
                }
                //Net
                drawNet();
                //left paddle
                colorRect(0, playerPaddleY, PADDLE_WIDTH, PADDLE_HEIGHT, 'red');
                //right paddle
                colorRect((canvas.width-PADDLE_WIDTH), cpuPaddleY, PADDLE_WIDTH,
                 PADDLE_HEIGHT, 'purple');
                //ball
                colorCircle(ballX, ballY, 10, 'green');
                //scoreboard
                canvasContext.fillStyle='yellow';
                canvasContext.fillText("Score Board", 100, 100);
                canvasContext.fillText(playerScore, 250, 100);
                canvasContext.fillText(cpuScore, canvas.width-250, 100);
            }

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

            function colorRect(leftX, topY, width, height, color){
                canvasContext.fillStyle = color;
                canvasContext.fillRect(leftX, topY, width, height, color);
            }
        </script>
    </body>

    </html>
	<!DOCTYPE html>
	<html>

	<head>
	</head>

	<body>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
	<script>
	var canvas;
	var canvasContext;
	var ballX = 50;
	var ballSpeedX = 10;
	var ballY = 50;
	var ballSpeedY = 4;

	var playerScore = 0;
	var cpuScore = 0;
	const WIN_SCORE = 3;

	var playerPaddleY = 210;
	var cpuPaddleY = 210;

	const PADDLE_WIDTH = 10;
	const PADDLE_HEIGHT = 100;

	var winCondition = false;

	function calmousePos(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
	};
	}

	function handlemouseClick(evt){
	if(winCondition){
	playerScore = 0;
	cpuScore = 0;
	winCondition = false;
	}
	}

	function ballReset(){
	if (playerScore >= WIN_SCORE \|\|
	cpuScore >= WIN_SCORE){
	winCondition = true;
	}
	ballSpeedX = -ballSpeedX;
	ballX = canvas.width/2;
	ballY = canvas.height/2;
	};

	window.onload = function(){
	canvas = document.getElementById('gameCanvas');
	canvasContext = canvas.getContext('2d');
	var fps = 30
	setInterval(function() {
	moveBall();
	drawObjects();
	}, 1000/fps);
	canvas.addEventListener('mousemove',
	function(evt){
	var mousePos = calmousePos(evt);
	playerPaddleY = mousePos.y-(PADDLE_HEIGHT/2);
	});
	canvas.addEventListener('mousedown',handlemouseClick);
	}

	function cpuAI(){
	var cpuPaddleCenter = cpuPaddleY + (PADDLE_HEIGHT/2);
	if (cpuPaddleCenter < ballY-35) {
	cpuPaddleY += 6;
	} else if (cpuPaddleCenter > ballY+35) {
	cpuPaddleY -= 6;
	}
	}

	function moveBall(){
	if (winCondition){
	return;
	}

	cpuAI();

	ballX += ballSpeedX;
	ballY += ballSpeedY;
	if (ballX < 20){
	if(ballY > playerPaddleY &&
	ballY < playerPaddleY+PADDLE_HEIGHT){
	ballSpeedX = -ballSpeedX;
	var deltaY = ballY
	- (playerPaddleY+PADDLE_HEIGHT/2);
	ballSpeedY = deltaY * 0.35;
	} else {
	cpuScore++;
	ballReset();
	}
	}
	if (ballX > canvas.width-20) {
	if(ballY > cpuPaddleY &&
	ballY < cpuPaddleY+PADDLE_HEIGHT){
	ballSpeedX = -ballSpeedX;
	var deltaY = ballY
	- (cpuPaddleY+PADDLE_HEIGHT/2);
	ballSpeedY = deltaY * 0.35;
	} else {
	playerScore++;
	ballReset();
	}
	}
	if (ballY < 10){
	ballSpeedY = -ballSpeedY;
	}
	if (ballY > (canvas.height - 10)) {
	ballSpeedY = -ballSpeedY;
	}
	}

	function drawNet(){
	for(var i=0; i<canvas.height; i+=40){
	colorRect(canvas.width/2-1,i,2,20,'white');
	}
	}

	function drawObjects(){
	//Space
	colorRect(0,0,canvas.width,canvas.height, 'black');
	if (winCondition){
	canvasContext.fillStyle = 'white';
	if (playerScore >= WIN_SCORE) {
	canvasContext.fillText('PLAYER WINS!!', canvas.width/2, 200);
	} else {
	canvasContext.fillText('CPU WINS!!', canvas.width/2, 200);
	}
	canvasContext.fillText('Click to continue', canvas.width/2, 400);
	return;
	}
	//Net
	drawNet();
	//left paddle
	colorRect(0, playerPaddleY, PADDLE_WIDTH, PADDLE_HEIGHT, 'red');
	//right paddle
	colorRect((canvas.width-PADDLE_WIDTH), cpuPaddleY, PADDLE_WIDTH,
	PADDLE_HEIGHT, 'purple');
	//ball
	colorCircle(ballX, ballY, 10, 'green');
	//scoreboard
	canvasContext.fillStyle='yellow';
	canvasContext.fillText("Score Board", 100, 100);
	canvasContext.fillText(playerScore, 250, 100);
	canvasContext.fillText(cpuScore, canvas.width-250, 100);
	}

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

	function colorRect(leftX, topY, width, height, color){
	canvasContext.fillStyle = color;
	canvasContext.fillRect(leftX, topY, width, height, color);
	}
	</script>
	</body>

	</html>