p5.js迷宫

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var caseTaille = 50;
var offset = 40;
var bob = new Peon();
var step = 1;
var labyrintheSortieX = 9;
var labyrintheSortieY = 7;

var labyrinthe = [
  ["k", "f", "b", "f", "f", "f", "b", "f", "f", "o"],
  ["e", "h", "g", "m", "b", "h", "g", "m", "f", "h"],
  ["l", "g", "j", "f", "i", "g", "g", "k", "f", "i"],
  ["n", "j", "f", "h", "k", "d", "a", "a", "f", "c"],
  ["e", "f", "h", "j", "i", "a", "i", "g", "k", "i"],
  ["g", "n", "j", "f", "b", "f", "f", "i", "j", "o"],
  ["g", "j", "f", "f", "i", "k", "h", "k", "f", "h"],
  ["j", "f", "f", "f", "f", "i", "j", "d", "o", "l"]
];
var correspondance = {
  a: [0, 0, 0, 0],
  b: [1, 0, 0, 0],
  c: [0, 1, 0, 0],
  d: [0, 0, 1, 0],
  e: [0, 0, 0, 1],
  f: [1, 0, 1, 0],
  g: [0, 1, 0, 1],
  h: [1, 1, 0, 0],
  i: [0, 1, 1, 0],
  j: [0, 0, 1, 1],
  k: [1, 0, 0, 1],
  l: [0, 1, 1, 1],
  m: [1, 0, 1, 1],
  n: [1, 1, 0, 1],
  o: [1, 1, 1, 0]
};

function setup() {
  createCanvas(640, 480);
}

function draw() {
  textFont("Open Sans");
  background(25);
  // labyrinthe et peon a afficher
  if (bob.etat == "static") {
    bob.detection();
  }
  translate(offset, offset);

labyrintheDisplay();

for (var p = 0; p < particules.length; p++) {
    particules[p].update();
    particules[p].display();
    if (particules[p].size < 0.25) {
      particules.splice(particules[p], 1);
    }
  }
  bob.update();
  bob.display();
}

function drawLineNew(type, x, y) {
  strokeWeight(1);
  stroke(255, 255, 255, 20);
  // haut
  if (
    type == "b" ||
    type == "f" ||
    type == "h" ||
    type == "k" ||
    type == "m" ||
    type == "n" ||
    type == "o"
  ) {
    strokeWeight(2);
    stroke(255, 255, 255, 255);
  }
  line(
    x * caseTaille,
    y * caseTaille,
    x * caseTaille + caseTaille,
    y * caseTaille
  );
  strokeWeight(1);
  stroke(255, 255, 255, 20);

// droite
  if (
    type == "c" ||
    type == "g" ||
    type == "h" ||
    type == "i" ||
    type == "l" ||
    type == "n" ||
    type == "o"
  ) {
    strokeWeight(2);
    stroke(255, 255, 255, 255);
  }
  line(
    x * caseTaille + caseTaille,
    y * caseTaille,
    x * caseTaille + caseTaille,
    y * caseTaille + caseTaille
  );

strokeWeight(1);
  stroke(255, 255, 255, 20);

// bas
  if (
    type == "d" ||
    type == "f" ||
    type == "i" ||
    type == "j" ||
    type == "l" ||
    type == "m" ||
    type == "o"
  ) {
    strokeWeight(2);
    stroke(255, 255, 255, 255);
  }
  line(
    x * caseTaille + caseTaille,
    y * caseTaille + caseTaille,
    x * caseTaille,
    y * caseTaille + caseTaille
  );

strokeWeight(1);
  stroke(255, 255, 255, 20);

// gauche
  if (
    type == "e" ||
    type == "g" ||
    type == "j" ||
    type == "k" ||
    type == "l" ||
    type == "m" ||
    type == "n"
  ) {
    strokeWeight(2);
    stroke(255, 255, 255, 255);
  }
  line(
    x * caseTaille,
    y * caseTaille,
    x * caseTaille,
    y * caseTaille + caseTaille
  );

strokeWeight(1);
  stroke(255, 255, 255, 20);
}

function Peon() {
  this.x = 0;
  this.y = 0;
  this.nextX = 0;
  this.nextY = 0;
  this.caseX = 0;
  this.caseY = 0;
  this.direction = 1;
  this.w = 20;
  this.vel = 2;
  this.etat = "static";
  this.pixelParcouru = 0;

this.update = function() {
    if (this.etat == "move") {
      this.pixelParcouru += this.vel;
      if (this.y > this.nextY) {
        if (random(0, 5) > 2.5) this.createParticules(0);
        this.y = this.y - this.vel;
      } else if (this.x < this.nextX) {
        if (random(0, 5) > 2.5) this.createParticules(1);
        this.x = this.x + this.vel;
      } else if (this.y < this.nextY) {
        if (random(0, 5) > 2.5) this.createParticules(2);
        this.y = this.y + this.vel;
      } else if (this.x > this.nextX) {
        if (random(0, 5) > 2.5) this.createParticules(3);
        this.x = this.x - this.vel;
      } else {
        this.etat = "static";
      }
    }
  };

this.display = function() {
    noStroke();
    fill(0, 196, 255);
    push();
    rectMode(CENTER);
    rect(this.x + caseTaille / 2, this.y + caseTaille / 2, this.w, this.w);
    rectMode(CORNER);
    pop();
  };

this.detection = function() {
    var infiniti = 800;
    // haut
    if (
      mouseX > this.x + offset &&
      mouseX < this.x + caseTaille + offset &&
      mouseY < this.y + offset &&
      mouseY > this.y - infiniti + offset
    ) {
      this.move(0);
    }
    // droite
    if (
      mouseX > this.x + caseTaille + offset &&
      mouseX < this.x + caseTaille + infiniti + offset &&
      mouseY > this.y + offset &&
      mouseY < this.y + caseTaille + offset
    ) {
      this.move(1);
    }
    // bas
    if (
      mouseX > this.x + offset &&
      mouseX < this.x + caseTaille + offset &&
      mouseY > this.y + caseTaille + offset &&
      mouseY < this.y + caseTaille + infiniti + offset
    ) {
      this.move(2);
    }
    // gauche
    if (
      mouseX < this.x + offset &&
      mouseX > this.x - infiniti + offset &&
      mouseY > this.y + offset &&
      mouseY < this.y + caseTaille + offset
    ) {
      this.move(3);
    }
  };

this.move = function(direction) {
    this.direction = direction;
    if (this.detectWall(this.direction) === 0) {
      this.etat = "move";
      switch (this.direction) {
        case 0:
          this.caseY--;
          this.nextY -= caseTaille;
          break;
        case 1:
          this.caseX++;
          this.nextX += caseTaille;
          break;
        case 2:
          this.caseY++;
          this.nextY += caseTaille;
          break;
        case 3:
          this.caseX--;
          this.nextX -= caseTaille;
          break;
      }
    }
    if (this.caseX == labyrintheSortieX && this.caseY == labyrintheSortieY) {
      this.grandSucces();
    }
  };

this.detectWall = function() {
    var destination = labyrinthe[this.caseY][this.caseX];
    switch (this.direction) {
      case 0:
        if (typeof labyrinthe[this.caseY - 1] === "undefined") return false;
        break;
      case 1:
        if (typeof labyrinthe[this.caseY][this.caseX + 1] === "undefined")
          return false;
        break;
      case 2:
        if (typeof labyrinthe[this.caseY + 1] === "undefined") return false;
        break;
      case 3:
        if (typeof labyrinthe[this.caseY][this.caseX - 1] === "undefined")
          return false;
        break;
    }
    return correspondance[destination][this.direction];
  };

this.createParticules = function() {
    var particuleX = this.x + caseTaille / 2 + random(-10, 10);
    var particuleY = this.y + caseTaille / 2 + random(-10, 10);
    particules.push(new Particule(particuleX, particuleY, this.direction));
  };

this.grandSucces = function() {
    alert('Grand succès !!');
  };
}

var particules = [];

function Particule(x, y, direction) {
  this.x = x;
  this.y = y;
  this.vel = 0.1;
  this.life = random(0.2, 0.6); // si grand alors vie moins longtemps
  this.size = random(6, 12);

this.display = function() {
    fill(255, 255, 255, 100);
    noStroke();
    rectMode(CENTER);
    //rect(this.x,this.y,this.size,this.size);
    ellipse(this.x, this.y, this.size);
  };

this.update = function() {
    this.size -= this.life;

switch (direction) {
      case 0:
        this.y += this.vel;
        break;
      case 1:
        this.x -= this.vel;
        break;
      case 2:
        this.y -= this.vel;
        break;
      case 3:
        this.x += this.vel;
        break;
    }
  };

this.delete = function() {};
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg