Блог

Я хочу создать прорывную игру с помощью javascript. Мне интересно, почему ctx.clearRect не работает. Я хочу поместить прямоугольник в координату y 430, чтобы он отображался в нижней части холста. Он перемещается, когда я использую window.setInterval. Но прямоугольник непрерывно перемещается. Будем признательны за любую помощь. Извините за мой плохой английский.

  var canvas = document.getElementById("canvas");
 const ctx = canvas.getContext('2d');

 var position = 0;
 var yposition = 430;
 var length = 80;
 var width = 20;
 var xSpeed = length*1;
 var ySpeed = 0;

function R(){
  ctx.fillStyle = "green";
  ctx.fillRect(position, yposition, length, width);
};

function C(){
  position  = xSpeed; 
  yposition  = ySpeed;
};

 window.setInterval(() => {
 ctx.clearRect(0, 430, length, width);
   R();
   C();
},150);

ctx.beginPath();
ctx.arc(150, 50, 20, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = "blue";
ctx.fill();
  

Виновником являются параметры, которые вы вводите в функцию clearRect:

 (0, 430, length, width)
  

Поскольку длина и ширина являются жестко заданными значениями 80 и 20 соответственно, вышеуказанное означает, что каждый раз, когда запускается функция обратного вызова intervals, она очищает прямоугольную область размером 80 x 20 пикселей при x = 0 и y = 430.

Когда ваша зеленая панель перемещается, вы фактически очищаете область, в которой ваша панель больше не находится.

Итак, у вас в основном есть два варианта:

1. Очистите весь холст от каждого кадра
2. Очистите область экрана, в которой была ваша панель управления, прежде чем менять ее положение

Второй вариант выглядел бы примерно так:

 var canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');

var position = 0;
var yposition = 150;
var length = 80;
var width = 20;
var xSpeed = length * 1;
var ySpeed = 0;

function R() {
  ctx.fillStyle = "green";
  ctx.fillRect(position, yposition, length, width);
}

function C() {
  position  = xSpeed;
  yposition  = ySpeed;
}

window.setInterval(() => {
  ctx.clearRect(position, yposition, length, width);
  C();
  R();
}, 500);  

 <canvas id="canvas" width="600" height="400"></canvas>  

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