【p5.js】十字キーでプレイヤーの位置と方向を変更する

十字キーでプレイヤーの位置と方向を変更する。

let p1;
const arr = [[1,1,1],
             [0,0,0],
             [1,0,1],
             [1,0,1]]

function setup() {
  createCanvas(400, 400);
  p1 = new Player();
  p1.printPosition();
  p1.printDirection();
}

function draw() {
  background(220);
  
  if (arr[0][0] === 1) {
    fill(255);
    rect(0,150,150,100);
    noFill();
  }

  if (arr[0][2] === 1) {
    fill(255);
    rect(width-150,150,150,100);
    noFill();
  }
  
  if (arr[0][1] === 1) {
    fill(255);
    rect(150,150,100,100);
    noFill();
  }

  if (arr[1][0] === 1) {
    fill(255);
    rect(0,100,100,200);
    beginShape();
    vertex(100,100);
    vertex(150,150);
    vertex(150,height-150);
    vertex(100,height-100);
    endShape();
    noFill();
  }
  
  if (arr[1][2] === 1) {
    fill(255);
    rect(width-100,100,100,200);
    beginShape();
    vertex(width-100,100);
    vertex(width-150,150);
    vertex(width-150,height-150);
    vertex(width-100,height-100);
    endShape();
    noFill();
  }
  
  if (arr[1][1] === 1) {
    fill(255);
    rect(100,100,200,200);
    noFill();
  }
  
  if (arr[2][0] === 1) {
    fill(255);
    rect(0,50,50,300);
    beginShape();
    vertex(50,50);
    vertex(100,100);
    vertex(100,height-100);
    vertex(50,height-50);
    endShape();
    noFill();
    noFill();
  }
  
  if (arr[2][2] === 1) {
    fill(255);
    rect(width-50,50,50,300);
    beginShape();
    vertex(width-50,50);
    vertex(width-100,100);
    vertex(width-100,height-100);
    vertex(width-50,height-50);
    endShape();
    noFill();
  }
  
  if (arr[2][1] === 1) {
    fill(255);
    rect(50,50,300,300);
    noFill();
  }
  
  if (arr[3][0] === 1) {
    fill(255);
    beginShape();
    vertex(0,0);
    vertex(50,50);
    vertex(50,height-50);
    vertex(0,height);
    endShape();
    noFill();
  }
  
  if (arr[3][2] === 1) {
    fill(255);
    beginShape();
    vertex(width,0);
    vertex(width-50,50);
    vertex(width-50,height-50);
    vertex(width,height);
    endShape();
    noFill();
  }
}

function keyPressed() {
  if (keyCode === LEFT_ARROW) {
    p1.turnLeft();
    p1.printPosition();
    p1.printDirection();
  }
  if (keyCode === RIGHT_ARROW) {
    p1.turnRight();
    p1.printPosition();
    p1.printDirection();
  }
  if (keyCode === UP_ARROW) {
    if (p1.direction === p1.NORTH) {
      p1.position[1]--;
    } else if (p1.direction === p1.SOUTH) {
      p1.position[1]++;
    } else if (p1.direction === p1.WEST) {
      p1.position[0]--;
    } else if (p1.direction === p1.EAST) {
      p1.position[0]++;
    }
    p1.printPosition();
    p1.printDirection();
  }
  if (keyCode === DOWN_ARROW) {
    if (p1.direction === p1.NORTH) {
      p1.position[1]++;
    } else if (p1.direction === p1.SOUTH) {
      p1.position[1]--;
    } else if (p1.direction === p1.WEST) {
      p1.position[0]++;
    } else if (p1.direction === p1.EAST) {
      p1.position[0]--;
    }
    p1.printPosition();
    p1.printDirection();
  }
}

class Player {
  constructor() {
    this.NORTH = 0;
    this.SOUTH = 1;
    this.WEST = 2;
    this.EAST = 3;
    this.direction = this.SOUTH;
    this.position = [1, 1];
  }
  
  turnLeft() {
    if (this.direction === this.NORTH) {
      this.direction = this.WEST;
    } else if (this.direction === this.WEST) {
      this.direction = this.SOUTH;
    } else if (this.direction === this.SOUTH) {
      this.direction = this.EAST;
    } else if (this.direction === this.EAST) {
      this.direction = this.NORTH;
    }
  }
  
  turnRight() {
    if (this.direction === this.NORTH) {
      this.direction = this.EAST;
    } else if (this.direction === this.EAST) {
      this.direction = this.SOUTH;
    } else if (this.direction === this.SOUTH) {
      this.direction = this.WEST;
    } else if (this.direction === this.WEST) {
      this.direction = this.NORTH;
    }
  }
  
  printPosition() {
    console.log('position: ' + p1.position);
  }
  
  printDirection() {
    if (this.direction === this.NORTH) {
      console.log('direction: NORTH');
    } else if (this.direction === this.SOUTH) {
      console.log('direction: SOUTH');
    } else if (this.direction === this.WEST) {
      console.log('direction: WEST');
    } else if (this.direction === this.EAST) {
      console.log('direction: EAST');
    }
  }
}

p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators,...

editor.p5js.org