straker/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Basic Pong HTML and JavaScript Game

This is a basic implementation of the Atari Pong game, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration


Score

When a ball goes past a paddle, the other player should score a point. Use context.fillText() to display the score to the screen


Mobile and touchscreen support

Allow the game to be scaled down to a phone size. See https://codepen.io/straker/pen/VazMaL
Support touch controls


Ball trajectory

The ball should change trajectory based on where it hit the paddle. For example, if it hit the topmost part of the paddle it should have a sharp angle upward, whereas if it hit the direct middle of the paddle it should move completely flat towards the other payer.


Important note: I will answer questions about the code but will not add more features or answer questions about adding more features. This series is meant to give a basic outline of the game but nothing more.
License

(CC0 1.0 Universal) You're free to use this game and code in any project, personal or commercial. There's no need to ask permission before using these. Giving attribution is not required, but appreciated.
Other Basic Games


Snake
Breakout
Tetris
Bomberman
Frogger
Missile Command
Sokoban
Doodle Jump
Puzzle Bobble
Helicopter
Block Dude

Support

Basic HTML Games are made possible by users like you. When you become a Patron, you get access to behind the scenes development logs, the ability to vote on which games I work on next, and early access to the next Basic HTML Game.
Top Patrons


Karar Al-Remahy
UnbrandedTech
Innkeeper Games
Nezteb


## pong.html
<!DOCTYPE html>
<html>
<head>
  <title>Basic Pong HTML Game</title>
  <meta charset="UTF-8">
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>
</head>
<body>
<canvas width="750" height="585" id="game"></canvas>
<script>
const canvas = document.getElementById('game');
const context = canvas.getContext('2d');
const grid = 15;
const paddleHeight = grid * 5; // 80
const maxPaddleY = canvas.height - grid - paddleHeight;

var paddleSpeed = 6;
var ballSpeed = 5;

const leftPaddle = {
  // start in the middle of the game on the left side
  x: grid * 2,
  y: canvas.height / 2 - paddleHeight / 2,
  width: grid,
  height: paddleHeight,

  // paddle velocity
  dy: 0
};
const rightPaddle = {
  // start in the middle of the game on the right side
  x: canvas.width - grid * 3,
  y: canvas.height / 2 - paddleHeight / 2,
  width: grid,
  height: paddleHeight,

  // paddle velocity
  dy: 0
};
const ball = {
  // start in the middle of the game
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: grid,
  height: grid,

  // keep track of when need to reset the ball position
  resetting: false,

  // ball velocity (start going to the top-right corner)
  dx: ballSpeed,
  dy: -ballSpeed
};

// check for collision between two objects using axis-aligned bounding box (AABB)
// @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
function collides(obj1, obj2) {
  return obj1.x < obj2.x + obj2.width &&
         obj1.x + obj1.width > obj2.x &&
         obj1.y < obj2.y + obj2.height &&
         obj1.y + obj1.height > obj2.y;
}

// game loop
function loop() {
  requestAnimationFrame(loop);
  context.clearRect(0,0,canvas.width,canvas.height);

  // move paddles by their velocity
  leftPaddle.y += leftPaddle.dy;
  rightPaddle.y += rightPaddle.dy;

  // prevent paddles from going through walls
  if (leftPaddle.y < grid) {
    leftPaddle.y = grid;
  }
  else if (leftPaddle.y > maxPaddleY) {
    leftPaddle.y = maxPaddleY;
  }

  if (rightPaddle.y < grid) {
    rightPaddle.y = grid;
  }
  else if (rightPaddle.y > maxPaddleY) {
    rightPaddle.y = maxPaddleY;
  }

  // draw paddles
  context.fillStyle = 'white';
  context.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
  context.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);

  // move ball by its velocity
  ball.x += ball.dx;
  ball.y += ball.dy;

  // prevent ball from going through walls by changing its velocity
  if (ball.y < grid) {
    ball.y = grid;
    ball.dy *= -1;
  }
  else if (ball.y + grid > canvas.height - grid) {
    ball.y = canvas.height - grid * 2;
    ball.dy *= -1;
  }

  // reset ball if it goes past paddle (but only if we haven't already done so)
  if ( (ball.x < 0 || ball.x > canvas.width) && !ball.resetting) {
    ball.resetting = true;

    // give some time for the player to recover before launching the ball again
    setTimeout(() => {
      ball.resetting = false;
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
    }, 400);
  }

  // check to see if ball collides with paddle. if they do change x velocity
  if (collides(ball, leftPaddle)) {
    ball.dx *= -1;

    // move ball next to the paddle otherwise the collision will happen again
    // in the next frame
    ball.x = leftPaddle.x + leftPaddle.width;
  }
  else if (collides(ball, rightPaddle)) {
    ball.dx *= -1;

    // move ball next to the paddle otherwise the collision will happen again
    // in the next frame
    ball.x = rightPaddle.x - ball.width;
  }

  // draw ball
  context.fillRect(ball.x, ball.y, ball.width, ball.height);

  // draw walls
  context.fillStyle = 'lightgrey';
  context.fillRect(0, 0, canvas.width, grid);
  context.fillRect(0, canvas.height - grid, canvas.width, canvas.height);

  // draw dotted line down the middle
  for (let i = grid; i < canvas.height - grid; i += grid * 2) {
    context.fillRect(canvas.width / 2 - grid / 2, i, grid, grid);
  }
}

// listen to keyboard events to move the paddles
document.addEventListener('keydown', function(e) {

  // up arrow key
  if (e.which === 38) {
    rightPaddle.dy = -paddleSpeed;
  }
  // down arrow key
  else if (e.which === 40) {
    rightPaddle.dy = paddleSpeed;
  }

  // w key
  if (e.which === 87) {
    leftPaddle.dy = -paddleSpeed;
  }
  // a key
  else if (e.which === 83) {
    leftPaddle.dy = paddleSpeed;
  }
});

// listen to keyboard events to stop the paddle if key is released
document.addEventListener('keyup', function(e) {
  if (e.which === 38 || e.which === 40) {
    rightPaddle.dy = 0;
  }

  if (e.which === 83 || e.which === 87) {
    leftPaddle.dy = 0;
  }
});

// start the game
requestAnimationFrame(loop);
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Basic Pong HTML Game</title>
	<meta charset="UTF-8">
	<style>
	html, body {
	height: 100%;
	margin: 0;
	}

	body {
	background: black;
	display: flex;
	align-items: center;
	justify-content: center;
	}
	</style>
	</head>
	<body>
	<canvas width="750" height="585" id="game"></canvas>
	<script>
	const canvas = document.getElementById('game');
	const context = canvas.getContext('2d');
	const grid = 15;
	const paddleHeight = grid * 5; // 80
	const maxPaddleY = canvas.height - grid - paddleHeight;

	var paddleSpeed = 6;
	var ballSpeed = 5;

	const leftPaddle = {
	// start in the middle of the game on the left side
	x: grid * 2,
	y: canvas.height / 2 - paddleHeight / 2,
	width: grid,
	height: paddleHeight,

	// paddle velocity
	dy: 0
	};
	const rightPaddle = {
	// start in the middle of the game on the right side
	x: canvas.width - grid * 3,
	y: canvas.height / 2 - paddleHeight / 2,
	width: grid,
	height: paddleHeight,

	// paddle velocity
	dy: 0
	};
	const ball = {
	// start in the middle of the game
	x: canvas.width / 2,
	y: canvas.height / 2,
	width: grid,
	height: grid,

	// keep track of when need to reset the ball position
	resetting: false,

	// ball velocity (start going to the top-right corner)
	dx: ballSpeed,
	dy: -ballSpeed
	};

	// check for collision between two objects using axis-aligned bounding box (AABB)
	// @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
	function collides(obj1, obj2) {
	return obj1.x < obj2.x + obj2.width &&
	obj1.x + obj1.width > obj2.x &&
	obj1.y < obj2.y + obj2.height &&
	obj1.y + obj1.height > obj2.y;
	}

	// game loop
	function loop() {
	requestAnimationFrame(loop);
	context.clearRect(0,0,canvas.width,canvas.height);

	// move paddles by their velocity
	leftPaddle.y += leftPaddle.dy;
	rightPaddle.y += rightPaddle.dy;

	// prevent paddles from going through walls
	if (leftPaddle.y < grid) {
	leftPaddle.y = grid;
	}
	else if (leftPaddle.y > maxPaddleY) {
	leftPaddle.y = maxPaddleY;
	}

	if (rightPaddle.y < grid) {
	rightPaddle.y = grid;
	}
	else if (rightPaddle.y > maxPaddleY) {
	rightPaddle.y = maxPaddleY;
	}

	// draw paddles
	context.fillStyle = 'white';
	context.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
	context.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);

	// move ball by its velocity
	ball.x += ball.dx;
	ball.y += ball.dy;

	// prevent ball from going through walls by changing its velocity
	if (ball.y < grid) {
	ball.y = grid;
	ball.dy *= -1;
	}
	else if (ball.y + grid > canvas.height - grid) {
	ball.y = canvas.height - grid * 2;
	ball.dy *= -1;
	}

	// reset ball if it goes past paddle (but only if we haven't already done so)
	if ( (ball.x < 0 \|\| ball.x > canvas.width) && !ball.resetting) {
	ball.resetting = true;

	// give some time for the player to recover before launching the ball again
	setTimeout(() => {
	ball.resetting = false;
	ball.x = canvas.width / 2;
	ball.y = canvas.height / 2;
	}, 400);
	}

	// check to see if ball collides with paddle. if they do change x velocity
	if (collides(ball, leftPaddle)) {
	ball.dx *= -1;

	// move ball next to the paddle otherwise the collision will happen again
	// in the next frame
	ball.x = leftPaddle.x + leftPaddle.width;
	}
	else if (collides(ball, rightPaddle)) {
	ball.dx *= -1;

	// move ball next to the paddle otherwise the collision will happen again
	// in the next frame
	ball.x = rightPaddle.x - ball.width;
	}

	// draw ball
	context.fillRect(ball.x, ball.y, ball.width, ball.height);

	// draw walls
	context.fillStyle = 'lightgrey';
	context.fillRect(0, 0, canvas.width, grid);
	context.fillRect(0, canvas.height - grid, canvas.width, canvas.height);

	// draw dotted line down the middle
	for (let i = grid; i < canvas.height - grid; i += grid * 2) {
	context.fillRect(canvas.width / 2 - grid / 2, i, grid, grid);
	}
	}

	// listen to keyboard events to move the paddles
	document.addEventListener('keydown', function(e) {

	// up arrow key
	if (e.which === 38) {
	rightPaddle.dy = -paddleSpeed;
	}
	// down arrow key
	else if (e.which === 40) {
	rightPaddle.dy = paddleSpeed;
	}

	// w key
	if (e.which === 87) {
	leftPaddle.dy = -paddleSpeed;
	}
	// a key
	else if (e.which === 83) {
	leftPaddle.dy = paddleSpeed;
	}
	});

	// listen to keyboard events to stop the paddle if key is released
	document.addEventListener('keyup', function(e) {
	if (e.which === 38 \|\| e.which === 40) {
	rightPaddle.dy = 0;
	}

	if (e.which === 83 \|\| e.which === 87) {
	leftPaddle.dy = 0;
	}
	});

	// start the game
	requestAnimationFrame(loop);
	</script>
	</body>
	</html>