昨天是把整張地圖繪製出來，不過這樣一下子就能看清長張地圖的路線，缺乏了挑戰性，這邊要將地圖可視範圍縮小，縮小成一次只能看到5*5塊磚的大小．
那要修改一下畫面的繪製．
首先就是先把canvas的大小做個修改

<canvas id="playground" width="200" height="200"></canvas>

// 負責畫畫
draw = () => {
    // background
    drawRectangle(0, 0, canvas.width, canvas.height, 'black');

    // 小畫面的地圖
    drawMapInShadow();

    // 畫地圖
    // drawMap();
}

顯示的function換一下

// 視線範圍
var map_x = 0.0;
var map_y = 0.0;

 // 小畫面地圖
drawMapInShadow = () => {
    var mapLeftCol = Math.floor(map_x / MAP_BRICKS);
    var mapTopRow = Math.floor(map_y / MAP_BRICKS);

    var colFitOnScreen = Math.floor(canvas.width / MAP_BRICKS);
    var rowFitOnScreen = Math.floor(canvas.height / MAP_BRICKS);

    var mapRightCol =  mapLeftCol + colFitOnScreen + 1;
    var mapBottomRow = mapTopRow + rowFitOnScreen + 1;

    for(var col = mapLeftCol; col < mapRightCol; col++) {
        for(var row = mapTopRow; row < mapBottomRow; row++) {
            if(mapBrick(col, row)) {
                drawRectangle(
                    col * MAP_BRICKS,
                    row * MAP_BRICKS,
                    MAP_BRICKS - BRICK_SPACING,
                    MAP_BRICKS - BRICK_SPACING,
                    'gray'
                    )
            }
        }
    }
}

接下來只需要操控map_x以及map_y就能移動可是範圍地圖了，先來做個測試．

// 移動速度
const MOVE_SPEED = 2.5;

// 負責處理動作
move = () => {
    map_x += MOVE_SPEED;
    map_y += MOVE_SPEED;
}

會看到

ＯＫ 那明天就加入玩家控制的角色