Pong

In this example below you will see how to do a Pong with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by watsonlawren02, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright watsonlawren02 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Pong </title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>

<head>
  <title> Pong </title>
</head>

<body>
  <div id="pongTable">
    <div style="float: right; width: 50%; height: 100%; border-left: 2px dashed #DDD;"> </div>
  </div>
  <div id="playerOne" style="left: 45px; top: 146px"> </div>
  <div id="playerTwo" style="left: 390px; top: 146px"> </div>
  <div id="ball" style="left: 210px; top: 160px"> </div>
  <div id="click">click to continue</div>
  <div id="scores">
    <span style="float: left;" id="oneScore">0</span>
    <span style="float: right;" id="twoScore">0</span>
  </div>
</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/watsonlawren02/pong-bBdyem */
body {
  background-image: url(https://s13.postimg.org/siyho8miv/images.jpg);
}

#pongTable {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 400px;
  height: 300px;
  border: 4px solid #CCC;
  background-color: #F3F3F3;
  z-index: 1;
}

#playerOne {
  position: absolute;
  top: 196px;
  left: 45px;
  width: 10px;
  height: 35px;
  background-color: #777;
  z-index: 2;
}

#playerTwo {
  position: absolute;
  top: 196px;
  left: 390px;
  width: 10px;
  height: 35px;
  background-color: #777;
  z-index: 2;
}

#ball {
  position: absolute;
  top: 160px;
  left: 210px;
  width: 7px;
  height: 7px;
  clip: rect(0px 7px 7px 0px);
  background-color: #555;
  z-index: 2;
  display: none;
}

#click {
  position: absolute;
  top: 160px;
  left: 27px;
  width: 400px;
  text-align: center;
  font-family: Tahoma;
  font-size: 10px;
  z-index: 3;
}

#scores {
  position: absolute;
  top: 330px;
  left: 24px;
  width: 400px;
  font-family: Tahoma;
  font-size: 11px;
  z-index: 3;
}

</style>

/*Downloaded from https://www.codeseek.co/watsonlawren02/pong-bBdyem */
var ballAng;
var speed = 3;
var ping = 5;
var pong = 0;
var mouseSpeed;
var tempY;

function init() {
  document.getElementById("click").style.display = "none";
  document.getElementById("ball").style.display = "inline";
  with(document.getElementById("ball").style) {
    top = "160px";
    left = "210px";
  }
  document.onmouseup = null;
  document.onmousemove = movePaddle;
  ballAng = Math.round(Math.random() * 100) + 130;
  moveDaBall = setInterval("moveBall()", 10);
}

function movePaddle(e) {
  e = (e) ? e : event;
  if (tempY) {
    mouseSpeed = Math.round((e.clientY - tempY) * 1.5);
    if (mouseSpeed == 0) mouseSpeed = 1;
  }
  with(document.getElementById("playerOne").style) {
    top = e.clientY - 18 + "px";
    if (parseInt(top) < 24 || parseInt(top) > 289) {
      if (parseInt(top) < 24) {
        top = "24px";
      } else {
        top = "289px";
      }
    }
  }
  tempY = e.clientY;
}

function moveBall() {
  var ballX = parseInt(document.getElementById("ball").style.left);
  var ballY = parseInt(document.getElementById("ball").style.top);
  var playOneX = parseInt(document.getElementById("playerOne").style.left);
  var playOneY = parseInt(document.getElementById("playerOne").style.top);
  var playTwoX = parseInt(document.getElementById("playerTwo").style.left);
  var playTwoY = parseInt(document.getElementById("playerTwo").style.top);
  if (ballY >= (playOneY - 5) && ballY <= (playOneY + 35 + 5) && ballX >= playOneX && ballX <= (playOneX + 10)) {
    if (pong == 3) {
      ping++;
      pong = 0;
    } else {
      pong++;
    }
    document.getElementById("ball").style.left = playOneX + 10 + "px";
    ballAng = 180 - ballAng - mouseSpeed;
  }
  if (ballY >= (playTwoY - 5) && ballY <= (playTwoY + 35 + 5) && ballX >= playTwoX && ballX <= (playTwoX + 10)) {
    if (pong == 3) {
      ping++;
      pong = 0;
    } else {
      pong++;
    }
    document.getElementById("ball").style.left = playTwoX + "px";
    ballAng = 180 - ballAng;
  }
  if (ballY < 25 || ballY > 316) {
    document.getElementById("ball").style.top = (ballY < 25) ? 25 + "px" : 316 + "px";
    ballAng = 360 - ballAng;
  }
  if (ballX <= 24 || ballX >= 417) {
    document.getElementById("ball").style.left = (ballX <= 24) ? 24 + "px" : 417 + "px";
    if (ballX <= 24) {
      endPoint(document.getElementById("twoScore"));
    } else {
      endPoint(document.getElementById("oneScore"));
    }
  }
  moveAI(ballY);
  moveObjAtAngle(document.getElementById("ball"), ballAng, ping);
}

function moveObjAtAngle(obj, ang, dist) {
  with(obj.style) {
    left = parseInt(left) + (dist * Math.cos(ang * (Math.PI / 180))) + "px";
    top = parseInt(top) - (dist * Math.sin(ang * (Math.PI / 180))) + "px";
  }
}

function moveAI(y) {
  var AI = document.getElementById("playerTwo");
  y = y - 10;
  y = parseInt(AI.style.top) + ((y - parseInt(AI.style.top)) / speed);
  if (y < 24 || y > 289) {
    if (y < 24) {
      y = 24;
    } else {
      y = 289;
    }
  }
  AI.style.top = y + "px";
}

function endPoint(place) {
  clearInterval(moveDaBall);
  ping = 7;
  pong = 0;
  document.onmouseup = init;
  document.getElementById("click").innerHTML = "click to continue";
  place.innerHTML = parseInt(place.innerHTML) + 1;
  if (parseInt(place.innerHTML) == 10) {
    if (place.id == "oneScore") {
      endGame(1);
    } else {
      endGame(0);
    }
  }
  document.getElementById("click").style.display = "inline";
}

function endGame(win) {
  document.onmouseup = restartGame;
  if (win) {
    document.getElementById("click").innerHTML = "<strong>you are dah winnah!</strong><br /> click to start over";
  } else {
    document.getElementById("click").innerHTML = "<strong>you are dah losah!</strong><br /> click to start over";
  }
}

function restartGame() {
  document.getElementById("oneScore").innerHTML = 0;
  document.getElementById("twoScore").innerHTML = 0;
  init();
}
document.onmouseup = init;

Comments