Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
185 lines (149 sloc) 4.61 KB
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 4;
const PADDLE_HEIGHT = 100;
const PADDLE_WIDTH = 10;
var paddle1Y = 250;
var paddle2Y = 250;
var player1Score = 0;
var player2Score = 0;
const WINNING_SCORE = 3;
var showingWinScreen = false;
function calculateMousePosition(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('mousemove',
function(evt) {
var mousePos = calculateMousePosition(evt);
paddle1Y = mousePos.y - PADDLE_HEIGHT/2;
});
canvas.addEventListener('mousedown', handleMouseClick);
}
function ballReset() {
if (player1Score >= WINNING_SCORE
|| player2Score >= WINNING_SCORE) {
showingWinScreen = true;
}
ballX = canvas.width / 2;
ballY = canvas.height / 2;
ballSpeedX = -ballSpeedX;
}
function computerMovement() {
var paddle2YCenter = paddle2Y + PADDLE_HEIGHT/2;
if (paddle2YCenter < ballY - 35) {
paddle2Y += 6;
} else if (paddle2YCenter > ballY + 35) {
paddle2Y -= 6;
}
}
function moveEverything() {
if (showingWinScreen) {
return;
}
computerMovement();
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if (ballX < 0) {
if (ballY > paddle1Y
&& ballY < paddle1Y + PADDLE_HEIGHT) {
// the paddle hit the ball
ballSpeedX = -ballSpeedX;
// affect direction and speed depending on the part of the paddle
var deltaY = ballY - (paddle1Y + PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35;
} else {
player2Score++; // update score before reset
ballReset();
}
}
if (ballX > canvas.width) {
if (ballY > paddle2Y
&& ballY < paddle2Y + PADDLE_HEIGHT) {
// the paddle hit the ball
ballSpeedX = -ballSpeedX;
// affect direction and speed depending on the part of the paddle
var deltaY = ballY - (paddle2Y + PADDLE_HEIGHT/2);
ballSpeedY = deltaY * 0.35;
} else {
player1Score++; // update score before reset
ballReset();
}
}
if (ballY < 0) {
ballSpeedY = -ballSpeedY;
}
if (ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
}
function drawNet() {
for (var i = 0; i < canvas.height; i+=40) {
colorRect(canvas.width/2-2, i, 4, 20, 'white');
}
}
function drawEverything() {
// screen background
colorRect(0,0,canvas.width,canvas.height,'black');
if (showingWinScreen) {
canvasContext.fillStyle = 'white';
canvasContext.font = "20px monospace";
if (player1Score >= WINNING_SCORE) {
canvasContext.fillText("Left player won!", 300, 200);
}
if (player2Score >= WINNING_SCORE) {
canvasContext.fillText("Right player won!", 300, 200);
}
canvasContext.fillText("click to continue", 300, 500);
return;
}
drawNet();
// player paddle
colorRect(0,paddle1Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');
// computer paddle
colorRect(canvas.width-PADDLE_WIDTH,paddle2Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');
// ball
colorCircle(ballX, ballY, 10, 'white');
canvasContext.font = "40px monospace";
canvasContext.fillText(player1Score, 100, 100);
canvasContext.fillText(player2Score, canvas.width-100, 100);
}
function colorRect(leftX, topY, width, height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX, topY, width, height);
}
function colorCircle(centerX, centerY, radius, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0, Math.PI*2, true);
canvasContext.fill();
}
</script>
</html>
You can’t perform that action at this time.