Pong

by Matheus Stein

HTML

<div class="container">
  <p>
  PONG - By. Tedi<br>
  Arrows move
  </p>
  <canvas id="canvas"></canvas>
  <br>
  <span id="button" onClick="start()">
  Start
  </span>
</div>

CSS

body {
  background: #20262e;
  font-family: Consolas, monospace;
  color: #beccdd;
  font-size: 14px;
  margin: 0
}

.container {
  width: 640px;
  margin-left: calc( 50vw - 360px);
  margin-top: 60px;
  margin-bottom: 60px;
  background: #292f36;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.3);
  text-align:center;
}
#canvas {
  border:2px solid #30cbff;
  border-radius:4px;
}
#button {
  display: inline-block;
  padding: 12px 24px;
  background: #30cbff;
  border-radius: 2px;
  color: #20262e;
  margin-top: 24px;
  cursor: pointer;
  transition: all 0.2s;
}

JavaScript

// Declaring variables

canvas = document.getElementById("canvas")
ctx = canvas.getContext('2d');

canvas.width = 640;
canvas.height = 480;

fps = 12

function startVars() {
player_y = [240,240];
player_move = [0,0];
player_speed = 2;
score = [0,0];

ball_pos = [320,240];
ball_vel = [-2,3];
ball_vel_multiplier = 1;
}

startVars()


// Keyboard

document.addEventListener('keydown', function (event) {
	/*if (event.defaultPrevented) {
        return;
    }*/
    
  var key = event.keyCode;
  
  if (key == 38) { // Up Arrow
  	player_move[0]=-1;
  }
  
  if (key == 40) { // Down Arrow
  	player_move[0]=1;
  }
  
  

});

document.addEventListener('keyup', function (event) {
	/*if (event.defaultPrevented) {
        return;
    }*/
    
  var key = event.keyCode;
  
  if (key === 38) { // Up Arrow
  	player_move[0]=0
  }
  
  if (key === 40) { // Down Arrow
  	player_move[0]=0
  }

});


// Step

function step () {

	// Move Player 1
  
  if (player_move[0] == -1 && player_y[0] > 64) {player_y[0]-=player_speed}
  if (player_move[0] == 1 && player_y[0] < 416) {player_y[0]+=player_speed}
  
  // Move Player 2
  
  if (ball_pos[1]<player_y[1]-16 && player_y[1] > 64) {player_y[1]-=player_speed}
  if (ball_pos[1]>player_y[1]+16 && player_y[1] < 416) {player_y[1]+=player_speed}
  
  // Move Ball
  
  ball_pos[0]+=ball_vel[0]*ball_vel_multiplier
  ball_pos[1]+=ball_vel[1]*ball_vel_multiplier
  
  if (ball_pos[1] < 4 && ball_vel[1] < 0) {ball_vel[1]*=-1} // Se encostar no topo, rebate
  if (ball_pos[1] > 476 && ball_vel[1] > 0) {ball_vel[1]*=-1} // Se encostar em baixo, rebate
  
  if (ball_pos[0] < 16) {score[1]+=1;ball_pos[0]=320;ball_pos[1]=240} // Score player 2
  if (ball_pos[0] > 624) {score[0]+=1;ball_pos[0]=320;ball_pos[1]=240} // Score player 1
  
  if (ball_pos[0] < 36 && ball_pos[1] > player_y[0]-64 && ball_pos[1] < player_y[0]+64) { // Touch pl_1
  	var y_dist = ball_pos[1] - player_y[0]; // Dist (max=64)
    ball_vel[1] = (y_dist * 3)/64;
    ball_vel[0] *=-1
   ...