Using Microsoft Copilot to write code
A long time ago, when I was completing my computer science degree, I was learning to code in Ada, Pascal, Prolog and C (malloc anyone?). I never learned JavaScript or HTML.
Microsoft Copilot is able to generate code from user prompts and the foundational model has been trained on millions of lines of code from different languages. I wondered whether Microsoft Copilot could help me learn some of the fundamental programming concepts in a practical way by creating a simple game of Parkpong. Note, I am using Microsoft Copilot, available for free on Bing, and didn't use GitHub Copilot.
You can follow the prompts and code below. If you cut and paste the code into Notepad and place the JavaScript inside the HTML, save as Pong.HTML then you can play Parkpong in your browser too!
Me: I want you to write a simple pong game in JavaScript. I want to move the bat with the arrow keys and I want the ball to bounce around the playing area until I miss it. Make the bat red and the ball black.
Copilot: Certainly! Here’s a simple implementation of a Pong game in JavaScript where you can move the bat with the arrow keys, and the ball will bounce around the playing area until missed. The bat is red, and the ball is black:
JavaScript
// Set up the canvas
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 400;
document.body.appendChild(canvas);
// Game variables
let rightPressed = false;
let leftPressed = false;
const batHeight = 10;
const batWidth = 75;
let batX = (canvas.width - batWidth) / 2;
const ballRadius = 10;
let ballX = canvas.width / 2;
let ballY = canvas.height - 30;
let ballDX = 2;
let ballDY = -2;
// Draw the bat
function drawBat() {
context.beginPath();
context.rect(batX, canvas.height - batHeight, batWidth, batHeight);
context.fillStyle = '#FF0000'; // Red color
context.fill();
context.closePath();
}
// Draw the ball
function drawBall() {
context.beginPath();
context.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
context.fillStyle = '#000000'; // Black color
context.fill();
context.closePath();
}
// Move the bat
function keyDownHandler(e) {
if (e.key === 'Right' || e.key === 'ArrowRight') {
rightPressed = true;
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
leftPressed = true;
}
}
function keyUpHandler(e) {
if (e.key === 'Right' || e.key === 'ArrowRight') {
rightPressed = false;
} else if (e.key === 'Left' || e.key === 'ArrowLeft') {
leftPressed = false;
}
}
document.addEventListener('keydown', keyDownHandler, false);
document.addEventListener('keyup', keyUpHandler, false);
// Update game objects
function update() {
if (rightPressed && batX < canvas.width - batWidth) {
batX += 7;
} else if (leftPressed && batX > 0) {
batX -= 7;
领英推荐
}
ballX += ballDX;
ballY += ballDY;
if (ballX + ballDX > canvas.width - ballRadius || ballX + ballDX < ballRadius) {
ballDX = -ballDX;
}
if (ballY + ballDY < ballRadius) {
ballDY = -ballDY;
} else if (ballY + ballDY > canvas.height - ballRadius) {
if (ballX > batX && ballX < batX + batWidth) {
ballDY = -ballDY;
} else {
// Game over
alert('Game Over');
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
}
}
}
// Draw everything
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBat();
drawBall();
update();
}
// Set up the game loop
const interval = setInterval(draw, 10);
AI-generated code. Review and use carefully. More info on FAQ.
This code sets up a basic Pong game. You can copy and paste it into an HTML file, open it in a web browser, and start playing right away. The bat moves with the arrow keys, and the ball bounces around the screen. If you miss the ball, the game will alert you with a “Game Over” message and then reload the page to restart the game. Enjoy your game!
Me: add the html please
Copilot: Sure, here’s the HTML code to go along with the JavaScript for your Pong game:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Parkpong Game</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<script>
// Paste the JavaScript code here
</script>
</body>
</html>
AI-generated code. Review and use carefully. More info on FAQ.
Just paste the JavaScript code I provided earlier between the <script> tags in the HTML file. This will create a full web page with your Pong game that you can open in any modern web browser. Have fun playing!