Перемещение холста слева направо - справа налево, изменить цвет и размер

Question

Мне нужно создать движущийся прямоугольник слева направо и справа налево.

Я хочу изменить цвет прямоугольника (на случайный цвет) после каждых 20 пикселей прохождения прямоугольника.Когда прямоугольник справа, его размер изменится на 100px, а когда он слева, его размер вернется к 50px.

На данный момент у меня есть:

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    x = 0,
    last = performance.now();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
function draw(timestamp) {
  requestAnimationFrame(draw);

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.rect(x, 50, 50, 50);
  ctx.fillStyle = "#ffffff";
  ctx.fill();

  x += (timestamp - last) / 10;
  last = timestamp;
}
requestAnimationFrame(draw);

Спасибо за ответы заранее!

Answer 1

Вам нужно сделать несколько вещей. Во-первых, вам нужно создать переменные для каждой вещи, которая может измениться. Это включает size коробки, color коробки и dir действие коробки:

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  x = 0,
  size = 50,
  dir = 1,
  boxColor = "#ffffff",
  last = performance.now();

Переменная dir равна 1, что означает, что она будет принимать текущее направление вашего ящика и умножать его на 1. Если вы хотите изменить направление своей коробки, нам нужно вычесть из x. Это означает, что нам нужно изменить dir на -1 каждый раз, когда ящик попадает в правую стену, и изменить его обратно на 1, когда ящик попадает в левую стену. Для этого мы можем добавить вспомогательную функцию с именем bounce, которая проверяет, передана ли ширина поля + его размер ширине холста. Если это так, мы знаем, что коробка прошла за правую сторону контейнера canvas. Таким образом, мы можем изменить направление ящиков на -1. Мы также можем изменить расположение ящика так, чтобы оно находилось за пределами стены, если ему удалось закрепиться на стене во время движения. Мы можем применить ту же логику для проверки, превосходит ли рамка левый край холста. Во время этой проверки мы также можем изменить size нашего блока так, чтобы он увеличивался при попадании в правую стену и уменьшался при попадании в левую стену:

function bounce() {
    if(x+size > canvas.width) { // if right edge passes the widtth of the canvas, change the dir
    dir *= -1;
    size = 100;;
    x = canvas.width-size; // move the box outside of the wall (boundary)
  } else if(x < 0) {
    dir *= -1;
    size = 50;
    x = 0;
  }
}

И, таким образом, мы также должны изменить наше изменение в x уравнении на:

x += dir*(timestamp - last) / 10;

Наконец, нам нужно добавить способ изменить цвет коробки. Это можно сделать, взяв по модулю (%) позицию x. Если x % 20 равно 0, мы знаем, что наш бокс находится в позиции x, кратной 20, и поэтому мы меняем его цвет. Однако, поскольку позиция x не меняется на 1 каждый раз, нам нужно округлить x, прежде чем мы сделаем эту проверку. Более того, нам нужно дать этой проверке немного свободы, поскольку мы можем пропустить 20 ^th пикселей и, следовательно, никогда не получим кратное 20, поэтому мы можем использовать <=1 в качестве нашего проверять. (Примечание: это не идеальная проверка, но это лучшее, что я могу предложить на данный момент: /):

function color() {
    if(Math.round(x) % 20 <= 1 ) { // if the x divide 20 gives a remainder of 0
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    boxColor = "rgb(" +r +", " +g +", " +b +")";
  } else {
    console.log(Math.round(Math.abs(x)) % 20);
  }
}

См. Пример ниже:

var canvas = document.getElementById('canvas'),
  ctx = canvas.getContext('2d'),
  x = 0,
  size = 50,
  dir = 1,
  boxColor = "#ffffff",
  last = performance.now();
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

function draw(timestamp) {
  bounce();
  color();
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.fillStyle = boxColor;
  ctx.rect(x, canvas.height / 2 - size / 2, size, size);
  ctx.fill();

  x += dir * (timestamp - last) / 10;
  last = timestamp;
  requestAnimationFrame(draw);
}

function bounce() {
  if (x + size > canvas.width) { // if right edge passes the widtth of the canvas, change the dir
    dir *= -1;
    size = 100;
    x = canvas.width - size; // move the box outside of the wall (boundary)
  } else if (x < 0) {
    dir *= -1;
    size = 50;
    x = 0;
  }
}

function color() {
  if (Math.round(x) % 20 <= 1) { // if the x divide 20 gives a remainder of 0
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    boxColor = "rgb(" + r + ", " + g + ", " + b + ")";
  }
}

requestAnimationFrame(draw);

body {
  margin: 0;
}

<canvas id="canvas" style="border: 1px solid black; background-color: black;"></canvas>