p5.js Web Editor

xxxxxxxxxx
let tiles = [
  [new Tile(0), new Tile(0), new Tile(0), new Tile(0)],
  [new Tile(0), new Tile(0), new Tile(0), new Tile(0)],
  [new Tile(0), new Tile(0), new Tile(0), new Tile(0)],
  [new Tile(0), new Tile(0), new Tile(0), new Tile(0)]
];
​
let gridWidth = 10;
let tileSize = 80;
let gameOver = false;
​
function setup() {
  createCanvas(4 * tileSize + 5 * gridWidth, 4 * tileSize + 5 * gridWidth);
  createButton("Start game").mousePressed(startGame);
}
​
function draw() {
  background(255);
  fill("#B9ADA1");
  rect(0, 0, width, height, 10);
  for (let i = 0; i < tiles.length; i++) {
    for (let j = 0; j < tiles.length; j++) {
      tiles[i][j].draw(j, i);
    }
  }
}
​
function startGame() {
  tiles = [
    [new Tile(0), new Tile(0), new Tile(0), new Tile(0)],
    [new Tile(0), new Tile(0), new Tile(0), new Tile(0)],
    [new Tile(0), new Tile(0), new Tile(0), new Tile(0)],
    [new Tile(0), new Tile(0), new Tile(0), new Tile(0)]
  ];
  gameOver = false;
  spawnTile();
  spawnTile();
}
​
function keyPressed() {
  if (gameOver) {
    return;
  }
  if (keyCode == LEFT_ARROW) {
    for (let i = 0; i < tiles.length; i++) {
      for (let j = 1; j < tiles.length; j++) {
        if (tiles[i][j].value > 0) {
          let newJ = -1;
          let merge = false;
          for (let k = j - 1; k >= 0; k--) {
            if (tiles[i][k].value == 0) {
              newJ = k;
            } else if (tiles[i][k].value == tiles[i][j].value) {
              newJ = k;
              merge = true;
              break;
            } else {
              break;
            }
          }
          if (newJ > -1) {
            tiles[i][newJ] = tiles[i][j];
            if (merge) {
              tiles[i][newJ].value *= 2;
            }
            tiles[i][j] = new Tile(0);
          }
​
        }
      }
    }
  } else if (keyCode == RIGHT_ARROW) {
    for (let i = 0; i < tiles.length; i++) {
      for (let j = tiles.length - 2; j >= 0; j--) {
        if (tiles[i][j].value > 0) {
          let newJ = -1;
          let merge = false;
          for (let k = j + 1; k < tiles.length; k++) {
            if (tiles[i][k].value == 0){
              newJ = k;
            } else if (tiles[i][k].value == tiles[i][j].value) {
              newJ = k;
              merge = true;
              break;
            }
            else {
              break;
            }
          }
          if (newJ > -1) {
            tiles[i][newJ] = tiles[i][j];
            if (merge) {
              tiles[i][newJ].value *= 2;
            }
            tiles[i][j] = new Tile(0);
          }
        }
      }
    }
  } else if (keyCode == UP_ARROW) {
    for (let i = 1; i < tiles.length; i++) {
      for (let j = 0; j < tiles.length; j++) {
        if (tiles[i][j].value > 0) {
          let newI = -1;
          let merge = false;
          for (let k = i - 1; k >= 0; k--) {
            if (tiles[k][j].value == 0){
              newI = k;
            } else if (tiles[k][j].value == tiles[i][j].value) {
              newI = k;
              merge = true;
              break;
            } else {
              break;
            }
          }
          if (newI > -1) {
            tiles[newI][j] = tiles[i][j];
            if (merge) {
              tiles[newI][j].value *= 2;
            }
            tiles[i][j] = new Tile(0);
          }
        }
      }
    }
  } else if (keyCode == DOWN_ARROW) {
    for (let i = tiles.length - 2; i >= 0; i--) {
      for (let j = 0; j < tiles.length; j++) {
        if (tiles[i][j].value > 0) {
          let newI = -1;
          let merge = false;
          for (let k = i + 1; k < tiles.length; k++) {
            if (tiles[k][j].value == 0){
              newI = k;
            } else if (tiles[k][j].value == tiles[i][j].value) {
              newI = k;
              merge = true;
              break;
            } else {
              break;
            }
          }
          if (newI > -1) {
            tiles[newI][j] = tiles[i][j];
            if (merge) {
              tiles[newI][j].value *= 2;
            }
            tiles[i][j] = new Tile(0);
          }
        }
      }
    }
  }
  if (!spawnTile()) {
    alert('Game Over');
    gameOver = true;
  }
}
​
function spawnTile() {
  let availablePositions = [];
  for (let i = 0; i < tiles.length; i++) {
    for (let j = 0; j < tiles.length; j++) {
      if (tiles[i][j].value == 0) availablePositions.push({
        x: i,
        y: j
      });
    }
  }
​
  if (availablePositions.length == 0) {
    return false;
  }
​
  let value = Math.floor(random(10)) == 9 ? 4 : 2;
  let randomPosition = availablePositions[Math.floor(random(availablePositions.length))];
  tiles[randomPosition.x][randomPosition.y] = new Tile(value);
​
  return true;
}
Cookies

Sketch Files

Console

Preview
