Создание змеи без мыши или событий клавиатуры

Question

Я пытаюсь создать анимацию с холстом и javascript. Я хотел бы воссоздать змею, которая бежит на границе моего холста, не назначая никакого события мыши или клавиатуры. На данный момент я смог переместить свой прямоугольник слева направо, но я не могу понять, как он может двигаться вниз. Любое предложение? Вот мой код:

function drawRectangle(myRectangle, context) { 
context.beginPath(); 
context.rect(myRectangle.x, myRectangle.y, myRectangle.width,  myRectangle.height); 
context.fillStyle = '#FB0202'; 
context.fill(); 

} 

function animateUp(myRectangle, canvas, context, startTime) { 
// update 
var time = (new Date()).getTime() - startTime; 

var linearSpeed = 100; 
// pixels/second 
var newX = linearSpeed * time/1000; 

if (newX < canvas.width - myRectangle.width/2) { 
    myRectangle.x = newX; 
} 

// clear 
context.clearRect(0, 0, (canvas.width - 20), canvas.height); 

drawRectangle(myRectangle, context); 


// request new frame 
requestAnimFrame(function() { 
    animateUp(myRectangle, canvas, context, startTime); 
}); 
} 

    function animateDown(myRectangleDown, canvas, context, startTime) { 
    // update 
    var time = 0; 

    var linearSpeed = 100; 
    // pixels/second 
    var newY = linearSpeed * time/1000; 

    if (newY < canvas.height - myRectangleDown.height/2) { 
     myRectangleDown.y = newY; 
    } 
    // clear 
    context.clearRect(10, 0, (canvas.height - 20), canvas.width); 

    drawRectangle(myRectangleDown, context); 


    // request new frame 
    requestAnimFrame(function() { 
    animateDown(myRectangleDown, canvas, context, startTime); 
    }); 
} 

var canvas = document.getElementById('canvas'); 
var context = canvas.getContext('2d'); 

var myRectangle = { 
    x: 0, 
    y: 0, 
    width: 20, 
    height: 20 
}; 

var myRectangleDown = { 
    x: 480, 
    y: 0, 
    width: 20, 
    height: 20 
} 

drawRectangle(myRectangle, context); 

// wait one second before starting animation 
setTimeout(function() { 
    var startTime = (new Date()).getTime(); 
    animateUp(myRectangle, canvas, context, startTime); 
}, 1000);` 

https://jsfiddle.net/zfy5atog/

Answer 1

Вам просто нужно изменить значение Y вашего прямоугольника, а не X.

меняющегося эту строку в функции animateUp из коробки двигаться вниз в вашем jsFiddle

if (newX < canvas.width - myRectangle.width/2) { 
    myRectangle.y = newX; 
}