API tools faq
paste
Advertisement
Transformator

tetirs

Transformator
Apr 22nd, 2015
233
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 6.01 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <title>Tetris</title>
  5.  
  6.     <style>
  7.     canvas {
  8.         margin: auto;
  9.         position: absolute;
  10.  
  11.         top: 0;
  12.         bottom: 0;
  13.         left: 0;
  14.         right: 0;
  15.  
  16.         border: 2px solid #222;
  17.     }
  18.     </style>
  19. </head>
  20.  
  21. <body>
  22. <script>
  23. var WIDTH, HEIGHT;
  24.  
  25. var SECTION = 20;
  26. var SPACE = 2;
  27.  
  28. var gridpoints_x = 11;
  29. var gridpoints_y = 15;
  30.  
  31. var canvas, ctx, keystate, cooldown, stop;
  32.  
  33. var DownArrow=40, RightArrow=39, LeftArrow=37;
  34.  
  35. var game = {
  36.     grid: null,
  37.  
  38.     object: {
  39.         x: null,
  40.         y: null,
  41.  
  42.         color: null,
  43.  
  44.         grid: null,
  45.  
  46.         draw: function() {
  47.             ctx.fillStyle = this.color;
  48.  
  49.             for(var i=0; i<gridpoints_x; i++) {
  50.                 for(var j=0; j<gridpoints_y; j++) {
  51.                     for(var h=0; h<this.grid.length; h++) {
  52.                         if(this.grid[h][0]+this.x == i && this.grid[h][1]+this.y == j) {
  53.                             ctx.fillRect(SECTION*i + SPACE*i, SECTION*j + SPACE*j,SECTION, SECTION);
  54.                         }
  55.                     }
  56.                 }
  57.             }
  58.         },
  59.         set_object: function() {
  60.             var obj = Math.floor((Math.random() * 5) + 1);
  61.  
  62.             this.x = Math.floor(gridpoints_x/2);
  63.             this.y = 1;
  64.  
  65.             var check_grid = function() {
  66.                 for(var i=0; i<game.object.grid.length; i++) {
  67.                     var x = game.object.grid[i][0]+game.object.x;
  68.                     var y = game.object.grid[i][1]+game.object.y;
  69.  
  70.                     if(game.grid[x][y][0] == true) {
  71.                         console.log("YOU LOSE!");
  72.                         stop = true;
  73.                     }
  74.                 }
  75.             }
  76.  
  77.             switch(obj) {
  78.                 case(1):
  79.                     this.color = "#0F0";
  80.                     this.grid = [[0,  0], [0, -1], [-1, 0], [1,  0]];
  81.                     check_grid();
  82.                     break;
  83.                 case(2):
  84.                     this.color = "#F00";
  85.                     this.grid = [[-1, -1], [-1, 0], [-1, 1], [0, 1]];
  86.                     check_grid();
  87.                     break;
  88.                 case(3):
  89.                     this.color = "#00F";
  90.                     this.grid = [[-1, -1], [0, -1], [0, 0], [1, 0]];
  91.                     check_grid();
  92.                     break;
  93.                 case(4):
  94.                     this.color = "#FF0";
  95.                     this.grid = [[-1, -1], [0, -1], [0, 0], [-1, 0]];
  96.                     check_grid();
  97.                     break;
  98.                 case(5):
  99.                     this.color = "#DF7401";
  100.                     this.grid = [[1, -1], [1, 0], [1, 1], [0, 1]];
  101.                     check_grid();
  102.                     break;
  103.             }
  104.         },
  105.         rotate_object: function() {
  106.             // COMING SOON
  107.         }
  108.     },
  109.     generate_grid: function() {
  110.         this.grid = [];
  111.  
  112.         for(var i=0; i<gridpoints_x; i++) {
  113.             this.grid[i] = [];
  114.         }
  115.  
  116.         for(var i=0; i<gridpoints_x; i++) {
  117.             for(var j=0; j<gridpoints_y; j++) {
  118.                 this.grid[i][j] = [false, "#444"];
  119.             }
  120.         }
  121.     },
  122.     draw: function() {
  123.         for(var i=0; i<gridpoints_x; i++) {
  124.             for(var j=0; j<gridpoints_y; j++) {
  125.                 ctx.fillStyle = this.grid[i][j][1];
  126.                 ctx.fillRect(SECTION*i + SPACE*i, SECTION*j + SPACE*j,SECTION, SECTION);
  127.             }
  128.         }
  129.     },
  130.     update: function() {
  131.         if(cooldown > 5) {
  132.             // PLAYER CONTROL      
  133.             var goleft = false;
  134.             var goright = false;
  135.  
  136.             if(keystate[LeftArrow]) {
  137.                 goleft=true;
  138.                 for(var i=0; i<this.object.grid.length; i++) {
  139.                     var x = this.object.grid[i][0]+this.object.x;
  140.                     var y = this.object.grid[i][1]+this.object.y;
  141.  
  142.                     if(!this.grid.hasOwnProperty(x-1))
  143.                         goleft = false;
  144.                     else if(this.grid[x-1][y][0] == true)
  145.                         goleft = false;
  146.                 }
  147.                 keystate[LeftArrow] = false;
  148.             }
  149.  
  150.             if(keystate[RightArrow]) {
  151.                 goright=true;
  152.                 for(var i=0; i<this.object.grid.length; i++) {
  153.                     var x = this.object.grid[i][0]+this.object.x;
  154.                     var y = this.object.grid[i][1]+this.object.y;
  155.  
  156.                     if(!this.grid.hasOwnProperty(x+1))
  157.                         goright = false;
  158.                     else if(this.grid[x+1][y][0] == true)
  159.                         goright = false;
  160.                 }
  161.                 keystate[RightArrow] = false;
  162.             }
  163.  
  164.             if(goleft) { this.object.x--; }
  165.             if(goright) { this.object.x++; }
  166.         }
  167.  
  168.         if(cooldown > 10) {
  169.             // MOVE DOWN
  170.             var run = true;
  171.             var output = false;
  172.  
  173.             for(var i=0; i<this.object.grid.length; i++) {
  174.                 var x = this.object.grid[i][0]+this.object.x;
  175.                 var y = this.object.grid[i][1]+this.object.y;
  176.                 if(!this.grid[x].hasOwnProperty(y+1)) {
  177.                     output = true, run = false;
  178.                 } else if(this.grid[x][y+1][0] == true) {
  179.                     output = true, run = false;
  180.                 }
  181.             }
  182.  
  183.             if(output) {
  184.                 for(var j=0; j<this.object.grid.length; j++) {
  185.                     var x = this.object.grid[j][0]+this.object.x;
  186.                     var y = this.object.grid[j][1]+this.object.y;
  187.  
  188.                     this.grid[x][y] = [];
  189.                     this.grid[x][y][0] = true;
  190.                     this.grid[x][y][1] = this.object.color;
  191.                 }
  192.  
  193.                 for(var i=0; i<this.object.grid.length; i++) {
  194.                     var clear_row = true;
  195.  
  196.                     for(var j=0; j<gridpoints_x; j++) {
  197.                         if(this.grid[j][this.object.grid[i][1]+this.object.y][0] == false) {
  198.                             clear_row = false;
  199.                         }
  200.                     }
  201.                     if(clear_row) {
  202.                         var y = this.object.grid[i][1]+this.object.y;
  203.                         for(var j=0; j<gridpoints_x; j++) {
  204.                             this.grid[j][y][0] = false;
  205.                             this.grid[j][y][1] = "#444"; // SOMEWHERE HERE (UP / DOWN 10 LINES)
  206.                         }
  207.                         for(var j=y; j>0; j--) {
  208.                             for(var h=0; h<gridpoints_x; h++) {
  209.                                 if(this.grid[h].hasOwnProperty(j+1)) {
  210.                                     this.grid[h][j+1][0] = this.grid[h][j][0];
  211.                                     this.grid[h][j+1][1] = this.grid[h][j][0];
  212.                                 }
  213.  
  214.                                 this.grid[h][j][0] = false;
  215.                                 this.grid[h][j][1] = "#444";
  216.                             }
  217.                         }
  218.                     }
  219.                 }
  220.  
  221.                 this.object.set_object();
  222.             }
  223.  
  224.             if(run) this.object.y++;
  225.             cooldown = 0;
  226.         } else cooldown++;
  227.     }
  228. }
  229.  
  230. function main() {
  231.     init();
  232.  
  233.     canvas = document.createElement("canvas");
  234.     canvas.width = WIDTH;
  235.     canvas.height = HEIGHT;
  236.     ctx = canvas.getContext("2d");
  237.     document.body.appendChild(canvas);
  238.  
  239.     document.addEventListener("keydown", function(evt) {
  240.         keystate[evt.keyCode] = true;
  241.     });
  242.  
  243.     var loop = function() {
  244.         update();
  245.         draw();
  246.  
  247.         requestAnimationFrame(loop);
  248.     }
  249.  
  250.     requestAnimationFrame(loop);
  251. }
  252.  
  253. function init() {
  254.     keystate = {};
  255.  
  256.     cooldown = 0;
  257.     stop=false;
  258.  
  259.     WIDTH  = gridpoints_x*SECTION + (gridpoints_x-2)*SPACE;
  260.     HEIGHT = gridpoints_y*SECTION + (gridpoints_y-2)*SPACE;
  261.  
  262.     game.generate_grid();
  263.  
  264.     game.object.set_object();
  265. }
  266.  
  267. function update() {
  268.     if(!stop)
  269.         game.update();
  270. }
  271.  
  272. function draw() {
  273.     if(!stop){
  274.         ctx.fillStyle = "#222";
  275.         ctx.fillRect(0, 0, WIDTH, HEIGHT);
  276.  
  277.         game.draw();
  278.         game.object.draw();
  279.     }
  280. }
  281.  
  282. main();
  283. </script>
  284. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!