SHARE
TWEET

Untitled

a guest Sep 21st, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. window.onload=function() {
  2.    
  3.     let canvas = document.getElementById("2048");
  4.     let g = canvas.getContext("2d");
  5.  
  6.     window.addEventListener("keydown", function(event) {
  7.            
  8.         switch(event.keyCode) {
  9.             //left arrow
  10.             case 37: {
  11.                 board.mergeLeft();
  12.                 break;
  13.             }
  14.             //up arrow
  15.             case 38: {
  16.                 board.mergeUp();
  17.                 break;
  18.             }
  19.             //right arrow
  20.             case 39: {
  21.                 board.mergeRight();
  22.                 break;
  23.             }
  24.             //down arrow
  25.             case 40: {
  26.                 board.mergeDown();
  27.                 break;
  28.             }
  29.         }
  30.     });
  31.  
  32.     class Tile {
  33.  
  34.         constructor(value) {
  35.             this.color = '#EEE3DA';
  36.             this.value = value || 2;
  37.             this.moved = false;
  38.         }
  39.  
  40.         doubleValue() {
  41.             this.value *= 2;
  42.         }
  43.  
  44.         render(x,y) {
  45.             //update coordinates to proper location
  46.             x = 15+x*115;
  47.             y = 15+y*115;
  48.  
  49.             g.beginPath();
  50.  
  51.             g.fillStyle =this.color;
  52.             g.fillRect(x,y,100,100);
  53.  
  54.             g.font = '50px Arial';
  55.             g.fillStyle = "black";
  56.             g.fillText(""+ this.value,x+35,y+68);
  57.  
  58.             g.closePath();
  59.         }
  60.     }
  61.  
  62.     class Board {
  63.        
  64.         constructor(){
  65.            
  66.             this.width = 4;
  67.             this.height = 4;
  68.             this.board = [
  69.                 [new Tile(), new Tile(), new Tile(), new Tile()],
  70.                 [new Tile(), new Tile(), new Tile(),       null],
  71.                 [new Tile(), null      , null      ,       null],
  72.                 [null      , null      , null      ,       null],];
  73.         }
  74.  
  75.         input() { }
  76.  
  77.         mergeRight() {
  78.             for (let x=0; x<this.board.length; x++) {
  79.                 let merge = 3;
  80.                 let tail = 0;
  81.                 while (tail < merge) {
  82.  
  83.                     // if the two values looking to be merged are both numbers
  84.                     if (this.board[x][merge] !== null && this.board[x][merge-1] !== null) {
  85.  
  86.                         // if the numbers are equal
  87.                         if (this.board[x][merge].value === this.board[x][merge-1].value) {
  88.                             this.board[x][merge].doubleValue();
  89.                             this.board[x][merge-1] = null;
  90.                         }
  91.  
  92.                         merge -= 1;
  93.                         continue;
  94.                     }
  95.  
  96.                     // move everything over to right up until the value just merged
  97.                     for (let i = (this.board[x][merge] !== null) ? merge-1 : merge; i>tail; i--) {
  98.                         this.board[x][i] = this.board[x][i-1];
  99.                     }
  100.                     this.board[x][tail] = null;
  101.                     tail += 1;
  102.                 }
  103.             }
  104.         }
  105.  
  106.         mergeLeft() {
  107.             for(let x=0; x<this.board.length; x++) {
  108.                 let merge = 0;
  109.                 let tail = 3;
  110.                 while(merge < tail) {
  111.  
  112.                     // if the two values looking to be merged are both numbers
  113.                     if (this.board[x][merge] !== null && this.board[x][merge+1] != null) {
  114.  
  115.                         // if the numbers are equal
  116.                         if(this.board[x][merge].value === this.board[x][merge+1].value) {
  117.                             this.board[x][merge].doubleValue();
  118.                             this.board[x][merge+1] = null;
  119.                         }
  120.  
  121.                         merge += 1;
  122.                         continue;
  123.                     }
  124.  
  125.                     // move everything over to left up until the value just merged
  126.                     for (let i = (this.board[x][merge] != null) ? merge+1: merge; i<tail; i++) {
  127.                         this.board[x][i] = this.board[x][i+1];
  128.                     }
  129.                     this.board[x][tail] = null;
  130.                     tail -= 1;
  131.                 }
  132.             }
  133.         }
  134.  
  135.         mergeUp() {
  136.             for(let x=0; x<this.board.length; x++) {
  137.                 let merge = 0;
  138.                 let tail = 3;
  139.                 while(merge < tail) {
  140.  
  141.                     // if the two values looking to be merged are both numbers
  142.                     if (this.board[merge][x] !== null && this.board[merge+1][x] !== null) {
  143.  
  144.                         // if the numbers are equal
  145.                         if(this.board[merge][x].value === this.board[merge+1][x].value) {
  146.                             this.board[merge][x].doubleValue();
  147.                             this.board[merge+1][x] = null;
  148.                         }
  149.  
  150.                         merge += 1;
  151.                         continue;
  152.                     }
  153.  
  154.                     // move everything over to left up until the value just merged
  155.                     for (let i = (this.board[merge][x] != null) ? merge+1: merge; i<tail; i++) {
  156.                         this.board[i][x] = this.board[i+1][x];
  157.                     }
  158.                     this.board[tail][x] = null;
  159.                     tail -= 1;
  160.                 }
  161.             }
  162.         }
  163.  
  164.         mergeDown() {
  165.             for(let x=0; x<this.board.length; x++) {
  166.                 let merge = 3;
  167.                 let tail = 0;
  168.                 while(tail < merge) {
  169.  
  170.                     // if the two values looking to be merged are both numbers
  171.                     if (this.board[merge][x] !== null && this.board[merge-1][x] != null) {
  172.  
  173.                         // if the numbers are equal
  174.                         if(this.board[merge][x].value === this.board[merge-1][x].value) {
  175.                             this.board[merge][x].doubleValue();
  176.                             this.board[merge-1][x] = null;
  177.                         }
  178.  
  179.                         merge -= 1;
  180.                         continue;
  181.                     }
  182.  
  183.                     // move everything over to left up until the value just merged
  184.                     for (let i = (this.board[merge][x] != null) ? merge-1: merge; i>tail; i--) {
  185.                         this.board[i][x] = this.board[i-1][x];
  186.                     }
  187.                     this.board[tail][x] = null;
  188.                     tail += 1;
  189.                 }
  190.             }
  191.         }
  192.  
  193.  
  194.         print() {
  195.             let rows = [];
  196.  
  197.             for (let i=0; i<this.board.length; i++) {
  198.                 let rowStr = "";
  199.  
  200.                 for (let j=0; j<this.board[i].length; j++) {
  201.                     if (this.board[i][j] !== null)
  202.                         rowStr += "[" + ""+this.board[i][j].value + "]";
  203.                     else
  204.                         rowStr += "[ ]";
  205.                 }
  206.  
  207.                 rows.push(rowStr);
  208.             }
  209.  
  210.             const label = 'board';
  211.             console.group(label);
  212.             rows.forEach(function(row) { console.log(row); });
  213.             console.groupEnd(label);
  214.         }
  215.  
  216.         render() {
  217.             g.beginPath(); //start drawing
  218.             //draw buffer rectangles
  219.             g.fillStyle = "#BCAD9F";
  220.             for (let i=0; i<=5;i++){
  221.                 g.fillRect(i*115,0,15,canvas.height);
  222.             }
  223.             for (let i=0; i<=5;i++){
  224.                 g.fillRect(0,i*115,canvas.width,15);
  225.             }
  226.  
  227.             //draw tiles
  228.             for (let i=0; i<this.board.length;i++) {
  229.                 for (let j=0; j<this.board[i].length; j++) {
  230.                     let tile = this.board[i][j];
  231.                     if (tile == null)
  232.                         continue;
  233.                     else
  234.                         tile.render(j, i);
  235.                 }
  236.             }
  237.             g.closePath(); //stop drawing
  238.         }
  239.     }
  240.  
  241.  
  242.     let board = new Board();
  243.    
  244.     function render() {
  245.         //clerar the window buffer
  246.         g.clearRect(0,0, canvas.width, canvas.height)
  247.        
  248.         //update the frame
  249.         //draw the next frame
  250.         board.render();
  251.  
  252.         //loop
  253.         setInterval(render,15);
  254.     }
  255.     //start running the program
  256.     render();
  257. }
RAW Paste Data
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
 
Top