Pong #1: Paddle

by Calumks

HTML

<canvas id="canvas" width="480" height="320"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var x = 1;
var y = 1;
var velocityX = 2;
var velocityY = 2;

draw();

function draw() {
  context.clearRect(0, 0, 480, 320);
  context.fillStyle = "#000000";
  context.fillRect(x, y, 100, 100);

  x+=velocityX;
  y+=velocityY;

  if (y <= 0 || y + 100 >= 320) {velocityY*=-1;}
  if (x <= 0 || x + 100 >= 480) {velocityX*=-1;}

  requestAnimationFrame(draw);
}