Advertisement
dwisnievsky

kula test

Oct 9th, 2016
33
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.94 KB | None | 0 0
  1. var canvas;
  2. var canvasContext;
  3. var ballX = 50; // polozenie kuli w osi X
  4. var ballY = 50; // polozenie kuli w osi Y
  5. var ballSpeedX = 10; // szybkosc przemieszczania sie kuli w osi X
  6. var ballSpeedY = 4; // szybkosc przemieszczania sie kuli w osi X
  7.  
  8. // punkty startowe graczy
  9. var player1Score = 0;
  10. var player2Score = 0;
  11.  
  12. var paddle1Y = 250; //polozenie paletki gracza na osi Y
  13. var paddle2Y = 250; //polozenie paletki komputera na osi Y
  14. const PADDLE_THICKNESS = 10; //grubosc paletek
  15. const PADDLE_HEIGHT = 100; //wysokosc paletek
  16.  
  17.  
  18. //sprawdzanie polozenia myszki
  19. function calculateMousePos(evt) {
  20. var rect = canvas.getBoundingClientRect();
  21. var root = document.documentElement;
  22. var mouseX = evt.clientX - rect.left - root.scrollLeft;
  23. var mouseY = evt.clientY - rect.top - root.scrollTop;
  24. return {
  25. x:mouseX,
  26. y:mouseY
  27. };
  28. }
  29.  
  30. window.onload = function() {
  31. canvas = document.getElementById('gameCanvas');
  32. canvasContext = canvas.getContext('2d');
  33.  
  34. var framesPerSecond = 60;
  35. setInterval(function() {
  36. moveEverything();
  37. drawEverything();
  38. }, 1000/framesPerSecond);
  39.  
  40. canvas.addEventListener('mousemove',
  41. function(evt) {
  42. var mousePos = calculateMousePos(evt);
  43. paddle1Y = mousePos.y - (PADDLE_HEIGHT/2);
  44. });
  45. }
  46.  
  47. // reset pozycji kuli
  48. function ballReset() {
  49. ballSpeedX = -ballSpeedX;
  50. ballX = canvas.width/2;
  51. ballY = canvas.height/2;
  52. }
  53.  
  54. // automatyczne sterowanie
  55. function computerMovement() {
  56. var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
  57. if(paddle2YCenter < ballY - 35) {
  58. paddle2Y = paddle2Y + 6;
  59. } else if(paddle2YCenter > ballY + 35) {
  60. paddle2Y = paddle2Y - 6;
  61. }
  62. }
  63.  
  64. function moveEverything() {
  65. computerMovement();
  66.  
  67. ballX = ballX + ballSpeedX;
  68. ballY = ballY + ballSpeedY;
  69.  
  70. if(ballX < 0) {
  71. if(ballY > paddle1Y &&
  72. ballY < paddle1Y+PADDLE_HEIGHT) {
  73. ballSpeedX = -ballSpeedX;
  74. } else {
  75. ballReset();
  76. player2Score++;
  77. }
  78. }
  79. if(ballX > canvas.width) {
  80. if(ballY > paddle2Y &&
  81. ballY < paddle2Y+PADDLE_HEIGHT) {
  82. ballSpeedX = -ballSpeedX;
  83. } else {
  84. ballReset();
  85. player1Score++;
  86. }
  87. }
  88. if(ballY < 0) {
  89. ballSpeedY = -ballSpeedY;
  90. }
  91. if(ballY > canvas.height) {
  92. ballSpeedY = -ballSpeedY;
  93. }
  94. }
  95.  
  96. function drawEverything() {
  97. // czarne tlo
  98. colorRectBg(0,0,canvas.width,canvas.height, "game-bg.png");
  99.  
  100.  
  101. // lewa paletka
  102. colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
  103.  
  104. // prawa paletka (sterowana przez komputer)
  105. colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'white');
  106.  
  107. // pilka
  108. colorCircle(ballX, ballY, 30, 'img/kula2.png');
  109.  
  110. //tablica punktow
  111. canvasContext.fillText(player1Score, 100, 100);
  112. canvasContext.fillText(player2Score, canvas.width-100, 100);
  113. }
  114.  
  115. function colorCircle(centerX, centerY, radius, drawColor) {
  116. var image = new Image();
  117. image.src = drawColor;
  118. var pat=canvasContext.createPattern(image, "repeat");
  119. canvasContext.fillStyle = pat;
  120. canvasContext.beginPath();
  121. canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2,true);
  122. canvasContext.fill();
  123. }
  124.  
  125. function colorRect(leftX,topY, width,height, drawColor) {
  126. var image = new Image();
  127. image.src = drawColor;
  128. var pat=canvasContext.createPattern(image, "repeat");
  129. canvasContext.fillStyle = pat;
  130. canvasContext.fillRect(leftX,topY, width,height);
  131. }
  132.  
  133. function colorRectBg(leftX,topY, width,height, drawColor) {
  134. var image = new Image();
  135. image.src = drawColor;
  136. var pat=canvasContext.createPattern(image, "repeat");
  137. canvasContext.fillStyle = pat;
  138. canvasContext.fillRect(leftX,topY, width,height);
  139. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement