如何修复“ checkWin(side)”,使其实际显示内容

时间:2019-05-22 09:52:00

标签: javascript arrays p5.js

我正在编写井字游戏,在使用另一种方法检查获胜状态时遇到了麻烦。我正在使用p5.js。有人可以在我搞砸的地方检查代码吗?

我正在使用PHP在Apache上运行它。我在这样做的时候弄糟了。

let width = 427;
let height = 427;
var hardColor = "rgb(150, 0, 0)";
var easyColor = "rgb(49, 165, 0)";
var relativeSize = 0.7;
var fieldData = [0, 0, 0, 0, 0, 0, 0, 0, 0];
var winCombos = [
  //vertikal
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  //horizontal
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  //diagonal
  [0, 4, 8],
  [2, 4, 6]
]
var hard = false;
var player = "human";
var gameOver = false;
var lineSize, spaceBetween, diameter;
var vLine1X, vLine1Y, vLine2X, vLine2Y, hLine1X, hLine1Y, hLine2X, hLine2Y;
var clickedX, clickedY;

function preload() {
  img = loadImage('../../assets/tictactoe.jpg');
}
function setup() {
  createCanvas(width, height);
  if(width <= height) {lineSize = width * relativeSize} else {lineSize = height * relativeSize;}
  spaceBetween = lineSize / 3;
  diameter = spaceBetween * relativeSize;
}
function draw() {
  background(img);
  drawGameField();
  getFieldPoints();
  drawDifficultyButton();
  if(!gameOver) {computerMove();}
}
function mousePressed() {
  clickedX = mouseX;
  clickedY = mouseY;
  if(gameOver){
    restart();
    return;
  }
  if(player == "human") {
    if(clickedX > hLine1X && clickedX < vLine1X && clickedY > vLine1Y && clickedY < hLine1Y) {setSymbol(0);}
    if(clickedX > vLine1X && clickedX < vLine2X && clickedY < hLine1Y && clickedY > vLine1Y) {setSymbol(1);}
    if(clickedX > vLine2X && clickedX < hLine1X + lineSize && clickedY > vLine2Y && clickedY < hLine1Y) {setSymbol(2);}
    if(clickedX > hLine2X && clickedX < vLine1X && clickedY < hLine2Y && clickedY > hLine1Y) {setSymbol(3);}
    if(clickedX > vLine1X && clickedX < vLine2X && clickedY < hLine2Y && clickedY > hLine1Y) {setSymbol(4);}
    if(clickedX > vLine2X && clickedX < hLine2X + lineSize && clickedY < hLine2Y && clickedY > hLine1Y){setSymbol(5);}
    if(clickedX > hLine2X && clickedX < vLine1X && clickedY > hLine2Y && clickedY < vLine1Y + lineSize) {setSymbol(6);}
    if(clickedX > vLine1X && clickedX < vLine2X && clickedY > hLine2Y && clickedY < vLine1Y + lineSize) {setSymbol(7);}
    if(clickedX > vLine2X && clickedX < hLine2X + lineSize && clickedY > hLine2Y && clickedY < vLine1Y + lineSize){setSymbol(8);}
  }
  if(clickedX > 427/2/2/2-25 && clickedY > 427*0.85 && clickedX < 427/2/2/2-25+100 && clickedY < 427*0.85+50) {hard = !hard;}
}
function drawGameField() {
  textSize(40);
  textAlign(CENTER, BASELINE);
  noStroke();
  fill(255);
  text("Tic Tac Toe", 427/2, 40);
  strokeWeight(4);
  stroke(255);
  push();
  translate(427 / 2 - spaceBetween / 2, 427 / 2 - 3 * spaceBetween / 2);
  line(0, 0, 0, lineSize);
  pop();
  push();
  translate(427 / 2 + spaceBetween / 2, 427 / 2 - 3 * spaceBetween / 2);
  line(0, 0, 0, lineSize);
  pop();
  push();
  translate(427 / 2 - 3 * spaceBetween / 2, 427 / 2 -  spaceBetween / 2);
  line(0, 0, lineSize, 0);
  pop();
  push();
  translate(427 / 2 - 3 * spaceBetween / 2, 427 / 2 +  spaceBetween / 2);
  line(0, 0, lineSize, 0);
  pop();
  drawSymbol(vLine1X - spaceBetween/2, hLine1Y - spaceBetween/2, fieldData[0]);
  drawSymbol(vLine1X + spaceBetween/2, hLine1Y - spaceBetween/2, fieldData[1]);
  drawSymbol(vLine2X + spaceBetween/2, hLine1Y - spaceBetween/2, fieldData[2]);
  drawSymbol(vLine1X - spaceBetween/2, hLine1Y + spaceBetween/2, fieldData[3]);
  drawSymbol(vLine1X + spaceBetween/2, hLine1Y + spaceBetween/2, fieldData[4]);
  drawSymbol(vLine2X + spaceBetween/2, hLine1Y + spaceBetween/2, fieldData[5]);
  drawSymbol(vLine1X - spaceBetween/2, hLine2Y + spaceBetween/2, fieldData[6]);
  drawSymbol(vLine1X + spaceBetween/2, hLine2Y + spaceBetween/2, fieldData[7]);
  drawSymbol(vLine2X + spaceBetween/2, hLine2Y + spaceBetween/2, fieldData[8]);
}
function getFieldPoints() {
  vLine1X = 427/2-spaceBetween/2;
  vLine1Y = 427/2-3*spaceBetween/2;
  vLine2X = 427/2+spaceBetween/2;
  vLine2Y = vLine1Y;
  hLine1X = 427/2-3*spaceBetween/2;
  hLine1Y = 427/2-spaceBetween/2;
  hLine2X = hLine1X;
  hLine2Y = 427/2+spaceBetween/2;
}
function drawSymbol(x, y, type) {
  noFill();
  if(type === 1) {
    ellipse(x, y, diameter);
  } else if (type === 2) {
    push();
    translate(x, y);
    line(-diameter/2, -diameter/2, diameter/2, diameter/2);
    line(-diameter/2, diameter/2, diameter/2, -diameter/2);
    pop();
  }
}
function drawDifficultyButton() {
  textAlign(CENTER, CENTER);
  textSize(20);
  noStroke();
  if(hard) {
    fill(hardColor);
    rect(width/2/2/2-25, height*0.85, 100, 50, 50, 50);
    fill(255);
    text("Hard", width/2/2-27, height*0.91);
  } else {
    fill(easyColor);
    rect(width/2/2/2-25, height*0.85, 100, 50, 50, 50);
    fill(255);
    text("Easy", width/2/2-27, height*0.91);
  }
}
function clearField() {
  for(var j = 0; j < 9; j++) {
    fieldData[j] = 0;
  }
}
function restart() {
  clearField();
  filter(BLUR, 0);
  gameOver = false;
  player = "human";
  return;
}
function setSymbol(num) {
  if(fieldData[num] != 0) {return;}
  if(player == "human") {
    fieldData[num] = 1;
    if(checkWin(1)){
      setEndDisplay(1);
    } else {checkDraw();}
  }
  if(player == "ai") {
    fieldData[num] = 2;
    if(checkWin(2)){
      setEndDisplay(2);
    } else {checkDraw();}
  }
  if(player == "ai") {player = "human";} else {player = "ai";}
}
function checkWin(side) {
  for(var i = 0; i < winCombos.length; i++){
    var winSum = 0;
    var w = winCombos[i];
    for(var j = 0; j < w.length; j++){
      if(fieldData[w[j]] === side) {winSum++;}
    }
    if(winSum === 3){
      return true;
    }
  }
}
function checkDraw() {
  var availableMoves = getAvailableMoves();
  if(availableMoves.length == 0 && !gameOver){
    setEndDisplay(0);
  }
}
function getAvailableMoves() {
  var moves = [];
  var j = 0;
  for(var set in fieldData){
    if(fieldData[set] == 0){
      moves[j] = set;
      j++;
    }
  }
  return moves;
}
function setEndDisplay(endNum){
  textAlign(CENTER, CENTER);
  textSize(60);
  fill(255);
  noStroke();
  filter(BLUR, 2);
  if(endNum == 0){
    text("DRAW!", 427/2, 427/2);
  } else if (endNum == 1) {
    text("YOU WIN!", 427/2, 427/2);
  } else if(endNum == 2) {
    text("COMPUTER", 427/2, 427/2-50);
    text("WINS!", 427/2, 427/2);
  }
  textAlign(CENTER, BOTTOM);
  textSize(20);
  fill(220);
  text("Click anywhere to play again.", 427/2, 427/3 * 2);
  gameOver = true;
}
function computerMove() {
  if(player == "ai") {
    if(!hard) {
      randomField = Math.floor(random(0, 8));
      if(fieldData[randomField] == 0) {
      setSymbol(randomField);
    }
    } else {
      moves = getAvailableMoves();
      for(var i = 0; i < winCombos.length; i++){
        var w = winCombos[i];
        var score = 0;
        var badField = [];
        for(var j = 0; j < w.length; j++) {
          if(fieldData[w[j]] == 1){
            badField[j] = w[j];
            score++;
          }
        }
        if(score == 2) {
          fieldData[badField[0]];
        } else {
          randomField = Math.floor(random(0, 8));
          if(fieldData[randomField] == 0) {
          setSymbol(randomField);
          }
        }
      }
    }
  }
}

我希望会有“ Draw”或“ Win”,但我唯一得到的是什么,它将在再次单击后重新启动。

0 个答案:

没有答案