Sunflower
06/04/2024 (Tue) 23:59
Id: 974ed8
[Preview]
No.7975
del
One hour of giving Bing Copilot instructions and testing. Copy this and save it as .html and use arrow keys to control. Testing the limits of the sidepanel chat in Edge as of now.
<!DOCTYPE html>
<html>
<body>
<canvas id="pongCanvas" width="800" height="400" style="background-color:#000"></canvas>
<script>
var canvas = document.getElementById("pongCanvas");
var ctx = canvas.getContext("2d");
var ball = {
x: canvas.width / 2,
y: canvas.height / 2,
dx: 2,
dy: 2,
radius: 10,
speed: 2
};
var playerPaddle = {
width: 15,
height: 80,
x: 0,
y: canvas.height / 2 - 80 / 2,
speed: 4,
dy: 0,
score: 0,
highScore: 0
};
var aiPaddle = {
width: 15,
height: 80,
x: canvas.width - 15,
y: canvas.height / 2 - 80 / 2,
speed: 8,
score: 0,
highScore: 0
};
window.addEventListener('keydown', function(event) {
switch (event.key) {
case 'ArrowUp':
playerPaddle.dy = -playerPaddle.speed;
break;
case 'ArrowDown':
playerPaddle.dy = playerPaddle.speed;
break;
}
});
window.addEventListener('keyup', function(event) {
switch (event.key) {
case 'ArrowUp':
case 'ArrowDown':
playerPaddle.dy = 0;
break;
}
});
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.x += ball.dx * ball.speed;
ball.y += ball.dy * ball.speed;
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.dy *= -1;
}
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI*2);
ctx.fillStyle = "#FF0000";
ctx.fill();
ctx.closePath();
playerPaddle.y += playerPaddle.dy;
if (playerPaddle.y < 0) playerPaddle.y = 0;
if (playerPaddle.y + playerPaddle.height > canvas.height) playerPaddle.y = canvas.height -
playerPaddle.height;
ctx.beginPath();
ctx.rect(playerPaddle.x, playerPaddle.y, playerPaddle.width, playerPaddle.height);
ctx.fillStyle = "#00FF00";
ctx.fill();
ctx.closePath();
if (aiPaddle.y > ball.y && aiPaddle.y > 0) {
aiPaddle.y -= aiPaddle.speed;
} else if (aiPaddle.y + aiPaddle.height < ball.y && aiPaddle.y + aiPaddle.height < canvas.height) {
aiPaddle.y += aiPaddle.speed;
}
ctx.beginPath();
ctx.rect(aiPaddle.x, aiPaddle.y, aiPaddle.width, aiPaddle.height);
ctx.fillStyle = "#0000FF";
ctx.fill();
ctx.closePath();
if (ball.dx > 0 && ball.x + ball.radius > aiPaddle.x && ball.y > aiPaddle.y && ball.y < aiPaddle.y +
aiPaddle.height) {
ball.dx *= -1;
ball.speed *= 1.01;
aiPaddle.score += 1;
if (aiPaddle.score > aiPaddle.highScore) {
aiPaddle.highScore = aiPaddle.score;
}
} else if (ball.dx < 0 && ball.x - ball.radius < playerPaddle.x + playerPaddle.width && ball.y >
playerPaddle.y && ball.y < playerPaddle.y + playerPaddle.height) {
ball.dx *= -1;
ball.speed *= 1.01;
playerPaddle.score += 1;
if (playerPaddle.score > playerPaddle.highScore) {
playerPaddle.highScore = playerPaddle.score;
}
} else if (ball.x + ball.radius > canvas.width) {
resetBall();
} else if (ball.x - ball.radius < 0) {
resetBall();
}
ctx.font = "16px Arial";
ctx.fillStyle = "#FFFFFF";
ctx.fillText("Player Score: " + playerPaddle.score, 8, 20);
ctx.fillText("Player High Score: " + playerPaddle.highScore, 8, 40);
ctx.fillText("AI Score: " + aiPaddle.score, canvas.width - 150, 20);
ctx.fillText("AI High Score: " + aiPaddle.highScore, canvas.width - 150, 40);
requestAnimationFrame(update);
}
function resetBall() {
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.speed = 2;
playerPaddle.score = 0;
aiPaddle.score = 0;
}
update();
</script>
</body>
</html>