[Day26]用Canvas打造自己的游乐场-labyrinth 迷雾效果

昨天是把整张地图绘制出来，不过这样一下子就能看清长张地图的路线，缺乏了挑战性，这边要将地图可视范围缩小，缩小成一次只能看到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;
}

会看到

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