rmcdaniel · January 2, 2023 21:49
diff --git a/pong.html b/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/[email protected]/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/[email protected]/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>