Advertisement
Guest User

Untitled

a guest
Feb 19th, 2017
88
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.12 KB | None | 0 0
  1. <html>
  2. <canvas id="gameCanvas" width="800" height="600">
  3. </canvas>
  4.  
  5. <script>
  6. //Background Parameter
  7. var canvas;
  8. var canvasContext;
  9. //Ball Parameter
  10. var ballX = 50;
  11. var ballSpeedX = 10;
  12. var ballY = 50;
  13. var ballSpeedY = 4;
  14. //Spieler Platte Parameter
  15. var paddle1Y = 250;
  16. var paddle2Y = 250;
  17. const PADDLE_HEIGHT = 100;
  18. const PADDLE_THICKNESS = 10;
  19.  
  20. //HUD Parameter
  21. var player1Score = 0;
  22. var player2Score = 0;
  23. const WINNING_SCORE = 3;
  24. var showingWinScreen = false;
  25.  
  26. function handleMouseClick(evt){
  27. if(showingWinScreen == true) {
  28. player1Score = 0;
  29. player2Score = 0;
  30. showingWinScreen = false;
  31. }
  32.  
  33. }
  34.  
  35. function calculateMousePos(evt) {
  36. var rect = canvas.getBoundingClientRect();
  37. var root = document.documentElement;
  38. var mouseX = evt.clientX - rect.left - root.scrollLeft;
  39. var mouseY = evt.clientY - rect.top -root.scrollTop;
  40. return {
  41. x:mouseX,
  42. y:mouseY
  43. };
  44. }
  45.  
  46. window.onload=function(){
  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. canvas.addEventListener('mousemove',
  57. function(evt) {
  58. var mousePos = calculateMousePos(evt);
  59. paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
  60. });
  61.  
  62. canvas.addEventListener('mousedown',handleMouseClick);
  63.  
  64. }
  65.  
  66. //KI
  67. function computerMovement(){
  68. var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
  69. if(paddle2YCenter < ballY - 35) {
  70. paddle2Y += 6;
  71. }else if(paddle2YCenter > ballY + 35){
  72. paddle2Y -= 6;
  73. }
  74. }
  75.  
  76. function ballReset() {
  77. if(player1Score >= WINNING_SCORE ||
  78. player2Score >= WINNING_SCORE) {
  79. showingWinScreen = true;
  80. }
  81. ballX = canvas.width/2;
  82. ballY = canvas.height/2;
  83. ballSpeedX = -ballSpeedX;
  84. }
  85. function moveEverything(){
  86. if (showingWinScreen == true) {
  87. return;
  88. }
  89. computerMovement();
  90.  
  91. ballX += ballSpeedX;
  92. ballY += ballSpeedY;
  93. //rechter Spieler trigger
  94. if(ballX > canvas.width){
  95. if(ballY > paddle2Y &&
  96. ballY < paddle2Y+PADDLE_HEIGHT) {
  97. ballSpeedX = -ballSpeedX;
  98. //winkelSpeed
  99. var deltaY =ballY - (paddle2Y+PADDLE_HEIGHT/2);
  100. ballSpeedY = deltaY *0.35;
  101. } else{
  102. player1Score++;
  103. ballReset();
  104.  
  105. }
  106. }
  107. //linker Spieler trigger
  108. if(ballX < 0){
  109. if(ballY > paddle1Y &&
  110. ballY < paddle1Y+PADDLE_HEIGHT) {
  111. ballSpeedX = -ballSpeedX;
  112. //winkelSpeed
  113. var deltaY =ballY - (paddle1Y+PADDLE_HEIGHT/2);
  114. ballSpeedY = deltaY *0.35;
  115. } else{
  116. player2Score++;
  117. ballReset();
  118.  
  119. }
  120. }
  121. //Y-Richtung
  122. if(ballY > canvas.height){
  123. ballSpeedY = -ballSpeedY;
  124. }
  125. if(ballY < 0){
  126. ballSpeedY = -ballSpeedY;
  127. }
  128.  
  129.  
  130. }
  131.  
  132. //DRAW
  133. function drawNet(){
  134. for (var i=0;i<canvas.height; i+=40) {
  135. colorRect(canvas.width/2 - 1,i,2,20,'white');
  136. }
  137. }
  138.  
  139. function drawEverything(){
  140.  
  141. //Hintergrund
  142. colorRect(0,0,canvas.width,canvas.height,'black');
  143. // Logik Gewinner
  144. if (showingWinScreen == true) {
  145. canvasContext.fillStyle = 'red';
  146.  
  147. if(player1Score >= WINNING_SCORE) {
  148. canvasContext.fillText("Linker Spieler gewinnt!!!",350,300);
  149. }
  150. else if (player2Score >= WINNING_SCORE) {
  151. canvasContext.fillText("Rechter Spieler gewinnt!!!",350,300);
  152. }
  153.  
  154. canvasContext.fillText("Klicken zum weiterspielen!",350,500);
  155. return;
  156. }
  157.  
  158. //Mittellinie
  159. drawNet();
  160.  
  161. //linker Spieler
  162. colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
  163.  
  164. //rechter Spieler
  165. colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
  166.  
  167. //Ball
  168. colorCircle(ballX,ballY,PADDLE_THICKNESS,'red');
  169.  
  170. //HUD
  171. canvasContext.fillText(player1Score,100,100);
  172. canvasContext.fillText(player2Score,canvas.width-100,100);
  173. }
  174.  
  175. //Ball draw Funktion
  176. function colorCircle(centerX,centerY,radius,drawColor){
  177. canvasContext.fillStyle = drawColor
  178. canvasContext.beginPath();
  179. canvasContext.arc(centerX,centerY,radius,0,Math.PI*2,true);
  180. canvasContext.fill();
  181.  
  182. }
  183. //Spieler und Hintergrund
  184. function colorRect(leftX,topY,width,height,drawColor) {
  185. canvasContext.fillStyle = drawColor;
  186. canvasContext.fillRect(leftX,topY,width,height);
  187. }
  188. </script>
  189.  
  190. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement