Pong accelerometer controls

index.html

gamma(x):<a id='gamma'> </a><sup>o</sup>
<br>
beta(y):<a id='beta'> </a><sup>o</sup>
<br>
alpha(y):<a id='alpha'> </a><sup>o</sup>
<br>
<!-- https://codepen.io/collection/XkEeQP/ -->

pong-accelerometer-controls.markdown

Pong accelerometer controls

A Pen by Landgreen on CodePen.

License.

script.js

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const gravity = {
  x: 0,
  y: 0,
  scale: 0.02
}
const p1 = {
  x: canvas.width/2-canvas.width*0.30/2,
  y: canvas.height - 20,
  h: 4,
  w: canvas.width*0.30,
  Vx: 0,
  color: "#000",
  score: 0
};
const ball = {
  x: 0,
  y: 0,
  r: 5,
  Vx: 0,
  Vy: 0,
  speed: 4,
  color: "#000"
};

function cycle() {
  draw();
  playerMove();
  ballMove();
  paddleBallCollision();
  requestAnimationFrame(cycle);
}
requestAnimationFrame(cycle);

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.fillStyle = p1.color;
  ctx.fillRect(p1.x, p1.y, p1.w, p1.h);

  ctx.beginPath();
  ctx.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI);
  ctx.fillStyle = ball.color;
  ctx.fill();
}


function handleOrientation(event) {
  var x = event.gamma; // In degree in the range [-90,90]
  var y = event.beta; // In degree in the range [-180,180]
  var z = event.alpha; //??
  document.getElementById("gamma").innerHTML = Math.round(x);
  document.getElementById("beta").innerHTML = Math.round(y);
  document.getElementById("alpha").innerHTML = Math.round(z);
  
  gravity.x = event.gamma*gravity.scale
}
window.addEventListener('deviceorientation', handleOrientation);

function playerMove(){
  p1.Vx += gravity.x
  p1.x += p1.Vx
  const resititution = 0.4
  //paddle can't go off edges
  if (p1.x < 0) {
    p1.Vx = -p1.Vx*resititution //bounce off edges
    p1.x = 0
  }

  if (p1.x+p1.w > canvas.width) {
    p1.Vx = -p1.Vx*resititution //bounce off edges
    p1.x = canvas.width - p1.w
  }
}

function resetBall() {
  ball.x = canvas.width/2;
  ball.y = ball.r +10;
  ball.Vy = ball.speed;
  if (Math.random() < 0.5) {
    ball.Vx = ball.speed;
  } else {
    ball.Vx = -ball.speed;
  }
}
resetBall();

function ballMove() {
  // ball.Vx += gravity.x
  ball.x += ball.Vx;
  ball.y += ball.Vy;
  //vertical wall collision
  if (ball.y - ball.r < 0) {
    ball.Vy = Math.abs(ball.Vy);
  }
  if (ball.y + ball.r > canvas.height) {
    ball.Vy = -ball.speed;
    resetBall();
  }
  //horizontal wall collision
  if (ball.x - ball.r < 0) {
    ball.Vx = Math.abs(ball.Vx);
  }
  if (ball.x + ball.r > canvas.width) {
    ball.Vx = -Math.abs(ball.Vx);
  }
}

function paddleBallCollision() {
  if (
    ball.x > p1.x &&
    ball.x < p1.x +p1.w &&
    ball.y + ball.r > p1.y &&
    ball.y + ball.r < p1.y + p1.h + ball.speed 
  ) {
      ball.Vy = -Math.abs(ball.Vy);
  }
}

style.css

body{
  overflow:hidden;

}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
}