API tools faq
paste
beannshie

Tennis Game Finalised

beannshie
Aug 21st, 2017
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 6.79 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <canvas id="gameCanvas" width="1350" height="640"></canvas>
  4.  
  5. <script>
  6. var canvas;
  7. var canvasContext;
  8. var ballX = 50;
  9. var ballY = 50;
  10. var ballSpeedX = 10;
  11. var ballSpeedY = 5;
  12.  
  13. var player1Score = 0
  14. var player2Score = 0
  15. const WINNING_SCORE = 3;
  16.  
  17. var showingWinScreen = false;
  18.  
  19. var paddle1Y = 250;
  20. var paddle2Y = 250;
  21. var paddle1X = 0;
  22. var paddle2X = 1340;
  23. const PADDLE_THICKNESS = 10;
  24. const PADDLE_HEIGHT = 100;
  25.  
  26. function calculateMousePos(evt) {
  27. var rect = canvas.getBoundingClientRect();
  28. var root = document.documentElement;
  29. var mouseX = evt.clientX - rect.left - root.scrollLeft;
  30. var mouseY = evt.clientY - rect.top - root.scrollTop;
  31. return {
  32. x:mouseX,
  33. y:mouseY
  34. };
  35. }
  36.  
  37. function handleMouseClick(evt) {
  38. if(showingWinScreen) {
  39. player1Score = 0;
  40. player2Score = 0;
  41. showingWinScreen = false;
  42. }
  43. }
  44.  
  45. window.onload = function() {
  46. console.log("Hello World!");
  47. canvas = document.getElementById('gameCanvas');
  48. canvasContext = canvas.getContext('2d');
  49.  
  50. var framesPerSecond = 30
  51. setInterval(function() {
  52. moveEverything();
  53. drawEverything();
  54. }, 1000/framesPerSecond);
  55.  
  56.  
  57. canvas.addEventListener('mousedown',handleMouseClick);
  58.  
  59. canvas.addEventListener('mousemove',
  60. function(evt) {
  61. var mousePos = calculateMousePos(evt);
  62. if(mousePos.y > 50 &&
  63. mousePos.y < canvas.height -50) {
  64. paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
  65. }
  66. })
  67. }
  68.  
  69. function ballReset() {
  70. if(ballX < 0 ||
  71. ballX > canvas.width) {
  72. if(player1Score >= WINNING_SCORE ||
  73. player2Score >= WINNING_SCORE) {
  74. showingWinScreen = true
  75. }
  76. if(ballX > canvas.width/2) {
  77. ballSpeedX = -10
  78. }
  79. if(ballX < canvas.width/2) {
  80. ballSpeedX = 10
  81. }
  82. ballSpeedY = 8
  83. ballX = canvas.width/2;
  84. ballY = canvas.height/2;
  85. }
  86. }
  87.  
  88. function computerMovement() {
  89. var paddle2YCenter=paddle2Y+(PADDLE_HEIGHT/2);
  90. var distToBall = (ballY-paddle2YCenter);
  91. var percentToJump = 0.2;
  92. paddle2Y+=percentToJump*distToBall;
  93. }
  94.  
  95. function moveEverything() {
  96. if(showingWinScreen) {
  97. return;
  98. }
  99. computerMovement();
  100. ballX += ballSpeedX;
  101. ballY += ballSpeedY;
  102.  
  103. bounceBall();
  104. }
  105.  
  106. function drawNet() {
  107. for(var i=0;i<canvas.height; i+=40) {
  108. colorRect(canvas.width/2-1,i,2,20, 'white');
  109. }
  110. }
  111.  
  112. function drawEverything() {
  113. // background
  114. colorRect(0,0,canvas.width,canvas.height,'black');
  115.  
  116. canvasContext.font="40px Arial";
  117.  
  118. if(showingWinScreen) {
  119. canvasContext.fillStyle = 'white';
  120.  
  121. if (player1Score >= WINNING_SCORE) {
  122. canvasContext.fillText("Player Won", canvas.width/2-100, 200);
  123. } else if (player2Score >= WINNING_SCORE) {
  124. canvasContext.fillText("Computer Won", canvas.width/2-110, 200);
  125. }
  126. canvasContext.fillText("Click to continue", canvas.width/2-120, 480);
  127. return;
  128. }
  129.  
  130. // net
  131. drawNet();
  132.  
  133. // left player paddle
  134. colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
  135.  
  136. // right computer paddle
  137. colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
  138.  
  139. // ball
  140. colorCircle(ballX, ballY, 10, 'white');
  141.  
  142. canvasContext.fillText(player1Score, 100,100);
  143. canvasContext.fillText(player2Score, canvas.width - 100,100);
  144. }
  145.  
  146. function colorCircle(centerX, centerY, radius, drawColor) {
  147. canvasContext.fillStyle = drawColor;
  148. canvasContext.beginPath();
  149. canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2, true);
  150. canvasContext.fill();
  151. }
  152.  
  153. function colorRect(leftX,topY, width,height, drawColor) {
  154. canvasContext.fillStyle = drawColor;
  155. canvasContext.fillRect(leftX,topY, width,height);
  156. }
  157.  
  158.  
  159. function bounceBall() {
  160.  
  161. if(ballX >= paddle1X &&
  162. ballX <= paddle1X+PADDLE_THICKNESS &&
  163. ballY >= paddle1Y &&
  164. ballY <= paddle1Y+PADDLE_HEIGHT) {
  165. ballSpeedX = -ballSpeedX;
  166.  
  167. var deltaX = ballX - (paddleX+100/2);
  168. ballSpeedX = deltaX * 0.35;
  169.  
  170. }
  171. if(ballX >= paddle2X &&
  172. ballX <= paddle2X+PADDLE_THICKNESS &&
  173. ballY >= paddle2Y &&
  174. ballY <= paddle2Y+PADDLE_HEIGHT) {
  175. ballSpeedX = -ballSpeedX;
  176.  
  177. var deltaX = ballX - (paddleX+100/2);
  178. ballSpeedX = deltaX * 0.35;
  179.  
  180. }
  181.  
  182.  
  183. if(ballX < 0) {
  184. ballReset();
  185. player2Score++
  186. }
  187.  
  188. if(ballY <= 0) {
  189. ballSpeedY = -ballSpeedY;
  190. }
  191.  
  192. if(ballX > canvas.width) {
  193. ballReset();
  194. player1Score++
  195. }
  196.  
  197. if(ballY >= canvas.height) {
  198. ballSpeedY = -ballSpeedY;
  199. }
  200. }
  201.  
  202. </script>
  203.  
  204. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!