Guest User

Untitled

a guest
Nov 6th, 2024
87
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.87 KB | None | 0 0
  1. var canvas=document.getElementById("myCanvas");
  2. var ctx=canvas.getContext("2d");
  3.  
  4. var x=canvas.width/2;
  5. var y=canvas.height-80;
  6. var paddleHeight=10;
  7. var paddleWidth=75;
  8. var paddleX=(canvas.width-paddleWidth)/2;
  9. var rightPressed=false; // Whether right control button is pressed
  10. var leftPressed=false; // Whether left control button is pressed
  11. var ballRadius=10;
  12. var brickRowCount=7;
  13. var brickColumnCount=5;
  14.  
  15. var count=brickRowCount*brickColumnCount;
  16. var rem=count;
  17.  
  18. var score = 0;
  19. var lives = 50; // How many lives player has to complete the game
  20.  
  21. var brickWidth=80;
  22. var brickHeight=20;
  23. var brickPadding=7;
  24. var brickOffsetTop=30;
  25. var brickOffsetLeft=40;
  26. var speedup1=0;
  27. var speedup2=0;
  28. var speedup3=0;
  29. var speedup4=0;
  30. var speedup5=0;
  31. var speedup6=0;
  32. var speedup7=0;
  33.  
  34. var bricks=[];
  35. for(c=0;c<brickColumnCount;++c){
  36. bricks[c]=[];
  37. for(r=0;r<brickRowCount;++r){
  38. bricks[c][r]={x:0,y:0,status:1};
  39. }
  40.  
  41. }
  42.  
  43. var dx=3.5;
  44. var dy=-3.5;
  45.  
  46. function drawBall(){
  47.  
  48. ctx.beginPath();
  49. ctx.arc(x,y,ballRadius,0,Math.PI*2);
  50. ctx.fillStyle="#fff";
  51. ctx.fillStroke="#fff";
  52. ctx.stroke="10";
  53. ctx.fill();
  54. ctx.closePath();
  55. }
  56.  
  57. function drawPaddle(){
  58.  
  59. ctx.beginPath();
  60. ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);
  61. ctx.fillStyle="#00ffff";
  62. ctx.fill();
  63. ctx.closePath();
  64.  
  65. }
  66.  
  67. function drawBricks(){
  68.  
  69. for(c=0;c<brickColumnCount;++c){
  70. for(r=0;r<brickRowCount;++r){
  71. if(bricks[c][r].status==1){
  72.  
  73. var brickX=(c*(brickWidth+brickPadding))+brickOffsetLeft;
  74. var brickY=(r*(brickHeight+brickPadding))+brickOffsetTop;
  75. bricks[c][r].x=brickX;
  76. bricks[c][r].y=brickY;
  77. ctx.beginPath();
  78. ctx.rect(brickX,brickY,brickWidth,brickHeight);
  79. if(c%2!=0)
  80. ctx.fillStyle="#fff";
  81. else
  82. ctx.fillStyle="#C2AA83";
  83. ctx.fill();
  84. ctx.closePath();
  85.  
  86. }
  87. }
  88. }
  89.  
  90. }
  91. function collisionDetection(){
  92.  
  93. for(c=0;c<brickColumnCount;++c){
  94.  
  95. for(r=0;r<brickRowCount;++r){
  96.  
  97. var b=bricks[c][r];
  98.  
  99. if(b.status==1){
  100.  
  101. if(x>b.x && x<b.x+brickWidth && y>b.y && y<b.y+brickHeight){
  102. var snd=new Audio("./music/paddleBall.wav");
  103. snd.play();
  104. dy=-dy;
  105. b.status=0;
  106. score++;
  107. count--;
  108. /*** Change color of ball when it hits a brick ****/
  109. ctx.beginPath();
  110. ctx.arc(x,y,ballRadius,0,Math.PI*2);
  111. ctx.fillStyle="#00ffff";
  112. ctx.fillStroke="#00ffff";
  113. ctx.stroke="10";
  114. ctx.fill();
  115. ctx.closePath();
  116. /**************************************************/
  117. /*** If count of total bricks decreases to 30
  118. Increase the speed of ball ***/
  119. if(count<=(rem-rem/7) && speedup1==0){
  120. if(dy<0)
  121. dy-=0.5;
  122. else
  123. dy+=0.5;
  124. if(dx<0)
  125. dx-=0.5;
  126. else
  127. dx+=0.5;
  128. paddleWidth+=2;
  129. speedup1=1;
  130. }
  131. /*** If count of total bricks decreases to 20
  132. Increase the speed of ball and increase paddleWidth***/
  133. if(count<=(rem-2*rem/7) && speedup2==0){
  134. if(dy<0)
  135. dy-=1;
  136. else
  137. dy+=1;
  138. if(dx<0)
  139. dx-=1;
  140. else
  141. dx+=1;
  142.  
  143.  
  144. paddleWidth+=3;
  145. speedup2=1;
  146. }
  147. /*** If count of total bricks decreases to 10
  148. Increase the speed of ball ******/
  149. if(count<=(rem-3*rem/7) && speedup3==0){
  150. if(dy<0)
  151. dy-=1;
  152. else
  153. dy+=1;
  154. if(dx<0)
  155. dx-=1;
  156. else
  157. dx+=1;
  158.  
  159. paddleWidth+=4;
  160. speedup3=1;
  161. }
  162.  
  163. if(count<=(rem-4*rem/7) && speedup4==0){
  164.  
  165. if(dy<0)
  166. dy-=1;
  167. else
  168. dy+=1;
  169. if(dx<0)
  170. dx-=1;
  171. else
  172. dx+=1;
  173. paddleWidth+=5;
  174. speedup4=1;
  175.  
  176. }
  177.  
  178. if(count<=(rem-5*rem/7) && speedup5==0){
  179.  
  180. if(dy<0)
  181. dy-=1;
  182. else
  183. dy+=1;
  184. if(dx<0)
  185. dx-=1;
  186. else
  187. dx+=1;
  188. paddleWidth+=6;
  189. speedup5=1;
  190.  
  191. }
  192.  
  193. if(count<=(rem-6*rem/7) && speedup6==0){
  194.  
  195. if(dy<0)
  196. dy-=1;
  197. else
  198. dy+=1;
  199. if(dx<0)
  200. dx-=1;
  201. else
  202. dx+=1;
  203. paddleWidth+=7;
  204. speedup6=1;
  205.  
  206. }
  207.  
  208.  
  209.  
  210. if(count<=20){
  211.  
  212. alert("You WON!!! Good job champ!");
  213. document.location.reload();
  214. }
  215. }
  216.  
  217. }
  218.  
  219. }
  220.  
  221. }
  222.  
  223. }
  224.  
  225. function drawScore(){
  226.  
  227. ctx.font="18px Arial";
  228. ctx.fillStyle="#fff";
  229. ctx.fillText("score: "+score,40,20);
  230. // console.log(parseInt(brickRowCount)*parseInt(brickColumnCount)-parseInt(count));
  231.  
  232. }
  233.  
  234. function drawLives() {
  235. ctx.font = "18px Arial";
  236. ctx.fillStyle = "#fff";
  237. ctx.fillText("ARIMA'S GAME lives: "+lives, canvas.width-310, 20);
  238. }
  239.  
  240. function draw(){
  241.  
  242. ctx.clearRect(0,0,canvas.width,canvas.height);
  243. drawBricks();
  244. drawBall();
  245. drawPaddle();
  246. drawScore();
  247. drawLives();
  248.  
  249. collisionDetection();
  250.  
  251.  
  252. if(y+dy<ballRadius)
  253. dy=-dy;
  254. else if(y+dy>canvas.height-ballRadius){
  255.  
  256. if(x>=paddleX && x<=paddleX+paddleWidth){
  257.  
  258. var snd=new Audio("./music/paddleBall2.wav");
  259. snd.play();
  260. dy=-dy;
  261.  
  262. }
  263. else{
  264. lives--;
  265. if(!lives) {
  266. alert("Sorry, you've lost...\nTry again! :-)");
  267. document.location.reload();
  268.  
  269. }
  270. else{
  271. x=canvas.width/2;
  272. y = canvas.height-30;
  273. paddleWidth=80;
  274. rem=count;
  275. paddleX=(canvas.width-paddleWidth)/2;
  276. }
  277. }
  278.  
  279.  
  280. }
  281. else
  282. y+=dy;
  283.  
  284. if(x+dx<ballRadius || x+dx>canvas.width-ballRadius)
  285. dx=-dx;
  286. else
  287. x+=dx;
  288.  
  289. if(rightPressed && paddleX<canvas.width-paddleWidth)
  290. paddleX+=7;
  291. else if(leftPressed && paddleX>0)
  292. paddleX-=7;
  293.  
  294.  
  295.  
  296. }
  297.  
  298. function keyDownHandler(e){
  299.  
  300. if(e.keyCode==39)
  301. rightPressed=true;
  302. else if(e.keyCode==37)
  303. leftPressed=true;
  304.  
  305.  
  306. }
  307.  
  308. function keyUpHandler(e){
  309.  
  310. if(e.keyCode==39)
  311. rightPressed=false;
  312. if(e.keyCode==37)
  313. leftPressed=false;
  314.  
  315. }
  316.  
  317. function mouseMoveHandler(e){
  318.  
  319. var relativeX=e.clientX-canvas.offsetLeft;
  320.  
  321. if(relativeX>0 && relativeX<canvas.width){
  322.  
  323. if((relativeX-paddleWidth/2>=0) && (relativeX-paddleWidth/2<=(canvas.width-paddleWidth)))
  324. paddleX=relativeX-paddleWidth/2;
  325.  
  326. }
  327.  
  328.  
  329. }
  330.  
  331. document.addEventListener("keydown",keyDownHandler,false);
  332. document.addEventListener("keyup",keyUpHandler,false);
  333. document.addEventListener("mousemove", mouseMoveHandler, false);
  334.  
  335.  
  336. setInterval(draw,20);
Advertisement
Add Comment
Please, Sign In to add comment