Javascript 一次移动一个图像块的位置

我想知道如何将我的图片（绿色块）沿着已经创建的块一次移动一个块，我想不使用setinterval，比如通过for循环或if语句来增加x或其他什么，有什么建议吗？ 这里是一个指向JSFIDLE的链接

var行=20；
var-cols=10；
变量大小=32；
功能绘图板（）{
ctx.fillStyle=“#d3d3”；
ctx.fillRect（0,55320400）；
var colors=['#FFFFFF'，'#000000']；
var方块=颜色；
var平方=0；
canvas=document.getElementById（'gameCanvas'）；
canvas_width=canvas.width；
canvas_height=canvas.height；
对于（var row=0；row没有足够的cred来发表评论，但是这里有一个Javascript游戏循环的很好的例子（我已经为自己的目的使用/稍微修改了这个例子）（参见yckart的回答）：检查一下，看看这是否有帮助

编辑：我已经将你的小提琴分叉，并添加了一个非常基本的循环-只需调用setInterval，它就会一遍又一遍地调用main（）函数，并允许我们每次在新位置绘制绿色正方形-并删除了绿色正方形的图像加载（为什么不使用绿色矩形，就像你已经在板上做的那样？）

我已经删除了一些冗余，我认为，简化了一些事情

在这里查看：

基本要点是（虽然我在这里没有边界检查，但它在小提琴中）：

正如我提到的，这是在JS中进行游戏循环的一种非常简单的方法，有更好的方法。请参阅我上面链接的答案，以获得更好的解决方案，它使用浏览器的优化方法requestAnimationFrame（）

希望这有帮助！
什么会触发块移动？请看，就是这样，我需要它自己发生，以便它在加载页面时开始，这将一直持续到我最终到达它的结尾，我将稍后再做。
var rows = 20;
var cols = 10;
var size = 32;
function drawBoard(){
    ctx.fillStyle="#D3D3D3";
ctx.fillRect( 0,55,320, 400);
    var colors = ['#FFFFFF','#000000'];
       var squares = colors;
var square = 0;
canvas = document.getElementById('gameCanvas');
canvas_width = canvas.width;
canvas_height = canvas.height;
for(var row=0; row<rows; row++) {
    for(var col=0; col<cols; col++) {
        var x = col*size;
        var y = row*size;

        ctx.fillStyle = squares[square++%colors.length];
        ctx.fillRect(x,y,size,size);



    }
    square += colors.length-1;
}
}

var logo2 = new Image();
logo2.src = 'http://hdwallphotos.com/wp-content/uploads/2014/02/Green-Background-Image-CSS-Wallpaper.png'

function blocks(){
logo2.onload = function(){
canvas = document.getElementById('gameCanvas');
ctx = canvas.getContext('2d');
for(var row=0; row<rows; row++) {
    for(var col=0; col<cols; col++) {
        var x = col;
        var y = row;

ctx.drawImage(logo2, x,y,23,13);
    }

}
};
}

function main() {
    drawBoard();
    drawGreenBlock();
    y++;
}

setInterval(main, 30);