p5.js Web Editor | Tres en ralla

xxxxxxxxxx
//Falta comentar el programa
//Y implementar el tres en raya Monstruo Comilón
//Y el que tienes 3 piezas y las puedes mover de sitio
​
board = [" ", " ", " ", " ", " ", " ", " ", " ", " "];
turn = -1; // 0 -> Not playing  1 -> Player1  2 -> Player2  3 -> 1 won  4 -> 2 won  -1 -> Not started
opponent = ""; //Bot or friend
p1 = 0;
p2 = 0;
pos = -1;
bgcolor = "#ED9E71";
linecolor = "#FFD7A3";
circlecolor = "#C6516A";
crosscolor = "#4A996D";
textcolor = "#9C684A";
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  boardSize = min(height, width);
​
  board = [" ", " ", " ", " ", " ", " ", " ", " ", " "];
​
  margin = boardSize / 6;
  lineSize = boardSize / 60;
  squareSize = (boardSize - 2 * margin - 2 * lineSize) / 3;
  excess = (width - 3 * squareSize - 2 * lineSize) / 2;
​
  background(bgcolor);
  fill(0);
  strokeWeight(lineSize);
  textAlign(CENTER, BOTTOM);
  drawText("Tres en ralla", margin, textcolor, width / 2, height / 2);
  drawText(
    "Pulsa 1 para jugar con un amigo",
    margin / 3,
    textcolor,
    width / 2,
    (height * 3) / 5
  );
  textAlign(CENTER, TOP);
  drawText(
    "Pulsa 2 para jugar contra un bot",
    margin / 3,
    textcolor,
    width / 2,
    (height * 7) / 11
  );
  noFill();
  stroke(circlecolor);
  textAlign(CENTER, CENTER);
  texts = margin * 0.5 * 11;
  drawText(
    "O",
    (width - texts) / 3,
    circlecolor,
    (width - texts) / 4,
    height / 2 - margin / 2
  );
  drawText(
    "X",
    (width - texts) / 3,
    crosscolor,
    width - (width - texts) / 4,
    height / 2 - margin / 2
  );
}
​
function start() {
  board = [" ", " ", " ", " ", " ", " ", " ", " ", " "];
  drawGrid();
  if(opponent=="bot"){
    turn=1;
  }
  else{
    if (turn == 3) {
      turn = 2;
    }
    if (turn == 4) {
      turn = 1;
    }
    if (turn == 0) {
        turn = round(random(1, 2));
      }
    }
  if (turn == 1) {
    drawText(
      "Turno del jugador X",
      (margin * 3) / 7,
      textcolor,
      width / 2,
      height - margin / 3
    );
  } else {
    drawText(
      "Turno del jugador O",
      (margin * 3) / 7,
      textcolor,
      width / 2,
      height - margin / 3
    );
  }
  drawText(
    "Tres en ralla",
    (margin * 2) / 3,
    textcolor,
    width / 2,
    (margin * 3) / 5
  );
  drawText(p1, (margin * 2) / 3, crosscolor, margin / 2, (margin * 3) / 5);
  drawText(
    p2,
    (margin * 2) / 3,
    circlecolor,
    width - margin / 2,
    (margin * 3) / 5
  );
}
​
function drawText(t, size, c, x, y) {
  textSize(size);
  noStroke();
  fill(c);
  textFont("Quicksand");
  text(t, x, y);
}
​
function drawIcon(icon, position) {
  iconSize = (squareSize * 2) / 3;
  noFill();
  if (position >= 6) {
    if (icon == "O") {
      stroke(circlecolor);
      ellipse(
        (position - 5) * squareSize +
          excess +
          (position - 6) * lineSize -
          squareSize / 2,
        margin + 2 * squareSize + 2 * lineSize + squareSize / 2,
        iconSize,
        iconSize
      );
    } else {
      stroke(crosscolor);
      x1 =
        (position - 6) * squareSize +
        excess +
        (position - 6) * lineSize +
        (iconSize * 1) / 5;
      y1 = margin + 2 * squareSize + 2 * lineSize + (iconSize * 1) / 5;
      line(x1, y1, iconSize + x1, iconSize + y1);
      line(x1 + iconSize, y1, x1, iconSize + y1);
    }
  } else if (position >= 3) {
    if (icon == "O") {
      stroke(circlecolor);
      ellipse(
        (position - 2) * squareSize +
          excess +
          (position - 3) * lineSize -
          squareSize / 2,
        margin + squareSize + lineSize + squareSize / 2,
        iconSize,
        iconSize
      );
    } else {
      stroke(crosscolor);
      x1 =
        (position - 3) * squareSize +
        excess +
        (position - 3) * lineSize +
        (iconSize * 1) / 5;
      y1 = margin + squareSize + lineSize + (iconSize * 1) / 5;
      line(x1, y1, iconSize + x1, iconSize + y1);
      line(x1 + iconSize, y1, x1, iconSize + y1);
    }
  } else {
    if (icon == "O") {
      stroke(circlecolor);
      ellipse(
        (position + 1) * squareSize +
          excess +
          position * lineSize -
          squareSize / 2,
        margin + squareSize / 2,
        iconSize,
        iconSize
      );
    } else {
      stroke(crosscolor);
      x1 =
        position * squareSize +
        excess +
        position * lineSize +
        (iconSize * 1) / 5;
      y1 = margin + (iconSize * 1) / 5;
      line(x1, y1, iconSize + x1, iconSize + y1);
      line(x1 + iconSize, y1, x1, iconSize + y1);
    }
  }
}
​
function drawGrid() {
  background(bgcolor);
  stroke(linecolor);
  // Drawing the board
  line(excess, margin + squareSize, width - excess, margin + squareSize);
  line(
    excess,
    margin + 2 * squareSize + lineSize,
    width - excess,
    margin + 2 * squareSize + lineSize
  );
​
  line(excess + squareSize, margin, excess + squareSize, boardSize - margin);
  line(
    excess + 2 * squareSize + lineSize,
    margin,
    excess + 2 * squareSize + lineSize,
    boardSize - margin
  );
​
  for (i = 0; i < 9; i++) {
    if (board[i] != " ") {
      drawIcon(board[i], i);
    }
  }
}
​
function is_victory(icon) {
  return (
    (board[0] == icon && board[1] == icon && board[2] == icon) ||
    (board[3] == icon && board[4] == icon && board[5] == icon) ||
    (board[6] == icon && board[7] == icon && board[8] == icon) ||
    (board[0] == icon && board[3] == icon && board[6] == icon) ||
    (board[1] == icon && board[4] == icon && board[7] == icon) ||
    (board[2] == icon && board[5] == icon && board[8] == icon) ||
    (board[0] == icon && board[4] == icon && board[8] == icon) ||
    (board[2] == icon && board[4] == icon && board[6] == icon)
  );
}
​
function is_draw() {
  return !board.includes(" ");
}
​
function playerMove(icon) {
  print("Jugador", icon, "mueve a", pos);
  board[pos] = icon;
  finishTurn();
}
​
function draw() {}
​
function makeButton(name, fontSize, w, h, action) {
  button = createButton(name);
  button.style("font-size", fontSize + "px");
  button.style("background-color", linecolor);
  button.style("border-radius", "12px");
  button.size(w, h);
  const x = (windowWidth - button.width) / 2;
  const y = (windowHeight - button.height) / 2;
​
  // Posicionar el botón
  button.position(x, y);
​
  button.style("cursor", "pointer");
  button.style("border", button.width / 21 + "px solid #B5531B");
  button.style("color", "#B5531B");
  button.mousePressed(action);
}
​
function AI_move() {
  let moves = [];
​
  for (i = 0; i < 9; i++) {
    if (board[i] == " ") {
      moves.push(i);
      if(i==4){
        pos=4;
        return;
      }
      
    }
  }
​
​
  for (i = 0; i < moves.length; i++) {
    board[moves[i]] = "O";
    if (is_victory("O")) {
      pos = moves[i];
      board[moves[i]] = " ";
      return;
    }
    board[moves[i]] = " ";
  }
​
  for (i = 0; i < moves.length; i++) {
    board[moves[i]] = "X";
    if (is_victory("X")) {
      pos = moves[i];
      board[moves[i]] = " ";
      return;
    }
    board[moves[i]] = " ";
  }
​
  for (i = 0; i < moves.length; i++) {
    if (moves[i] % 2 == 0) {
      pos = moves[i];
      return;
    }
  }
  pos = int(random(0, moves.length));
}
​
function finishTurn() {
  drawGrid();
  if (turn == 1) {
    drawText(
      "Turno del jugador O",
      (margin * 3) / 7,
      textcolor,
      width / 2,
      height - margin / 3
    );
  } else if (turn == 2) {
    drawText(
      "Turno del jugador X",
      (margin * 3) / 7,
      textcolor,
      width / 2,
      height - margin / 3
    );
  }
​
  pos = -1;
  turn = (turn % 2) + 1;
}
​
function checkSquare() {
  pos = 0;
  if (mouseX < excess + squareSize) {
    pos += 0;
  } else if (mouseX < squareSize * 2 + excess + lineSize) {
    pos += 1;
  } else {
    pos += 2;
  }
  if (mouseY < margin + squareSize) {
    pos += 0;
  } else if (mouseY < squareSize * 2 + margin + lineSize) {
    pos += 3;
  } else {
    pos += 6;
  }
}
​
function checkResult() {
  if (is_victory("O")) {
    drawGrid();
    drawText(
      "Gana el jugador O!!",
      (margin * 4) / 9,
      circlecolor,
      width / 2,
      (margin * 2) / 3
    );
    turn = 4;
    p2++;
​
    drawText(
      "Pulsa R para reiniciar",
      (margin * 2) / 7,
      textcolor,
      width / 2,
      height - margin / 2
    );
  } else if (is_victory("X")) {
    drawGrid();
    drawText(
      "Gana el jugador X!!",
      (margin * 4) / 9,
      crosscolor,
      width / 2,
      (margin * 2) / 3
    );
    turn = 3;
    p1++;
    drawText(
      "Pulsa R para reiniciar",
      (margin * 2) / 7,
      textcolor,
      width / 2,
      height - margin / 2
    );
  } else if (is_draw()) {
    drawGrid();
    drawText(
      "Es un empate",
      (margin * 3) / 7,
      textcolor,
      width / 2,
      (margin * 2) / 3
    );
    turn = 0;
    win = 0;
    drawText(
      "Pulsa R para reiniciar",
      (margin * 2) / 7,
      textcolor,
      width / 2,
      height - margin / 2
    );
  } else {
    drawText(
      "Tres en ralla",
      (margin * 2) / 3,
      textcolor,
      width / 2,
      (margin * 3) / 5
    );
  }
}
​
function mouseClicked() {
  if (turn == 1 || turn == 2) {
    if (opponent == "friend" || turn == 1) {
      checkSquare();
    }
    
    if (board[pos] == " ") {
      if (turn == 1) {
        playerMove("X");
      } else {
        playerMove("O");
      }
    }
    checkResult();
​
    if (turn==2 && opponent == "bot") {
      AI_move();
      
      if (board[pos] == " ") {
        if (turn == 1) {
          playerMove("X");
        } else {
          playerMove("O");
        }
      }
​
      checkResult();
      
    }
  }
​
  if (turn != -1) {
    drawText(p1, (margin * 2) / 3, crosscolor, margin / 2, (margin * 3) / 5);
​
    drawText(
      p2,
      (margin * 2) / 3,
      circlecolor,
      width - margin / 2,
      (margin * 3) / 5
    );
  }
}
​
function keyPressed() {
  if (key === "r" && turn != 1 && turn != 2) {
    start();
  }
  if (key === "1" && turn == -1) {
    turn = 1;
    opponent = "friend";
    start();
  }
  if (key === "2" && turn == -1) {
    turn = 1;
    opponent = "bot";
    start();
  }
}
Cookies

Sketch Files

Console

Preview
