Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
HTML5breakout - game.js

game.js

Caricato da: GN
Scarica il programma completo

  1. function game(){
  2.         document.getElementById("content").innerHTML = '<canvas id="gameCanvas"></canvas>';
  3.         var bg = new Image(); bg.src = "assets/graphics/backgrounds/watermeetslava.png";
  4.         var brick1 = new Image(); brick1.src = "assets/graphics/sprites/brick/1.png";
  5.         var brick2 = new Image(); brick2.src = "assets/graphics/sprites/brick/2.png";
  6.         var brick3 = new Image(); brick3.src = "assets/graphics/sprites/brick/3.png";
  7.         var brick4 = new Image(); brick4.src = "assets/graphics/sprites/brick/4.png";
  8.         var brickTnt = new Image(); brickTnt.src = "assets/graphics/sprites/brick/tnt.png";
  9.         var brickSprites = [brick1, brick2, brick3, brick4, brickTnt];
  10.         var explosionSprites = new Image(); explosionSprites.src = "assets/graphics/sprites/explosion.png";
  11.         var ball; var bar;
  12.         var bonuses = new Array();
  13.         var explosions = new Array();
  14.         var lives = 3; var score = 0;
  15.         var explosions = new Array();
  16.         var canvas=document.getElementById('gameCanvas');
  17.         var ctx=canvas.getContext('2d');
  18.         ctx.canvas.width  = window.innerWidth;
  19.         ctx.canvas.height = window.innerHeight;
  20.         var w = canvas.width;
  21.         var h = canvas.height;
  22.         var blockW = (w - ((level[0].length + 1) * (w/200))) / level[0].length;
  23.         var blockH = ((h/2) - ((level.length + 1) * ((h/2)/200))) / level.length;
  24.         var barW = w/10;
  25.         var leftInput = false;
  26.         var rightInput = false;
  27.         function gameObject(x, y, dx, dy){
  28.                 this.x = x;
  29.                 this.y = y;
  30.                 this.dx = dx;
  31.                 this.dy = dy;
  32.                 this.move = move;
  33.                 this.moveReverse = moveReverse;
  34.                 this.getSpeed = getSpeed;
  35.                 function move(){
  36.                         this.x += this.dx;
  37.                         this.y += this.dy;
  38.                 }
  39.                 function moveReverse(){
  40.                         this.x -= this.dx;
  41.                         this.y -= this.dy;
  42.                 }
  43.                 function getSpeed(){
  44.                         return Math.sqrt((dx*dx) + (dy*dy));
  45.                 }
  46.         }
  47.         function gameBonus(sprite, type){
  48.                 this.sprite = sprite;
  49.                 this.type = type;
  50.         }
  51.         function explosion(x, y, frame){
  52.                 this.x = x;
  53.                 this.y = y;
  54.                 this.frame = frame;
  55.         }
  56.         var r = w/150;
  57.         reset();
  58.         var intervalId = setInterval(gameLoop, 20); //50 fps
  59.         function gameLoop(){
  60.                 ctx.drawImage(bg, 0, 0, w, h);
  61.                 ctx.strokeStyle ='#FFFFFF';
  62.                 ctx.strokeRect(0, 0, w/5, h);
  63.                 ctx.strokeRect((w/5)*4, 0, w/5, h);
  64.                 ctx.fillStyle='#FF0000';
  65.                 ctx.beginPath();
  66.                 ctx.arc(ball.x,ball.y,r,0,2*Math.PI);
  67.                 ctx.fill();
  68.                 ctx.closePath();
  69.                 ctx.fillRect(bar.x, bar.y, barW, h/100);
  70.                 var blockX = w/200; var blockY = (h/2)/200;
  71.                 var won = true;
  72.                 for(var i = 0; i < level.length; i++){
  73.                         for(var j = 0; j < level[0].length; j++){
  74.                                 var block = level[i][j];
  75.                                 if (block != 0){
  76.                                                 won = false;
  77.                                 }
  78.                                 if (block != 0){
  79.                                         ctx.drawImage(brickSprites[block - 1], blockX, blockY, blockW, blockH);
  80.                                         if (ballIntersect(blockX, blockY, blockW, blockH)){
  81.                                                 ball.dy = -ball.dy;
  82.                                                 destroyBlock(i, j);
  83.                                         }
  84.                                 }
  85.                                 blockX += blockW + w/200;
  86.                         }
  87.                         blockY += blockH + (h/2)/200;
  88.                         blockX = w/200;
  89.                 }
  90.                 function destroyBlock(i, j){
  91.                         if (level[i][j] != 0){score++;}
  92.                         if (lvBonuses[i][j] != 0){
  93.                                 bonuses.splice(0, 0, new gameBonus(new gameObject(ball.x, ball.y, 0, h/100), lvBonuses[i][j]));
  94.                         }
  95.                         var isTnt = (level[i][j] == 5);
  96.                         level[i][j] = 0;
  97.                         if (isTnt){
  98.                                 if ((i - 1) > -1){destroyBlock(i - 1, j);}
  99.                                 if ((i + 1) < level.length){destroyBlock(i + 1, j);}
  100.                                 if ((j - 1) > -1){destroyBlock(i, j - 1);}
  101.                                 if ((j + 1) < level[0].length){destroyBlock(i, j + 1);}
  102.                                 if (((i - 1) > -1) && ((j - 1) > -1)){destroyBlock(i - 1, j - 1);}
  103.                                 if (((i - 1) > -1) && ((j + 1) < level[0].length)){destroyBlock(i - 1, j + 1);}
  104.                                 if (((i + 1) < level.length) && ((j - 1) > -1)){destroyBlock(i + 1, j - 1);}
  105.                                 if (((i + 1) < level.length) && ((j + 1) < level[0].length)){destroyBlock(i + 1, j + 1);}
  106.                                 explosions.splice(0, 0, new explosion(blockX, blockY, 0));
  107.                         }
  108.                 }
  109.                 ctx.fillStyle='#FF0000';
  110.                 var txtHeight = h/20;
  111.                 ctx.font = txtHeight + "px Arial";
  112.                 ctx.fillText("Score: " + score + "; Lives: " + lives, 0, h - txtHeight);
  113.                 if(bonuses.length != 0){
  114.                         for(var i = 0; i < bonuses.length; i++){
  115.                                 bonuses[i].sprite.move();
  116.                                 var s = "";
  117.                                 switch (bonuses[i].type){
  118.                                         case 1:
  119.                                                 s = "100";
  120.                                                 break;
  121.                                         case 2:
  122.                                                 s = "200";
  123.                                                 break;
  124.                                         case 3:
  125.                                                 s = "500";
  126.                                                 break;
  127.                                         case 4:
  128.                                                 s = "Bar+";
  129.                                                 break;
  130.                                         case 5:
  131.                                                 s = "Bar-";
  132.                                                 break;
  133.                                         case 6:
  134.                                                 s = "+1Life";
  135.                                                 break;
  136.                                         case 7:
  137.                                                 s = "-1Life";
  138.                                                 break;
  139.                                         case 8:
  140.                                                 s = "DoubleScore";
  141.                                                 break;
  142.                                 }
  143.                                 ctx.fillText(s, bonuses[i].sprite.x, bonuses[i].sprite.y);
  144.                                 if (bonuses[i].type != 0){
  145.                                         ctx.strokeRect(bonuses[i].sprite.x, bonuses[i].sprite.y - txtHeight, ctx.measureText(s).width, txtHeight);
  146.                                 }
  147.                                 if (rectIntersect(bonuses[i].sprite.x, bonuses[i].sprite.y - txtHeight, ctx.measureText(s).width, txtHeight, bar.x, bar.y, barW, h/100)){
  148.                                         switch (bonuses[i].type){
  149.                                                 case 1:
  150.                                                         score += 100;
  151.                                                 break;
  152.                                                 case 2:
  153.                                                         score += 200;
  154.                                                         break;
  155.                                                 case 3:
  156.                                                         score += 500;
  157.                                                         break;
  158.                                                 case 4:
  159.                                                         bar.x -= barW / 2;
  160.                                                         barW *= 2;
  161.                                                         break;
  162.                                                 case 5:
  163.                                                         bar.x += barW / 2;
  164.                                                         barW /= 2;
  165.                                                         break;
  166.                                                 case 6:
  167.                                                         lives += 1;
  168.                                                         break;
  169.                                                 case 7:
  170.                                                         lives -= 1;
  171.                                                         break;
  172.                                                 case 8:
  173.                                                         score *= 2;
  174.                                                         break;
  175.                                         }
  176.                                         bonuses[i].type = 0;
  177.                                 }
  178.                         }
  179.                 }
  180.                 for(var i = 0; i < explosions.length; i++){
  181.                         drawExplosionFrame(explosions[i]);
  182.                         if(explosions[i].frame != 63){
  183.                                 explosions[i].frame++;
  184.                         }else{
  185.                                 explosions.splice(i, 1);
  186.                         }
  187.                 }
  188.                 if (ball.x + r > w || ball.x - r < 0){
  189.                         ball.dx = -ball.dx;
  190.                 }
  191.                 if (ball.y - r < 0){
  192.                         ball.dy = -ball.dy;
  193.                 } else if (ball.y > h){
  194.                         lives--;
  195.                         reset();
  196.                 }
  197.                 if (ballIntersect(bar.x, bar.y, barW, h/100)){
  198.                         if (ball.x > bar.x && ball.x < bar.x + barW){
  199.                                 var deltaX = ball.x - (bar.x + barW/2);
  200.                                 var angle = (Math.PI/2) - (Math.abs((Math.abs(deltaX)/(barW/2)) * (Math.PI/3)));
  201.                                 var v = ball.getSpeed();
  202.                                 ball.dx = v * Math.cos(angle);
  203.                                 ball.dy = -(v * Math.sin(angle));
  204.                                 if (deltaX < 0){
  205.                                         ball.dx = -ball.dx;
  206.                                 }
  207.                         }
  208.                 }
  209.                 ball.move();
  210.                 if (leftInput){
  211.                         if(!(bar.x < 0)){
  212.                                 bar.moveReverse();
  213.                         }
  214.                 }
  215.                 if (rightInput){
  216.                         if(!((bar.x + barW) > w)){
  217.                                 bar.move();
  218.                         }
  219.                 }
  220.                 if (won){
  221.                         alert("You won!!");
  222.                         clearInterval(intervalId);
  223.                         menu();
  224.                 }
  225.                 if (lives == -1){
  226.                         alert("You lost!!");
  227.                         clearInterval(intervalId);
  228.                         menu();
  229.                 }
  230.         }
  231.         function ballIntersect(x, y, w, h){
  232.                 var bx = ball.x; var by = ball.y;
  233.                 return rectIntersect(x, y, w, h, bx - r, by - r, r, r);
  234.         }
  235.         canvas.addEventListener("touchstart", function(e){
  236.                 var x = e.targetTouches[0].clientX;
  237.                 var y = e.targetTouches[0].clientY;
  238.                 if (rectContains(0, 0, w/5, h, x, y)){
  239.                         leftInput = true;
  240.                 }
  241.                 if (rectContains((w/5)*4, 0, w/5, h, x, y)){
  242.                         rightInput = true;
  243.                 }
  244.         });
  245.         canvas.addEventListener("touchend", function(e){
  246.                 leftInput = false;
  247.                 rightInput = false;
  248.         });
  249.         canvas.addEventListener("touchmove", function(e){
  250.                 e.preventDefault();
  251.         });
  252.         window.addEventListener("keydown", function(e){
  253.                 switch(e.keyCode){
  254.                         case 37:
  255.                                 leftInput = true;
  256.                         break;
  257.                         case 39:
  258.                                 rightInput = true;
  259.                         break;
  260.                 }
  261.         });
  262.         window.addEventListener("keyup", function(e){
  263.                 switch(e.keyCode){
  264.                         case 37:
  265.                                 leftInput = false;
  266.                         break;
  267.                         case 39:
  268.                                 rightInput = false;
  269.                         break;
  270.                 }
  271.         });
  272.         function reset(){
  273.                 ball = new gameObject(w/2, (h/3)*2, 0, h/100);
  274.                 bar = new gameObject((w-(barW))/2, (h/10)*9, w/200, 0);
  275.         }
  276.         function drawExplosionFrame(e){
  277.                 sy = Math.floor(e.frame / 8) * 128;
  278.                 sx = (e.frame % 8) * 128;
  279.                 //alert(frame + " " + sy + " " + sx)
  280.                 ctx.drawImage(explosionSprites, sx, sy, 128, 128, e.x, e.y, 128, 128);
  281.         }
  282. }
  283. function rectContains(rectX, rectY, rectW, rectH, x, y){
  284.         return ((x > rectX) && (x < (rectX + rectW)) && (y > rectY) && (y < (rectY + rectH)));
  285. }
  286. function rectIntersect(x1, y1, w1, h1, x2, y2, w2, h2){
  287.         //return ((rectContains(x1, y1, w1, h1, x2, y2)) || (rectContains(x1, y1, w1, h1, x2 + w2, y2)) || (rectContains(x1, y1, w1, h1, x2, y2 + h2)) || (rectContains(x1, y1, w1, h1, x2 + w2, y2 + h2)));
  288.         return !(((x1 + w1) < x2) || ((x2 + w2) < x1) || ((y1 + h1) < y2) || ((y2 + h2)) < y1);
  289. }