Javascript 在画布上，一种让游戏中多个苹果掉落的方法？

我正在创建一个游戏（使用HTML5画布），其中包括抓取掉落的苹果，我知道，多么原创！我很难找到一个方法，使它这么多苹果下降

以下是指向JSFIDLE的链接：

var苹果x=100；
var apple_y=0；
var_x=100；
var_y=100；
var点=0；
var basket_img=新图像（）；
篮子_img.src=”http://s18.postimg.org/h0oe1vj91/basket.png";
var Countable=函数（）{}
//画布的背景色
var c=document.getElementById（“c”）；
var ctx=c.getContext（“2d”）；
ctx.fillStyle=“#000”；
ctx.fillRect（0,0500500）；
//下面是事件侦听器
c、 addEventListener（“mousemove”，seenmove，false）；
//////////////////////
函数seenmotion（e）{
//这是鼠标的代码
//在画布上移动。
var bounding_box=c.getBoundingClientRect（）；
basket_x=（e.clientX-bounding_box.left）*（c.width/bounding_box.width）-basket_img.width/2；
篮框y=（e.clientY-包围盒顶部）*（c.高度/包围盒高度）-篮框高度/2；
}
函数启动_game（）{
设置间隔（游戏循环，50）；
}
函数博弈_循环（）{
//上面的代码每50ms调用一次，是一个
//帧重画游戏动画循环。
c、 宽度=c.宽度；
//下面是绘制对象的代码
画苹果（苹果x，苹果y）；
抽篮（抽篮x、抽篮y）；
//下面是更新引出序号位置的代码
苹果y++；
如果（苹果>c.宽度）{
苹果x=0；
}
//这是碰撞检测代码
如果（碰撞（苹果x，苹果y，篮子x，篮子y））{
点数-=0.5；
}
//这是积分系统的代码
积分+=1；
//让我们把它贴在右上角。
var integerpoints=Math.floor（points）；//将其转换为整数
ctx.font=“bold 24px无衬线”；
ctx.fillText（整数点，c.宽度-50,50）；
}
clearRect（0,0500500）；
函数冲突（basket_x，basket_y，apple_x，apple_y）{
如果（苹果年+85<篮子年）{
返回false；
}
如果（苹果y>篮子y+91）{
返回false；
}
如果（苹果x+80<篮子x）{
返回false；
}
如果（苹果>篮子+80）{
返回false；
}
返回true；
}
//结束游戏后停止游戏的代码
函数stop_game（）{
}
//球的代码
函数绘图（x，y）{
var apple_img=新图像（）；
apple_img.src=”http://s15.postimg.org/3nwjmzsiv/apple.png";
ctx.drawImage（苹果图片，x，y）；
}
//篮子的代码
功能绘图篮（x，y）{
ctx.drawImage（篮形图，x，y）；
}

您的下一个逻辑步骤是创建一个具有适当属性的apple

对象。然后，您可以将它们存储在
数组中
并为多个苹果设置动画。
正如杰拉德所说，您应该创建一个苹果
对象的
数组
。你可以看一看而不是苹果

如果你已经完成了，我建议你在不同的屏幕外画布上画出所有以相同速度落下的苹果，如果你打算添加很多苹果的话，你应该给它们设置动画，而不是一个苹果一个苹果地画。如果它们都以相同的速度下落，只需使用一块屏幕外画布，然后一次移动所有物体

另外，还可以看看您是否难以将FPS保持在适当的速率。
我在您的上一个问题中发布了这一点，因此我将在这里重复。您需要维护一个苹果数组，但您还需要签出
requestAnimationFrame
，以提高性能。事情会让你感到不安，当你移动水桶时，你可能已经注意到了。我已经修改了你的提琴，以准确地演示如何修改你的程序来支持多个苹果以不同的速度下落。（将
apples\u per\u level
设置为2个或更多，可以立即看到多个苹果——或者只是玩游戏，观察它们的累积！）


改善措施包括：


固定记分牌
增加等级提升（每10个苹果等级提升一次）
允许屏幕上有更多的苹果（玩到9级）
苹果会以不同的速度落下，随着水位的升高，落下的速度也会加快
将动画帧系统用于更平滑的动画
轻松的碰撞处理（铲斗中心必须接触苹果）

随着水位上升，一切都变得很愚蠢，但是
var apple_x = 100;
var apple_y = 0;
var basket_x = 100;
var basket_y = 100;
var points = 0;

var basket_img = new Image();
basket_img.src = "http://s18.postimg.org/h0oe1vj91/basket.png";

var Countable = function() {}

     //Background colour of canvas
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.fillStyle = "#000";
ctx.fillRect(0, 0, 500, 500);

     //Here is the event listener
c.addEventListener("mousemove", seenmotion, false);



                        //////////////////////

      function seenmotion(e) {

            //This is the code for the mouse 
            //moving over the canvas.
       var bounding_box = c.getBoundingClientRect();
       basket_x = (e.clientX - bounding_box.left) * (c.width / bounding_box.width) - basket_img.width / 2;
       basket_y = (e.clientY - bounding_box.top) * (c.height / bounding_box.height) - basket_img.height / 2;
                        }

                        function start_game() {
                            setInterval(game_loop, 50);
                        }


                        function game_loop() {
                            // The code above is called every 50ms and is a 
                            // frame-redraw-game-animation loop.

                            c.width = c.width;

                            // Below is the code that draws the objects
                            draw_apple(apple_x, apple_y);
                            draw_basket(basket_x, basket_y);

                            // Below is the code that updates the balloons location
                            apple_y++;
                            if (apple_x > c.width) {
                                apple_x = 0;
                            }

                            //Here is the collision detection code
                            if (collision(apple_x, apple_y, basket_x, basket_y)) {
                                points -= 0.5;
                            }


                            //Here is the code for the point system
                            points += 1;

                            // and let's stick it in the top right. 
                            var integerpoints = Math.floor(points); // make it into an integer
                            ctx.font = "bold 24px sans-serif";
                            ctx.fillText(integerpoints, c.width - 50, 50);
                        }



                        context.clearRect(0, 0, 500, 500);

                        function collision(basket_x, basket_y, apple_x, apple_y) {
                            if (apple_y + 85 < basket_y) {
                                return false;
                            }
                            if (apple_y > basket_y + 91) {
                                return false;
                            }
                            if (apple_x + 80 < basket_x) {
                                return false;
                            }
                            if (apple_x > basket_x + 80) {
                                return false;
                            }

                            return true;
                        }

                        // Code to stop the game when we're finished playing
                        function stop_game() {

                        }

                        //Code for the ball
                        function draw_apple(x, y) {
                            var apple_img = new Image();
                            apple_img.src = "http://s15.postimg.org/3nwjmzsiv/apple.png";
                            ctx.drawImage(apple_img, x, y);

                        }

                        //Code for the basket
                        function draw_basket(x, y) {
                            ctx.drawImage(basket_img, x, y);

                        }

var game = create_game();
game.init();

function create_game() {
    debugger;
    var level = 1;
    var apples_per_level = 1;
    var min_speed_per_level = 1;
    var max_speed_per_level = 2;
    var last_apple_time = 0;
    var next_apple_time = 0;
    var width = 500;
    var height = 500;
    var delay = 1000;
    var item_width = 50;
    var item_height = 50;
    var total_apples = 0;
    var apple_img = new Image();
    var apple_w = 50;
    var apple_h = 50;
    var basket_img = new Image();
    var c, ctx;

    var apples = [];
    var basket = {
        x: 100,
        y: 100,
        score: 0
    };

    function init() {
        apple_img.src = "http://s15.postimg.org/3nwjmzsiv/apple.png";
        basket_img.src = "http://s18.postimg.org/h0oe1vj91/basket.png";

        level = 1;
        total_apples = 0;
        apples = [];

        c = document.getElementById("c");
        ctx = c.getContext("2d");
        ctx.fillStyle = "#000";
        ctx.fillRect(0, 0, 500, 500);

        c.addEventListener("mousemove", function (e) {
            //moving over the canvas.
            var bounding_box = c.getBoundingClientRect();
            basket.x = (e.clientX - bounding_box.left) * (c.width / bounding_box.width) - basket_img.width / 2;
            basket.y = (e.clientY - bounding_box.top) * (c.height / bounding_box.height) - basket_img.height / 2;
        }, false);

        setupApples();
        requestAnimationFrame(tick);
    }

    function setupApples() {
        var max_apples = level * apples_per_level;
        while (apples.length < max_apples) {
            initApple(apples.length);
        }
    }

    function initApple(index) {
        var max_speed = max_speed_per_level * level;
        var min_speed = min_speed_per_level * level;
        apples[index] = {
            x: Math.round(Math.random() * (width - 2 * apple_w)) + apple_w,
            y: -apple_h,
            v: Math.round(Math.random() * (max_speed - min_speed)) + min_speed,
            delay: Date.now() + Math.random() * delay
        }
        total_apples++;
    }

    function collision(apple) {
        if (apple.y + apple_img.height < basket.y + 50) {
            return false;
        }
        if (apple.y > basket.y + 50) {
            return false;
        }
        if (apple.x + apple_img.width < basket.x + 50) {
            return false;
        }
        if (apple.x > basket.x + 50) {
            return false;
        }

        return true;
    }

    function maybeIncreaseDifficulty() {
        level = Math.max(1, Math.ceil(basket.score / 10));
        setupApples();
    }

    function tick() {
        var i;
        var apple;
        var dateNow = Date.now();
        c.width = c.width;
        for (i = 0; i < apples.length; i++) {
            apple = apples[i];
            if (dateNow > apple.delay) {
                apple.y += apple.v;
                if (collision(apple)) {
                    initApple(i);
                    basket.score++;
                } else if (apple.y > height) {
                    initApple(i);
                } else {
                    ctx.drawImage(apple_img, apple.x, apple.y);
                }
            }
        }
        ctx.font = "bold 24px sans-serif";
        ctx.fillStyle = "#2FFF2F";
        ctx.fillText(basket.score, c.width - 50, 50);
        ctx.fillText("Level: " + level, 20, 50);

        ctx.drawImage(basket_img, basket.x, basket.y);
        maybeIncreaseDifficulty();
        requestAnimationFrame(tick);
    }

    return {
        init: init
    };
}