<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
// Table tennis game (Pong clone) based on Chris DeLeon free course on udemy
// https://www.udemy.com/code-your-first-game/learn/v4/overview
var canvas;
var canvasContext;
var ballX = 50;
var ballY= 50;
const INITIAL_BALL_SPEED_X = 10;
const INITIAL_BALL_SPEED_Y = 4;
var ballSpeedX = INITIAL_BALL_SPEED_X;
var ballSpeedY = INITIAL_BALL_SPEED_Y;
var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 5;
var showingWinScreen = false;
var paddle1Y= 250;
var paddle2Y= 250;
const PADDLE_THICKNESS = 10;
const PADDLE_HEIGHT = 100;
const PADDLE_OFFSET = 5;
const BALL_RADIUS = 10;
const HALF_PADDLE_MARGIN = 35;
const DELTA_Y_COEFFICIENT = 0.35;
const BACKGROUND_COLOR = 'black';
const PADDLE_COLOR = 'white';
const BALL_COLOR = 'white';
const NET_COLOR = 'white';
const TEXT_COLOR = 'white';
function calculateMousePos(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(showingWinScreen) {
player1Score = 0;
player2Score = 0;
showingWinScreen = false;
}
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
var framesPerSecond = 30;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond);
canvas.addEventListener('mousedown', handleMouseClick);
canvas.addEventListener('mousemove',
function(evt) {
var mousePos = calculateMousePos(evt);
paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
});
}
function ballReset() {
if(player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {
showingWinScreen = true;
}
ballSpeedY = INITIAL_BALL_SPEED_Y;
ballSpeedX = -ballSpeedX;
ballX = canvas.width/2;
ballY = canvas.height/2;
}
function computerMovement() {
var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
if(paddle2YCenter < ballY-HALF_PADDLE_MARGIN) {
paddle2Y += 6;
} else if(paddle2YCenter > ballY+HALF_PADDLE_MARGIN) {
paddle2Y -= 6;
}
}
function moveEverything() {
if (showingWinScreen) {
return;
}
computerMovement();
ballX += ballSpeedX;
ballY += ballSpeedY;
// Left Player wall/paddle collision test
if(ballX -BALL_RADIUS < PADDLE_OFFSET + PADDLE_THICKNESS) {
if(ballY > paddle1Y && ballY < paddle1Y + PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
var deltaY = ballY-(paddle1Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * DELTA_Y_COEFFICIENT;
} else {
player2Score++; //must be BEFORE ballReset()
ballReset();
}
}
// Right Player wall/paddle collision test
if(ballX + BALL_RADIUS> canvas.width - PADDLE_OFFSET - PADDLE_THICKNESS) {
if(ballY > paddle2Y && ballY < paddle2Y + PADDLE_HEIGHT) {
ballSpeedX = -ballSpeedX;
var deltaY = ballY-(paddle2Y+PADDLE_HEIGHT/2);
ballSpeedY = deltaY * DELTA_Y_COEFFICIENT;
} else {
player1Score++; //must be BEFORE ballReset()
ballReset();
}
}
// Top wall ball collision test
if(ballY < BALL_RADIUS) {
ballSpeedY = -ballSpeedY;
}
// Bottom wall ball collision test
if(ballY > canvas.height - BALL_RADIUS) {
ballSpeedY = -ballSpeedY;
}
}
function drawNet() {
for(var i = 0; i < canvas.height; i += 40) {
colorRect(canvas.width/2 - 1, i, 2, 20,NET_COLOR);
}
}
function drawEverything() {
// black background
colorRect(0, 0, canvas.width, canvas.height, BACKGROUND_COLOR);
if (showingWinScreen) {
canvasContext.fillStyle = TEXT_COLOR;
if(player1Score >= WINNING_SCORE) {
canvasContext.fillText("Left Player Won!", 350, 200);
} else if(player2Score >= WINNING_SCORE) {
canvasContext.fillText("Right Player Won!", 350, 200);
}
canvasContext.fillText("click to continue", 350, 500);
return;
}
drawNet();
//left player paddle
colorRect(PADDLE_OFFSET, paddle1Y, PADDLE_THICKNESS, PADDLE_HEIGHT, PADDLE_COLOR);
//right computer paddle
colorRect(canvas.width-PADDLE_THICKNESS-PADDLE_OFFSET, paddle2Y, PADDLE_THICKNESS, PADDLE_HEIGHT, PADDLE_COLOR);
//ball
colorCircle(ballX, ballY, BALL_RADIUS, BALL_COLOR);
canvasContext.fillText(player1Score, 100, 100);
canvasContext.fillText(player2Score, canvas.width - 100, 100);
}
function colorCircle(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
canvasContext.fill();
}
function colorRect(leftX, topY, width, height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX, topY, width, height);
}
</script>
</html>
Table tennis game (Pong clone) based on Chris DeLeon free course on udemy
You can follow the free course at https://www.udemy.com/code-your-first-game/learn/v4/overview
You can follow the free course at https://www.udemy.com/code-your-first-game/learn/v4/overview
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.