Javascript 如何在js中使用on obj创建多个矩形？如何在不同的x轴和y轴上制作它们？

这是我的js

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var keys =[];

var width = 1575,
    height = 700,
    speed = 10,
    score1 = 0,
    NUMFOOD = 10,
    running = true,
    i = 0;


var requestAnimFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;


var randomXSpawn = Math.random() * (width - 8);
var randomYSpawn = Math.random() * (height - 8);

function gameObj(x,y,width,height) {
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);
var food = new gameObj(randomXSpawn,randomYSpawn,3,3);

window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*  
    keys
    up-38
    down-40
    right-39
    left-37

    w-87
    s-83
    a-65
    d-68

    y-89
    h-72
    g-71
    j-74

    5-101
    2-98
    1-97
    3-99
*/
function game(){
    update();
    render();
}
function update(){
    if(keys[87]) player1.y-=speed;
    if(keys[83]) player1.y+=speed;
    if(keys[65]) player1.x-=speed;
    if(keys[68]) player1.x+=speed;

    if(player1.x <0) player1.x=0;
    if(player1.y <0) player1.y=0;
    if(player1.x >= width - player1.width) player1.x = width - player1.width;
    if(player1.y >= height - player1.height) player1.y = height - player1.height;

    if(collision(player1, food)){
        playerColl1 = true;
        process(player1, score1);
        console.log("collision");
    }

    console.log(player1.x, player1.y);
}
function process(player){
    score1++;
    food.x = Math.random() * (width - 8);
    food.y = Math.random() * (height - 8);
    if(score1 >= player.width){
        player.width++;
        player.height++;
        if(speed >= 1){
            speed = speed - 0.1;
            if(speed <= 2){
                speed = 2;
            }
        }
    }       
}

function render(){
    context.clearRect(0,0,width,height);
    context.fillStyle = "black";
    context.fillRect(width/2 - 1,0,1,height);

    context.fillStyle = "blue";
    context.fillRect(player1.x, player1.y, player1.width, player1.height);
    context.fillStyle = "red";
    while(NUMFOOD > i){
        food++;
    }
    context.fillRect(food.x, food.y, food.width, food.height);
    context.fillStyle = "black";

    context.font = "bold 30px helvetica";
    context.fillText(score1, 10,30);
}

function collision(first, second){
    return !(first.x > second.x + second.width ||
        first.x + first.width < second.x ||
        first.y > second.y + second.height||
        first.y + first.height < second.y||
        second.x > first.x + first.width ||
        second.x + second.width < first.x ||
        second.y > first.y + first.height||
        second.y + second.height < first.y);
}

function animate() {
    if (running) {
         game();
    }
    requestAnimFrame(animate);
}
animate();

---

我不知道为什么我不能做多个矩形。有人能帮我吗？谢谢你的帮助。我试图使用while循环，但它不起作用。我正在尝试制作多个食物方块，让我的玩家吃蓝色方块

如果我理解正确，你正在尝试让玩家可以收集多个食物

尝试用这个更新你的js。我在修改的地方添加了评论：

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var keys =[];

var width = 1575,
    height = 700,
    speed = 10,
    score1 = 0,
    NUMFOOD = 10,
    running = true,
    i = 0;


var requestAnimFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;



function gameObj(x,y,width,height) {
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);


// create a list of food items 
var foods = [];
for (var i=0; i< NUMFOOD; i++){
    foods[i]=new gameObj( Math.random() * (width - 8), Math.random() * (height- 8),3,3);
}


window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*  
    keys
    up-38
    down-40
    right-39
    left-37

    w-87
    s-83
    a-65
    d-68

    y-89
    h-72
    g-71
    j-74

    5-101
    2-98
    1-97
    3-99
*/
function game(){
    update();
    render();
}
function update(){
    if(keys[87]) player1.y-=speed;
    if(keys[83]) player1.y+=speed;
    if(keys[65]) player1.x-=speed;
    if(keys[68]) player1.x+=speed;

    if(player1.x <0) player1.x=0;
    if(player1.y <0) player1.y=0;
    if(player1.x >= width - player1.width) player1.x = width - player1.width;
    if(player1.y >= height - player1.height) player1.y = height - player1.height;

    //loop over list of food and check if any hits 
    for (var i=0; i< NUMFOOD; i++){
        if(collision(player1, foods[i])){
            playerColl1 = true;
            // pass food object that has been hit to process 
            process(player1, score1, foods[i]);
            console.log("collision");
         }
    }


    console.log(player1.x, player1.y);
}
function process(player, score1, food){
    score1++;
    food.x = Math.random() * (width - 8);
    food.y = Math.random() * (height - 8);
    if(score1 >= player.width){
        player.width++;
        player.height++;
        if(speed >= 1){
            speed = speed - 0.1;
            if(speed <= 2){
                speed = 2;
            }
        }
    }       
}

function render(){
    context.clearRect(0,0,width,height);
    context.fillStyle = "black";
    context.fillRect(width/2 - 1,0,1,height);

    context.fillStyle = "blue";
    context.fillRect(player1.x, player1.y, player1.width, player1.height);
    context.fillStyle = "red";

    // render all food items 
    for (var i=0; i< NUMFOOD; i++){
        context.fillRect(foods[i].x, foods[i].y, foods[i].width, foods[i].height);
    }

    context.fillStyle = "black";

    context.font = "bold 30px helvetica";
    context.fillText(score1, 10,30);
}

function collision(first, second){
    return !(first.x > second.x + second.width ||
        first.x + first.width < second.x ||
        first.y > second.y + second.height||
        first.y + first.height < second.y||
        second.x > first.x + first.width ||
        second.x + second.width < first.x ||
        second.y > first.y + first.height||
        second.y + second.height < first.y);
}

function animate() {
    if (running) {
         game();
    }
    requestAnimFrame(animate);
}
animate();

#mainCanvas{
    outline: 1px solid black;
    background-color: #bcbcbc;
}

var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");

var keys =[];

var width = 1575,
    height = 700,
    speed = 10,
    score1 = 0,
    NUMFOOD = 10,
    running = true,
    i = 0;


var requestAnimFrame = window.requestAnimationFrame || 
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;



function gameObj(x,y,width,height) {
    this.x=x;
    this.y=y;
    this.width=width;
    this.height=height;
};
var player1 = new gameObj(0,0,10,10);
var player2 = new gameObj(0, 700-10,10,10);


// create a list of food items 
var foods = [];
for (var i=0; i< NUMFOOD; i++){
    foods[i]=new gameObj( Math.random() * (width - 8), Math.random() * (height- 8),3,3);
}


window.addEventListener("keydown", function(e){
    keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e){
    delete keys[e.keyCode];
}, false);

/*  
    keys
    up-38
    down-40
    right-39
    left-37

    w-87
    s-83
    a-65
    d-68

    y-89
    h-72
    g-71
    j-74

    5-101
    2-98
    1-97
    3-99
*/
function game(){
    update();
    render();
}
function update(){
    if(keys[87]) player1.y-=speed;
    if(keys[83]) player1.y+=speed;
    if(keys[65]) player1.x-=speed;
    if(keys[68]) player1.x+=speed;

    if(player1.x <0) player1.x=0;
    if(player1.y <0) player1.y=0;
    if(player1.x >= width - player1.width) player1.x = width - player1.width;
    if(player1.y >= height - player1.height) player1.y = height - player1.height;

    //loop over list of food and check if any hits 
    for (var i=0; i< NUMFOOD; i++){
        if(collision(player1, foods[i])){
            playerColl1 = true;
            // pass food object that has been hit to process 
            process(player1, score1, foods[i]);
            console.log("collision");
         }
    }


    console.log(player1.x, player1.y);
}
function process(player, score1, food){
    score1++;
    food.x = Math.random() * (width - 8);
    food.y = Math.random() * (height - 8);
    if(score1 >= player.width){
        player.width++;
        player.height++;
        if(speed >= 1){
            speed = speed - 0.1;
            if(speed <= 2){
                speed = 2;
            }
        }
    }       
}

function render(){
    context.clearRect(0,0,width,height);
    context.fillStyle = "black";
    context.fillRect(width/2 - 1,0,1,height);

    context.fillStyle = "blue";
    context.fillRect(player1.x, player1.y, player1.width, player1.height);
    context.fillStyle = "red";

    // render all food items 
    for (var i=0; i< NUMFOOD; i++){
        context.fillRect(foods[i].x, foods[i].y, foods[i].width, foods[i].height);
    }

    context.fillStyle = "black";

    context.font = "bold 30px helvetica";
    context.fillText(score1, 10,30);
}

function collision(first, second){
    return !(first.x > second.x + second.width ||
        first.x + first.width < second.x ||
        first.y > second.y + second.height||
        first.y + first.height < second.y||
        second.x > first.x + first.width ||
        second.x + second.width < first.x ||
        second.y > first.y + first.height||
        second.y + second.height < first.y);
}

function animate() {
    if (running) {
         game();
    }
    requestAnimFrame(animate);
}
animate();