Skip to content

Instantly share code, notes, and snippets.

@botrosg

botrosg/Pong.js

Last active August 23, 2017 01:43
Show Gist options
  • Save botrosg/d08424ed429b56fc16ce606a973c6bbc to your computer and use it in GitHub Desktop.
Save botrosg/d08424ed429b56fc16ce606a973c6bbc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Pong.js
var animate = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback) { window.setTimeout(callback, 1000/60) };
var CANVAS_WIDTH = 400;
var CANVAS_HEIGHT = 600;
var PADDLE_HEIGHT = 10;
var PADDLE_WIDTH = 50;
var PADDLE_MAX_SPEED = (PADDLE_WIDTH / 10);
/////////////////////////////////////////////////////////
// CANVAS
/////////////////////////////////////////////////////////
var canvas = document.createElement('canvas');
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;
var context = canvas.getContext('2d');
window.onload = function() {
document.body.appendChild(canvas);
animate(step);
};
var step = function() {
update();
render();
animate(step);
};
var update = function() {
player.update();
computer.update(ball);
ball.update(player.paddle, computer.paddle, canvas);
};
var render = function() {
context.fillStyle = "#488970";
context.fillRect(0, 0, canvas.width, canvas.height);
player.render();
computer.render();
ball.render();
};
/////////////////////////////////////////////////////////
// PADDLES
/////////////////////////////////////////////////////////
function Paddle(x, y, width, height, color) {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.x_speed = 0;
this.y_speed = 0;
this.color = color;
}
Paddle.prototype.render = function() {
context.fillStyle = this.color;
context.fillRect(this.x, this.y, this.width, this.height);
};
Paddle.prototype.move = function(x, y) {
this.x += x;
this.y += y;
this.x_speed = x;
this.y_speed = y;
if(this.x < 0) { // all the way to the left
this.x = 0;
this.x_speed = 0;
} else if (this.x + this.width > canvas.width) { // all the way to the right
this.x = canvas.width - this.width;
this.x_speed = 0;
}
};
/////////////////////////////////////////////////////////
// PLAYER
/////////////////////////////////////////////////////////
function Player() {
this.paddle = new Paddle((canvas.width - PADDLE_WIDTH) / 2, canvas.height - 10 - PADDLE_HEIGHT, PADDLE_WIDTH, PADDLE_HEIGHT, "#0000FF");
}
Player.prototype.render = function() {
this.paddle.render();
};
Player.prototype.update = function() {
for(var key in keysDown) {
var value = Number(key);
if(value == 37) { // left arrow
this.paddle.move(-PADDLE_MAX_SPEED, 0);
} else if (value == 39) { // right arrow
this.paddle.move(PADDLE_MAX_SPEED, 0);
} else {
this.paddle.move(0, 0);
}
}
};
/////////////////////////////////////////////////////////
// COMPUTER
/////////////////////////////////////////////////////////
function Computer() {
this.paddle = new Paddle((canvas.width - PADDLE_WIDTH) / 2, 10, PADDLE_WIDTH, PADDLE_HEIGHT, "#FF0000");
}
Computer.prototype.render = function() {
this.paddle.render();
};
Computer.prototype.update = function(ball) {
var x_pos = ball.x;
var diff = -((this.paddle.x + (this.paddle.width / 2)) - x_pos);
if(diff < 0 && diff < -PADDLE_MAX_SPEED) { // max speed left
diff = -PADDLE_MAX_SPEED;
} else if(diff > 0 && diff > PADDLE_MAX_SPEED) { // max speed right
diff = PADDLE_MAX_SPEED;
}
this.paddle.move(diff, 0);
if(this.paddle.x < 0) {
this.paddle.x = 0;
} else if (this.paddle.x + this.paddle.width > canvas.width) {
this.paddle.x = canvas.width - this.paddle.width;
}
};
/////////////////////////////////////////////////////////
// BALL
/////////////////////////////////////////////////////////
function Ball(x,y) {
this.x = x;
this.y = y;
this.x_initial_speed = 0;
this.y_initial_speed = 3;
this.x_speed = this.x_initial_speed;
this.y_speed = this.y_initial_speed;
this.radius = 5;
this.color = "#000000";
}
Ball.prototype.render = function() {
context.beginPath();
context.arc(this.x, this.y, this.radius, 2 * Math.PI, false);
context.fillStyle = this.color;
context.fill();
}
Ball.prototype.update = function(paddle1, paddle2, canvas) {
this.x += this.x_speed;
this.y += this.y_speed;
var top_x = this.x - 5;
var top_y = this.y - 5;
var bottom_x = this.x + 5;
var bottom_y = this.y + 5;
if(this.x - 5 < 0) { // hitting the left wall
this.x = 5;
this.x_speed = -this.x_speed;
} else if(this.x + 5 > canvas.width) { // hitting the right wall
this.x = canvas.width - this.radius;
this.x_speed = -this.x_speed;
}
if(this.y < 0 || this.y > canvas.height) { // a point was scored
this.x_speed = this.x_initial_speed;
this.y_speed = this.y_initial_speed;
this.x = canvas.width / 2;
this.y = canvas.height / 2;
this.color = "#FFFFFF";
}
if(top_y > canvas.height / 2) {
if(top_y < (paddle1.y + paddle1.height) && bottom_y > paddle1.y && top_x < (paddle1.x + paddle1.width) && bottom_x > paddle1.x) {
// hit the player's paddle
this.y_speed = -3;
this.x_speed += (paddle1.x_speed / 2);
this.y += this.y_speed;
this.color = paddle1.color;
}
} else {
if(top_y < (paddle2.y + paddle2.height) && bottom_y > paddle2.y && top_x < (paddle2.x + paddle2.width) && bottom_x > paddle2.x) {
// hit the computer's paddle
this.y_speed = 3;
this.x_speed += (paddle2.x_speed / 2);
this.y += this.y_speed;
this.color = paddle2.color;
}
}
};
/////////////////////////////////////////////////////////
// CONTROLS
/////////////////////////////////////////////////////////
var keysDown = {};
window.addEventListener("keydown", function(event) {
keysDown[event.keyCode] = true;
});
window.addEventListener("keyup", function(event) {
delete keysDown[event.keyCode];
});
/////////////////////////////////////////////////////////
// VARIABLES
/////////////////////////////////////////////////////////
var ball = new Ball(canvas.width / 2, canvas.height / 2);
var player = new Player();
var computer = new Computer();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment