console 命令行工具 X clear

console

var i;
var j;

window.onload = function (){
    gamemap();
}

var mapimg = new Image();
var map = [
    [3,3,3,3,3,3,2,2,2,3,3,3,2],
    [2,1,3,3,0,0,0,0,0,0,0,0,0],
    [2,0,0,0,0,0,0,0,0,0,0,0,2],
    [2,0,0,0,0,0,0,0,0,0,3,0,2],    
    [3,3,0,0,0,0,0,0,0,0,2,0,2],
    [3,3,0,0,0,0,2,2,3,3,2,0,2],
    [2,3,3,3,0,0,0,0,0,0,0,0,3],
    [2,3,3,3,0,0,0,0,0,0,0,0,3],
    [0,0,0,3,0,0,3,3,2,2,3,0,0],
    [2,0,0,3,0,0,0,0,0,0,0,0,0],
    [3,0,0,3,3,3,0,0,3,3,3,0,3],
    [3,0,0,0,0,0,0,0,0,0,0,0,3],
    [2,2,2,2,2,3,3,3,0,0,3,3,3],
];
//创建构成地图的二维数组

function gamemap(){
    var canvas = document.getElementById("map");
    var context = canvas.getContext("2d");
    
    mapimg.src = "https://images.cnblogs.com/cnblogs_com/ducle/412065/r_map.png";    

    mapimg.onload = function(){
        context.fillRect(0, 0, 416, 416);
        //画一个长416，宽416的矩形

        for(i = 0; i < 13; i++){
            for(j = 0; j < 13; j++){
                drawTile(i*32, j*32, map[j][i]);
            }
        }
        //循环调用绘制地图的函数，直到画完为止
    }
}

function drawTile(x, y, type){
    var canvas = document.getElementById("map");
    var context = canvas.getContext("2d");
    context.drawImage(mapimg, typeOfpe*32, 0, 32, 32, x, y, 32, 32);
}
//画地图的函数
var dir="";
var currentPos=[1,1];

function move(){
   // if(dir=="down"&&map[currentPos[0]][currentPos[1]]==0){
   //    // currentPos=[currentPos.x,currentPos.y+1];
   //    // map[currentPos.x,currentPos.y+1]=1;
   //    // map[currentPos.x,currentPos.y]=0;
   //    // gamemap();
   // }
}

document.onkeydown = function(ev){
                var ev = ev || window.event;
                switch(ev.keyCode){
                    case 37:
                    case 100:
                       dir="left";
                       move();
                    break;
                    case 38:
                    case 104:
                       dir="top";
                       move();
                    break;
                    case 39:
                    case 102:
                       dir=right;
                       move();
                    break;
                    case 40:
                    case 98:
                       dir="down";
                        move();
                      console.log("down")
                    break;
                 }
};

<!DOCTYPE html>
<html>
<head>
<title>html5 map</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript" src="./map.js"></script> 
</head>
<body>
    <canvas id="map" width="415px" height="415px" style="border: 1px solid gray;"></canvas>
</body>
</html>