Pong Challenge
- Delta Boukensha
- Jan 9, 2020
- 1 min read
Here is a programming challenge for you. Create a pong game on the web. Perfect for beginners. Pong is one of the most classic and first interactive games ever made on a computer. The game is quite simple the player tries to bounce the ball over to the other side while the AI bounces it back.
Classic Pong Game
Here is a small template to get you started. I suggest you start by letting two AI players play against each other.
index.html
<pre class="wp-block-syntaxhighlighter-code"><html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<canvas id="myCanvas" width="900" height="600"></canvas>
<a href="http://index.js">http://index.js</a>
</body>
</html>
</pre>
index.js
const canvas = document.getElementById("myCanvas");
const g = canvas.getContext("2d");
let oldTime;
const playerA = {
x: 100,
y: 100,
};
const playerB = {
x: 600,
y: 100,
};
const ball = {
x: 300,
y: 200,
};
const drawPlayerA = () => {
g.fillStyle = "#000000";
g.fillRect(playerA.x, playerA.y, 20, 120);
};
const drawPlayerB = () => {
g.fillStyle = "#000000";
g.fillRect(playerB.x, playerB.y, 20, 120);
};
const drawBall = () => {
g.fillStyle = "#000000";
g.fillRect(ball.x, ball.y, 10, 10);
};
const clearFrame = () => {
g.fillStyle = "#FFFFFF";
g.fillRect(0, 0, 900, 600);
};
const gameLoop = (newTime) => {
const deltaTime = newTime - oldTime;
// console.log(deltaTime);
clearFrame();
drawPlayerA();
drawPlayerB();
drawBall();
oldTime = newTime;
window.requestAnimationFrame(gameLoop);
};
window.requestAnimationFrame(gameLoop);
index.css
html,
body {
padding: 0;
margin: 0;
}
Good Luck and try to have fun while making it. Make it look like it is yours.
Kommentare