rmcdaniel/pong.html

## pong.html

<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body>
<script>
// Pong game variables
var canvas, ctx;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 5;
var ballSpeedY = 5;

var player1Score = 0;
var player2Score = 0;

var player1Y = 250;
var player2Y = 250;

var gameOver = false;

const PADDLE_HEIGHT = 100;
const PADDLE_THICKNESS = 10;

function calcMousePos(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 (gameOver) {
player1Score = 0;
player2Score = 0;
gameOver = false;
}
}

window.onload = function () {
canvas = document.getElementById('gameCanvas');
ctx = canvas.getContext('2d');

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

canvas.addEventListener('mousedown', handleMouseClick);

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

function ballReset() {
ballX = canvas.width / 2;
ballY = canvas.height / 2;
}

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

function moveEverything() {
computerMovement();

ballX += ballSpeedX;
ballY += ballSpeedY;

if (ballX < 0) {
    if (ballY > player1Y && ballY < player1Y + PADDLE_HEIGHT) {
        ballSpeedX = -ballSpeedX;

        var deltaY = ballY - (player1Y + PADDLE_HEIGHT / 2);
        ballSpeedY = deltaY * 0.35;
    } else {
        player2Score++;
        ballReset();
    }
}
if (ballX > canvas.width) {
    if (ballY > player2Y && ballY < player2Y + PADDLE_HEIGHT) {
        ballSpeedX = -ballSpeedX;

        var deltaY = ballY - (player2Y + PADDLE_HEIGHT / 2);
        ballSpeedY = deltaY * 0.35;
    } else {
        player1Score++;
        ballReset();
    }
}
if (ballY < 0) {
    ballSpeedY = -ballSpeedY;
}
if (ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
}

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

function drawEverything() {
// black screen
colorRect(0, 0, canvas.width, canvas.height, 'black');

if (gameOver) {
    ctx.fillStyle = 'white';
    ctx.font = '30px Arial';

    if (player1Score >= WINNING_SCORE) {
        ctx.fillText("Left Player Won!", 350, 200);
    } else if (player2Score >= WINNING_SCORE) {
        ctx.fillText("Right Player Won!", 350, 200);
    }

    ctx.fillText("click to continue", 350, 500);
    return;
}

drawNet();

// left player paddle
colorRect(0, player1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

// right computer paddle
colorRect(canvas.width - PADDLE_THICKNESS, player2Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

// ball
colorCircle(ballX, ballY, 10, 'white');

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

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

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

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

</html>

	<html>

	<head>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.2.1/font/bootstrap-icons.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
	</head>

	<body>
	<script>
	// Pong game variables
	var canvas, ctx;
	var ballX = 50;
	var ballY = 50;
	var ballSpeedX = 5;
	var ballSpeedY = 5;

	var player1Score = 0;
	var player2Score = 0;

	var player1Y = 250;
	var player2Y = 250;

	var gameOver = false;

	const PADDLE_HEIGHT = 100;
	const PADDLE_THICKNESS = 10;

	function calcMousePos(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 (gameOver) {
	player1Score = 0;
	player2Score = 0;
	gameOver = false;
	}
	}

	window.onload = function () {
	canvas = document.getElementById('gameCanvas');
	ctx = canvas.getContext('2d');

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

	canvas.addEventListener('mousedown', handleMouseClick);

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

	function ballReset() {
	ballX = canvas.width / 2;
	ballY = canvas.height / 2;
	}

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

	function moveEverything() {
	computerMovement();

	ballX += ballSpeedX;
	ballY += ballSpeedY;

	if (ballX < 0) {
	if (ballY > player1Y && ballY < player1Y + PADDLE_HEIGHT) {
	ballSpeedX = -ballSpeedX;

	var deltaY = ballY - (player1Y + PADDLE_HEIGHT / 2);
	ballSpeedY = deltaY * 0.35;
	} else {
	player2Score++;
	ballReset();
	}
	}
	if (ballX > canvas.width) {
	if (ballY > player2Y && ballY < player2Y + PADDLE_HEIGHT) {
	ballSpeedX = -ballSpeedX;

	var deltaY = ballY - (player2Y + PADDLE_HEIGHT / 2);
	ballSpeedY = deltaY * 0.35;
	} else {
	player1Score++;
	ballReset();
	}
	}
	if (ballY < 0) {
	ballSpeedY = -ballSpeedY;
	}
	if (ballY > canvas.height) {
	ballSpeedY = -ballSpeedY;
	}
	}

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

	function drawEverything() {
	// black screen
	colorRect(0, 0, canvas.width, canvas.height, 'black');

	if (gameOver) {
	ctx.fillStyle = 'white';
	ctx.font = '30px Arial';

	if (player1Score >= WINNING_SCORE) {
	ctx.fillText("Left Player Won!", 350, 200);
	} else if (player2Score >= WINNING_SCORE) {
	ctx.fillText("Right Player Won!", 350, 200);
	}

	ctx.fillText("click to continue", 350, 500);
	return;
	}

	drawNet();

	// left player paddle
	colorRect(0, player1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

	// right computer paddle
	colorRect(canvas.width - PADDLE_THICKNESS, player2Y, PADDLE_THICKNESS, PADDLE_HEIGHT, 'white');

	// ball
	colorCircle(ballX, ballY, 10, 'white');

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

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

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

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

	</html>