Html Canvas случайная начальная позиция для перемещения после

Question

Я сейчас изучаю JavaScript.

Я хочу, чтобы случайная начальная позиция куба поднималась и опускалась. Это заставит кубы прыгать вверх и вниз по оси Y.

Я хочу, чтобы кубики двигались вверх и вниз

Изображение

может быть так:

Y = Y + speed;
if(Y <= 0) {
    speed = -speed;
}
if(Y >= canvas.width) {
    speed = -speed;
}

Так вот мой код:

window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
draw();
}
function draw(){
    canvasContext.fillStyle = "white";
    canvasContext.fillRect(0,0,canvas.width,canvas.height, "#cc33ff");
    for (var i=0; i <= 50; i++) {
        var randX = Math.floor(Math.random() * 800);
        X = randX;
        var randY = Math.floor(Math.random() * 600);
        Y = randY;
        speed = 10;
        var colorArray = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF6666'];    
        var randColor = colorArray[Math.floor(Math.random() * colorArray.length)];    
        canvasContext.beginPath();
        canvasContext.rect(X, Y, 20, 20);   
        canvasContext.fillStyle = randColor;
        canvasContext.fill();
        canvasContext.strokeStyle = "black";
        canvasContext.stroke();
        canvasContext.closePath();
    }
}

Answer 1

В этом случае вам нужно будет сохранить ваши квадраты в массиве. Вам также понадобится функция для обновления положения квадратов. В своем ответе я использую функцию, которая обновляет все квадраты, и другую, которая рисует все квадраты. Лучшим решением было бы использовать функцию, которая рисует или обновляет один квадрат, и вызывать эту функцию для каждого квадрата.

var cw,ch,w = 20;
var squares = []

canvas = document.getElementById('gameCanvas');
// set the canvas width and height
cw = canvas.width = 800;
ch = canvas.height = 600;
canvasContext = canvas.getContext('2d');

for (var i=0; i <= 50; i++) {
  // make a new square object
  var sq = {}
        var randX = Math.floor(Math.random() * (cw - w));
        sq.X = randX;
        var randY = Math.floor(Math.random() * (ch - w));
        sq.Y = randY;
        sq.speed = 1;
        var colorArray = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF6666'];    
        var randColor = colorArray[Math.floor(Math.random() * colorArray.length)]; 
        sq.color = randColor;
        // push the new square object into the squares array
        squares.push(sq);

    }

function Draw() {
// to animate the squares you will need to use the requestAnimationFrame method
window.requestAnimationFrame(Draw);
canvasContext.clearRect(0,0,cw,ch);

draw();
update();
}

Draw();

function draw(){
    canvasContext.fillStyle = "white";
    canvasContext.fillRect(0,0,canvas.width,canvas.height);
    for (var i=0; i < squares.length; i++) {
        var sq = squares[i];
        canvasContext.beginPath();
        canvasContext.rect(sq.X, sq.Y, w, w);   
        canvasContext.fillStyle =sq.color;
        canvasContext.fill();
        canvasContext.strokeStyle = "black";
        canvasContext.stroke();
        canvasContext.closePath();
    }
}

function update(){
// a function to update the squares position with every frame.
  for (var i=0; i < squares.length; i++) {
        var sq = squares[i];
        if(sq.Y >= ch - w || sq.Y <= 0){sq.speed *= -1;}
        sq.Y += sq.speed;
}
}

<canvas id="gameCanvas"></canvas>

Answer 2

Это не работает на моем компьютере, но на JsFidlle:

Answer 3

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