Переместить квадрат используя canvas и p5.js - PullRequest
Новая
       41

Переместить квадрат используя canvas и p5.js

0 голосов
/ 14 февраля 2019

Я пытаюсь заставить квадрат перемещаться, используя p5.js и элемент canvas из HTML5.

Я пытался реорганизовать код несколькими способами, иногда, когда код находится в определенных местах, холст не 'т создать в первую очередь.Независимо от того, сколько раз я пытался, я не могу заставить его работать.

Причина, по которой она использует переменную "direction", заключается в том, что я планирую заставить ее двигаться в зависимости от нажатия клавиши со стрелкой.

Мой код выглядит следующим образом: 

var snakeX = 0;
var snakeY = 0;
var snakeX2 = 20;
var snakeY2 = 20;
var direction = "right";
var alive = true;
var length = 2;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight)
  frameRate(10);
}

function draw() {

  background(0);
  stroke(255);
  fill(255);
  rect(snakeX, snakeY, snakeX2, snakeY2);
}

if (direction == "up") {
  snakeY = snakeY + 10
  snakeY2 = snakeY - length
}

function move() {
  if (direction == "down") {

    snakeY = snakeY - 10
    snakeY2 = snakeY + length
  }
  
  if (direction == "right") {
    snakeX = snakeX + 10
    snakeX2 = snakeX - length
  }

  if (direction == "left") {

    snakeX = snakeX - 10
    snakeX2 = snakeX + length
  }
  
  loop()
}
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
</body>

Я ожидал, что квадрат автоматически начнет перемещаться вправо, когда я открою страницу, однако она остается неподвижной.Любая помощь будет оценена!

1 Ответ

0 голосов
/ 14 февраля 2019

Если я правильно понимаю ваш вопрос, проблемы с анимацией можно решить, выполнив следующие действия:

  • Добавьте вызов к move() в вашей функции draw()
  • При желании добавьте блок if(direction == 'up') { .. } в move()

Вот ваш обновленный фрагмент, чтобы показать это в действии: 

var snakeX = 0;
var snakeY = 0;
var snakeX2 = 20;
var snakeY2 = 20;
var direction = "right";
var alive = true;
var length = 2

function setup() {
  createCanvas(window.innerWidth, window.innerHeight)
  frameRate(10);
}

function draw() {

  background(0);
  stroke(255);
  fill(255);
  rect(snakeX, snakeY, snakeX2, snakeY2);
  
  /* Ensure move() is called for each draw() */
  move()
}


function move() {

  /* Move this inside the brackets of move() */
  if (direction == "up") {
    snakeY = snakeY + 10
    snakeY2 = snakeY - length
  }
  
  if (direction == "down") {

    snakeY = snakeY - 10
    snakeY2 = snakeY + length
  }
  
  if (direction == "right") {
    snakeX = snakeX + 10
    snakeX2 = snakeX - length
  }

  if (direction == "left") {

    snakeX = snakeX - 10
    snakeX2 = snakeX + length
  }
}
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>
</body>

Надеюсь, что поможет:)

...