var colors = ['blue', 'red'];

var grid = [];
var heroX = 2, posX = 225;
var whereInGrid = 993, offsetY = 0;

for (let i=0; i<1000; ++i){
    grid[i] = [];
    for (let j=0; j<5; ++j){
        grid[i][j] = colors[Math.floor(Math.random()*2)]
    }
}

function update() {
    if (posX < heroX*100 + 25){
        posX += 5;
    }
    if (posX > heroX*100 + 25){
        posX -= 5;
    }
    if (offsetY > 0){offsetY -= 5;}
    if (offsetY < 0){offsetY += 5;}
}

function draw() {
    for (let i=-1; i<7; ++i){
        for (let j=0; j<5; ++j){
            context.fillStyle = grid[whereInGrid + i][j];
            context.fillRect(j*100, i*100+offsetY, 99, 99);
        }
    }
    context.fillStyle = 'green';
    context.fillRect(posX, 325 , 50, 50);
    // This is how you draw a rectangle
};

function keyup(key) {
    if (posX != 100*heroX+25 || offsetY!=0){return;}
    // Show the pressed keycode in the console
    if (key == key_left){--heroX;}
    if (key == key_right){++heroX;}
    if (key == key_up){--whereInGrid; offsetY=-100;}
    if (key == key_down){++whereInGrid; offsetY=100;}
    console.log("Pressed", key);
};

function mouseup() {
    // Show coordinates of mouse on click
    console.log("Mouse clicked at", mouseX, mouseY);
};