防止javascript访问不存在的数组

时间：2018-02-01 12:48:09

标签： javascript arrays 

var gameMap = [ [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
                [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
                [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1],
                [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1],
                [1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1],
                [1,1,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
                [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1] ]
var can = document.getElementById('gc')
var c = can.getContext('2d')
var di = null
var start = [0,0]
var end = [5,5]
document.addEventListener('keydown',keydown)
document.addEventListener('keyup',keyup)
function update() {
  c.clearRect(0,0,can.width,can.height)
  switch(di) {
    case 'left':
      start[0] -= 1
      end[0] -= 1
    break; 
    case 'up':
      start[1] -= 1
      end[1] -= 1
    break;
    case 'right':
      start[0] += 1
      end[0] += 1
    break;
    case 'down':
      start[1] += 1
      end[1] += 1 
    break;
  }
  if(start[0]<0) {
    start[0] = 0;
  }if(start[1]<0) {
    start[1] = 0
  }if(end[0]>20) {
    end[0] = 20
  }if(end[1]>20) {
    end[1] = 20
  }
  can.style.border = '1px black solid'
  map()
  requestAnimationFrame(update)
}
requestAnimationFrame(update)
function keydown(evt) {
  switch(evt.keyCode) {
    case 37:
      di = 'left'
    break;
    case 38:
      di = 'up'
    break;
    case 39:
      di = 'right'
    break;
    case 40:
      di = 'down'
    break;
  }
}
function keyup() {
  di = null
}
function map() {
  var mapx = 0
  var mapy = 0
  for(var i = start[1]; i<end[1]; i++) {
    for(var j = start[0]; j<end[0]; j++) {
      switch(gameMap[i][j]) {
        case 1: 
          c.fillRect(mapx,mapy,30,30)
        break;
        case 0:
        break;
      }
    mapx+=30
    }
    mapy+=30
    mapx = 0
  }
}
<!doctype html>
<html>
<canvas id='gc' width=200 height=200></canvas>
</html>

我们有一张瓷砖地图
我们有一个开始和结束
和绘图功能。
当'di'（方向）超出阵列时，屏幕将变为白色 所以我试图通过确保start [0]，start [1]，end [0]，end [1]不超过数组来防止它。
但是，绘图减少了（尝试从代码段中的数组中删除）
为什么会这样？

2 个答案:

答案 0 :(得分：1)

如果窗格超出范围，您需要进行一些调整。

调整基于窗格宽度或高度以及数据数组大小。

我建议首先在运行时调用requestAnimationFrame，然后在事件之后调用。

Mabe你合并map和update实际上它不清楚，它们的用途是什么，特别是因为它们都处理画布操作。

function update() {
    can.style.border = '1px black solid';
    map();
}

function keydown(evt) {
    di = { 37: 'left', 38: 'up', 39: 'right', 40: 'down' }[evt.keyCode];
    switch (di) {
        case 'left':
            start[0]--;
            end[0]--;
            break;
        case 'up':
            start[1]--;
            end[1]--;
            break;
        case 'right':
            start[0]++;
            end[0]++;
            break;
        case 'down':
            start[1]++;
            end[1]++;
            break;
    }
    if (start[0] < 0) {
        start[0] = 0;
        end[0] = paneWidth;
    }
    if (start[1] < 0) {
        start[1] = 0;
        end[1] = paneHeight;
    }
    if (end[0] > gameMap[0].length) {
        start[0] = gameMap[0].length - paneWidth;
        end[0] = gameMap[0].length;
    }
    if (end[1] > gameMap.length) {
        start[1] = gameMap.length - paneHeight;
        end[1] = gameMap.length;
    }
    requestAnimationFrame(update);
}

function keyup() {
    di = null;
}

function map() {
    var mapx = 0,
        mapy = 0;

   c.clearRect(0, 0, can.width, can.height);
   for (var i = start[1]; i < end[1]; i++) {
        for (var j = start[0]; j < end[0]; j++) {
            switch (gameMap[i][j]) {
                case 1:
                    c.fillRect(mapx, mapy, 30, 30);
                    break;
                case 0:
                    break;
            }
            mapx += 30;
        }
        mapy += 30;
        mapx = 0;
    }
}

var gameMap = [
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
        [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
        [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1],
        [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1],
        [1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1, 1, 1],
        [1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],
        [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
    ],
    can = document.getElementById('gc'),
    c = can.getContext('2d'),
    di = null,
    paneWidth = 6,
    paneHeight = 6,
    start = [0, 0],
    end = [paneWidth, paneHeight];

document.addEventListener('keydown', keydown);
document.addEventListener('keyup', keyup);

requestAnimationFrame(update);
<canvas id="gc" width="180" height="180"></canvas>

答案 1 :(得分：0)

您需要执行8个约束，并且只执行4个。

EG。您的代码确保start[0] >= 0但不确保start[0] < 20。

相关问题
最新问题