evanjmg/chatgp4pong.html

## chatgp4pong.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // Create a canvas element
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        canvas.width = 600;
        canvas.height = 400;
        document.body.appendChild(canvas);

        // Define some constants
        var PADDLE_WIDTH = 10;
        var PADDLE_HEIGHT = 80;
        var BALL_RADIUS = 10;
        var BALL_SPEED = 5;
        var PADDLE_SPEED = 5;

        // Define some variables
        var ballX = canvas.width / 2; // Ball x position
        var ballY = canvas.height / 2; // Ball y position
        var ballVX = BALL_SPEED; // Ball x velocity
        var ballVY = BALL_SPEED; // Ball y velocity

        var paddle1Y = canvas.height / 2 - PADDLE_HEIGHT / 2; // Left paddle y position
        var paddle2Y = canvas.height / 2 - PADDLE_HEIGHT / 2; // Right paddle y position

        var score1 = 0; // Left player score
        var score2 = 0; // Right player score

        // Define some functions
        function draw() {
            // Clear the canvas
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw the ball
            ctx.fillStyle = "white";
            ctx.beginPath();
            ctx.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2);
            ctx.fill();

            // Draw the paddles
            ctx.fillStyle = "white";
            ctx.fillRect(0, paddle1Y, PADDLE_WIDTH, PADDLE_HEIGHT);
            ctx.fillRect(canvas.width - PADDLE_WIDTH, paddle2Y, PADDLE_WIDTH, PADDLE_HEIGHT);

            // Draw the scores
            ctx.font = "32px Arial";
            ctx.textAlign = "center";
            ctx.fillText(score1, canvas.width / 4, 50);
            ctx.fillText(score2, canvas.width * 3 / 4, 50);
        }

        function update() {
            // Move the ball
            ballX += ballVX;
            ballY += ballVY;

            // Bounce the ball off the top and bottom edges
            if (ballY < BALL_RADIUS || ballY > canvas.height - BALL_RADIUS) {
                ballVY *= -1;
            }

            // Check if the ball hits the left or right edge
            if (ballX < BALL_RADIUS) {
                // The right player scores
                score2++;
                resetBall();
            } else if (ballX > canvas.width - BALL_RADIUS) {
                // The left player scores
                score1++;
                resetBall();
            }

            // Check if the ball hits the paddles
            if (ballX < PADDLE_WIDTH + BALL_RADIUS &&
                ballY > paddle1Y &&
                ballY < paddle1Y + PADDLE_HEIGHT) {
                // The left paddle deflects the balL
                ballVX *= -1;
                var dy = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
                ballVy = dy * 0.3;// Change the angle based on where it hits
            } else if (ballX > canvas.width - (PADDLE_WIDTH + BALL_RADIUS) &&
                ballY > paddle2Y &&
                ballY < paddle1Y + PADDLE_HEIGHT) {
                // The right paddle deflects the balL
                ballVX *= -1;
                var dy = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
                ballVy = dy * 0.3;// Change the angle based on where it hits
            }
            handleInput();
        }

        function resetBall() {
            // Reset the balL to the center and randomize its direction
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballVX = Math.random() < 0.5 ? -BALL_SPEED : BALL_SPEED;// Random sign
            ballVy = Math.random() < 0.5 ? -BALL_SPEED : BALL_SPEED;// Random sign
        }

        function handleInput() {
            // Get user input from keyboard
            if (keyIsDown(87)) {// W key
                paddle2Y -= PADDLE_SPEED;// Move left paddle up
                if (paddle2Y < 0) { paddle2Y = 0 }// Keep it within bounds
            } else if (keyIsDown(83)) {// S key

                paddle1Y += PADDLE_SPEED; // Move left paddle down
                if (paddle1Y > canvas.height - PADDLE_HEIGHT) { paddle1Y = canvas.height - PADDLE_HEIGHT } // Keep it within bounds
            }
            if (keyIsDown(38)) { // Up arrow key
                paddle2Y -= PADDLE_SPEED; // Move right paddle up
                if (paddle2Y < 0) { paddle2Y = 0 } // Keep it within bounds
            } else if (keyIsDown(40)) { // Down arrow key
                paddle2Y += PADDLE_SPEED; // Move right paddle down
                if (paddle2Y > canvas.height - PADDLE_HEIGHT) { paddle2Y = canvas.height - PADDLE_HEIGHT } // Keep it within bounds
            }
        }

        function keyIsDown(keyCode) {
            // Check if a key is pressed
            return window.pressedKeys[keyCode];
        }

        function handleKeyDown(event) {
            // Set the pressed key to true
            window.pressedKeys[event.keyCode] = true;
        }

        function handleKeyUp(event) {
            // Set the pressed key to false
            window.pressedKeys[event.keyCode] = false;
        }

        // Initialize the pressed keys array
        window.pressedKeys = [];

        // Add event listeners for keyboard input
        window.addEventListener("keydown", handleKeyDown);
        window.addEventListener("keyup", handleKeyUp);

        // Start the game loop
        setInterval(function () {
            update();
            draw();
        }, 1000 / 60); // 60 frames per second

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<script>

	// Create a canvas element
	var canvas = document.createElement("canvas");
	var ctx = canvas.getContext("2d");
	canvas.width = 600;
	canvas.height = 400;
	document.body.appendChild(canvas);

	// Define some constants
	var PADDLE_WIDTH = 10;
	var PADDLE_HEIGHT = 80;
	var BALL_RADIUS = 10;
	var BALL_SPEED = 5;
	var PADDLE_SPEED = 5;

	// Define some variables
	var ballX = canvas.width / 2; // Ball x position
	var ballY = canvas.height / 2; // Ball y position
	var ballVX = BALL_SPEED; // Ball x velocity
	var ballVY = BALL_SPEED; // Ball y velocity

	var paddle1Y = canvas.height / 2 - PADDLE_HEIGHT / 2; // Left paddle y position
	var paddle2Y = canvas.height / 2 - PADDLE_HEIGHT / 2; // Right paddle y position

	var score1 = 0; // Left player score
	var score2 = 0; // Right player score

	// Define some functions
	function draw() {
	// Clear the canvas
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	// Draw the ball
	ctx.fillStyle = "white";
	ctx.beginPath();
	ctx.arc(ballX, ballY, BALL_RADIUS, 0, Math.PI * 2);
	ctx.fill();

	// Draw the paddles
	ctx.fillStyle = "white";
	ctx.fillRect(0, paddle1Y, PADDLE_WIDTH, PADDLE_HEIGHT);
	ctx.fillRect(canvas.width - PADDLE_WIDTH, paddle2Y, PADDLE_WIDTH, PADDLE_HEIGHT);

	// Draw the scores
	ctx.font = "32px Arial";
	ctx.textAlign = "center";
	ctx.fillText(score1, canvas.width / 4, 50);
	ctx.fillText(score2, canvas.width * 3 / 4, 50);
	}

	function update() {
	// Move the ball
	ballX += ballVX;
	ballY += ballVY;

	// Bounce the ball off the top and bottom edges
	if (ballY < BALL_RADIUS \|\| ballY > canvas.height - BALL_RADIUS) {
	ballVY *= -1;
	}

	// Check if the ball hits the left or right edge
	if (ballX < BALL_RADIUS) {
	// The right player scores
	score2++;
	resetBall();
	} else if (ballX > canvas.width - BALL_RADIUS) {
	// The left player scores
	score1++;
	resetBall();
	}

	// Check if the ball hits the paddles
	if (ballX < PADDLE_WIDTH + BALL_RADIUS &&
	ballY > paddle1Y &&
	ballY < paddle1Y + PADDLE_HEIGHT) {
	// The left paddle deflects the balL
	ballVX *= -1;
	var dy = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
	ballVy = dy * 0.3;// Change the angle based on where it hits
	} else if (ballX > canvas.width - (PADDLE_WIDTH + BALL_RADIUS) &&
	ballY > paddle2Y &&
	ballY < paddle1Y + PADDLE_HEIGHT) {
	// The right paddle deflects the balL
	ballVX *= -1;
	var dy = ballY - (paddle1Y + PADDLE_HEIGHT / 2);
	ballVy = dy * 0.3;// Change the angle based on where it hits
	}
	handleInput();
	}

	function resetBall() {
	// Reset the balL to the center and randomize its direction
	ballX = canvas.width / 2;
	ballY = canvas.height / 2;
	ballVX = Math.random() < 0.5 ? -BALL_SPEED : BALL_SPEED;// Random sign
	ballVy = Math.random() < 0.5 ? -BALL_SPEED : BALL_SPEED;// Random sign
	}

	function handleInput() {
	// Get user input from keyboard
	if (keyIsDown(87)) {// W key
	paddle2Y -= PADDLE_SPEED;// Move left paddle up
	if (paddle2Y < 0) { paddle2Y = 0 }// Keep it within bounds
	} else if (keyIsDown(83)) {// S key

	paddle1Y += PADDLE_SPEED; // Move left paddle down
	if (paddle1Y > canvas.height - PADDLE_HEIGHT) { paddle1Y = canvas.height - PADDLE_HEIGHT } // Keep it within bounds
	}
	if (keyIsDown(38)) { // Up arrow key
	paddle2Y -= PADDLE_SPEED; // Move right paddle up
	if (paddle2Y < 0) { paddle2Y = 0 } // Keep it within bounds
	} else if (keyIsDown(40)) { // Down arrow key
	paddle2Y += PADDLE_SPEED; // Move right paddle down
	if (paddle2Y > canvas.height - PADDLE_HEIGHT) { paddle2Y = canvas.height - PADDLE_HEIGHT } // Keep it within bounds
	}
	}

	function keyIsDown(keyCode) {
	// Check if a key is pressed
	return window.pressedKeys[keyCode];
	}

	function handleKeyDown(event) {
	// Set the pressed key to true
	window.pressedKeys[event.keyCode] = true;
	}

	function handleKeyUp(event) {
	// Set the pressed key to false
	window.pressedKeys[event.keyCode] = false;
	}

	// Initialize the pressed keys array
	window.pressedKeys = [];

	// Add event listeners for keyboard input
	window.addEventListener("keydown", handleKeyDown);
	window.addEventListener("keyup", handleKeyUp);

	// Start the game loop
	setInterval(function () {
	update();
	draw();
	}, 1000 / 60); // 60 frames per second

	</script>
	</body>

	</html>