p5.js Web Editor | 2048 Game

xxxxxxxxxx
let grid;
let grid_new;
let score = 0;
let scene = 0;
​
let colorsSizes = {
  "2": {
    size: 64,
    color: "#ed0909"
  },
  "4": {
    size: 64,
    color: "#f2ff00"
  },
  "8": {
    size: 64,
    color: "#bc5ff5"
  },
  "16": {
    size: 64,
    color: "#0c26eb"
  },
  "32": {
    size: 64,
    color: "#09e9ed"
  },
  "64": {
    size: 64,
    color: "#26eb0c"
  },
  "128": {
    size: 36,
    color: "#0ceb4f"
  },
  "256": {
    size: 36,
    color: "#99eb0c"
  },
  "512": {
    size: 36,
    color: "#eb0c4f"
  },
  "1024": {
    size: 18,
    color: "#ff5e00"
  },
  "2048": {
    size: 18,
    color: "#6c0ceb"
  },
​
}
​
function blankGrid() {
  return [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
  ];
}
​
function setup() {
  createCanvas(400, 400);
  noLoop();
  grid = blankGrid();
  grid_new = blankGrid();
​
  addNumber();
  addNumber();
  updateCanvas();
  //console.table(grid);
}
​
function mousePressed() {
  if (scene != 0) {
    if (mouseX > 100 && mouseX < 300 && mouseY > 250 && mouseY < 350) {
      console.log("pressed!");
      scene = 0;
      grid = blankGrid();
      grid_new = blankGrid();
      
      addNumber();
      addNumber();
      score = 0;
      updateCanvas();
    }
  }
}
​
function addNumber() {
  let options = [];
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (grid[i][j] === 0) {
        options.push({
          x: i,
          y: j
        });
      }
    }
  }
​
  if (options.length > 0) {
    let spot = random(options);
    let r = random(1);
    grid[spot.x][spot.y] = r > 0.1 ? 2 : 4;
    grid_new[spot.x][spot.y] = 1;
  }
}
​
function keyPressed() {
  //console.table(grid);
  //console.log(keyCode);
  let flipped = false;
  let rotated = false;
  let played = true;
​
  switch (keyCode) {
    case DOWN_ARROW:
      //do nothing
      break;
    case UP_ARROW:
      grid = flipGrid(grid);
      flipped = true;
      break;
    case RIGHT_ARROW:
      grid = transposeGrid(grid, 1);
      rotated = true;
      break;
    case LEFT_ARROW:
      grid = transposeGrid(grid, 1);
      grid = flipGrid(grid);
      rotated = true;
      flipped = true;
      break;
    default:
      played = false;
  }
​
  if (played) {
    let past = copyGrid(grid);
    for (let i = 0; i < 4; i++) {
      grid[i] = operate(grid[i]);
    }
    let changed = compare(past, grid);
​
    if (flipped) {
      grid = flipGrid(grid);
    }
​
    if (rotated) {
      grid = transposeGrid(grid, -1);
    }
​
    if (changed) {
      addNumber();
    }
​
    let gameover = isGameOver();
    if (gameover) {
      scene = 1;
    }
​
    let gamewon = isGameWon();
    if (gamewon) {
      scene = 2;
    }
​
    updateCanvas();
  }
}
​
function updateCanvas() {
  background(255);
  if (scene === 0) {
    drawGrid();
    select("#score").html(score);
  } else if (scene === 2) {
    background(0, 255, 0);
    textAlign(CENTER, CENTER);
    textSize(64);
    stroke(0);
    fill(255);
    text("You Won!", 200, 150);
  } else if (scene === 1) {
    background(255, 0, 0);
    textAlign(CENTER, CENTER);
    textSize(64);
    stroke(0);
    fill(255);
    text("You Lost", 200, 150);
  }
​
  if (scene != 0) {
    fill(255);
    stroke(0);
    rect(100, 250, 200, 100, 30);
    textAlign(CENTER, CENTER);
    textSize(32);
    fill(130);
    text("Play Again!", 200, 300);
  }
}
​
function operate(row) {
  row = slide(row);
  row = combine(row);
  row = slide(row);
  return row;
}
​
//making new array
function slide(row) {
  let arr = row.filter(val => val);
  let missing = 4 - arr.length;
  let zeros = Array(missing).fill(0);
  arr = zeros.concat(arr);
  return (arr);
}
​
//operating on array itself
function combine(row) {
  for (let i = 3; i >= 1; i--) {
    let a = row[i];
    let b = row[i - 1];
    if (a == b) {
      row[i] = a + b;
      score += row[i]
      row[i - 1] = 0;
    }
  }
  return (row);
}
​
function compare(a, b) {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (a[i][j] != b[i][j]) {
        return true;
      }
    }
  }
  return false;
}
​
function copyGrid(grid) {
  let extra = blankGrid();
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      extra[i][j] = grid[i][j]
    }
  }
  return extra;
}
​
function flipGrid(grid) {
  for (i = 0; i < 4; i++) {
    grid[i].reverse();
  }
  return grid;
}
​
function playAgain() {
  scene = 0;
}
​
function transposeGrid(grid, direction) {
  let newGrid = blankGrid();
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (direction == 1) {
        newGrid[i][j] = grid[j][i];
      } else {
        newGrid[j][i] = grid[i][j];
      }
    }
  }
  return newGrid;
}
​
function drawGrid() {
  let w = 100;
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      noFill();
      strokeWeight(2);
      let val = grid[i][j];
      let s = val.toString();
      stroke(0);
      if (val != 0) {
        fill(colorsSizes[s].color);
      } else {
        noFill();
      }
      rect(i * w, j * w, w, w, 30);
      if (val !== 0) {
        textAlign(CENTER, CENTER);
        noStroke();
        fill(0);
        textSize(colorsSizes[s].size);
        text(val, i * w + w / 2, j * w + w / 2);
      }
    }
  }
}
​
function isGameWon() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (grid[i][j] == 2048) {
        return true;
        scene = 2;
      }
    }
  }
  return false;
}
​
function isGameOver() {
  for (let i = 0; i < 4; i++) {
    for (let j = 0; j < 4; j++) {
      if (grid[i][j] == 0) {
        return false;
      }
      if (i !== 3 && grid[i][j] === grid[i + 1][j]) {
        return false;
      }
      if (j !== 3 && grid[i][j] === grid[i][j + 1]) {
        return false;
      }
    }
  }
  return true;
}
Cookies

Sketch Files

Console

Preview
