个人中心
gpt4 book ai didi

javascript - 防止javascript访问不存在的数组

转载 作者：行者123 更新时间：2023-11-29 23:27:29 25 4
gpt4 key购买 nike 

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>

我们有一张瓦片 map
我们有开始也有结束
以及绘制 map 功能。
当'di'(方向)超过数组时，屏幕将变为白色。
所以我试图通过确保 start[0]、start[1]、end[0]、end[1] 不超过数组来防止它。
但是，绘图被缩小了(尝试在片段中走出数组)
为什么会这样？

最佳答案

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

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

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

也许您将 map 和 update 组合在一起，实际上并不清楚它们的用途，尤其是因为两者都处理 Canvas 操作。

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>

关于javascript - 防止javascript访问不存在的数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48563151/

25 4 0
文章推荐： java - Document.getString 没有给出输出 (Firestore)
文章推荐： javascript - 限制特殊字符中的某些字符
文章推荐： android - 我在注册 BroadcastReceiver 后立即收到 "android.net.wifi.WIFI_STATE_CHANGED"
文章推荐： javascript - JavaScript 是否保证声明期间的对象属性顺序？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com