Wsrtjtyk

I am currently learning JavaScript.

I want the random start position of the cube to go up and down. This will cause the cubes to jump up and down on the Y axis.

I want the cubes to move up and down

Picture

maybe like that:

Y = Y + speed;

if(Y <= 0) {

    speed = -speed;

}

if(Y >= canvas.width) {

    speed = -speed;

}

So that's my code:

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();

    }

}

I think what you need to do is have an initialisation routine to determine the starting random position and then another to handle the up/down movement. What you have now is merely handling initialisation but not handling the next animation frame etc.

In this case you would need to save your squares in an array. You will also need a function to update the squares position. In my answer I'm using a function that updates all the squares and an other one that draws all the squares. A better solution would be to use the a function that draws or updates a single square, and to call that function for each square.

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>

It doesnt't work on my Computer but on JsFidlle: