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

Question

我正在使用 Node.js 制作一个基本的老式蛇游戏来学习。现在不是一次出现一个“食物块”，而是尝试每秒产生一个额外的“食物块”。现在我有多个带有 X、Y 坐标的“食物块”，我必须将它们发送给客户端。如果不发送大量 100x100 的真假数组，我将如何做到这一点？

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] = delete（不是假的，只是从数组/对象中删除）

3) 将一包食物寄给客户

排放（食物）

客户

接收food 变量并执行以下操作： //绘制所有当前可用的食物块 for(var i = 0; i

P.S - 对不起，如果代码混乱和问题有点模糊，大脑被炸了

Answer 1

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

客户会负责移除任何吃掉的食物块。