javascript - HTML 5 Canvas - 在 Javascript 中为数组/对象分配坐标值的正确方法

Question

我正在使用 Node.js 制作一个基本的老式蛇游戏来学习。现在，我尝试每秒生成一个额外的“食物 block ”，而不是一次显示一个“食物 block ”。现在我有多个带有 X、Y 坐标的“食物 block ”，我必须将它们发送给客户端。在不发送大量 100x100 true 和 false 的情况下，我该如何完成此任务？

JAVASCRIPT

//Game is 100 by 100

var food = ?;//An array which stores the X & Y coordinates of all spawned food

if(foodEaten){
    removeFood(foodEatenX, foodEatenY);
}
//Call once every second
spawnFood();

socket.emit('foodPositions', food);//send the `food` array to client

function spawnFood(){
    var foodX,
        foodY,
        flag = false;

    while(!flag){
        foodX = Math.floor(Math.random() * 100),
        foodY = Math.floor(Math.random() * 100);

        if(map[foodX][foodY].claim == "empty"){
            flag = true;
            map[foodX][foodY].claim = "notempty";

            /*
            --CODE HERE TO ADD for `food` variable
            */
        }
    }
}
function removeFood(x, y){
    //remove food coordinates in array
}

简化

--不一定按指定顺序

1) 生成食物@随机 x/y 坐标(每秒一次)

食物[x][y] = true

2)删除食物@ x/y 坐标(每当我想要时(例如，当食物被“吃掉”时)

food[x][y] = 删除(不是 false，只需从数组/对象中删除)

3)将一包食物发送给客户

排放(食物)

客户端

接收food变量并执行以下操作: //绘制当前所有可用的食物 block for(var i = 0; i < food.length; i++) 绘制图像(食物图像，食物X，食物Y)

P.S - 抱歉，如果代码困惑并且问题有点模糊，大脑就炸了

Answer 1

我会尝试使用“食物 block ”列表，每个食物 block 都有其坐标(小于 100x100 元素的数组)。

客户将负责清除所有吃过的食物 block 。