Question

我正在创建一个游戏（使用HTML5画布），其中包括捕捉落苹果，我知道，它是多么原创！我很难找到一种方法让它变成多个苹果掉下来？

这是JSFiddle中的代码：https://jsfiddle.net/pgkL09j7/12/

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_x++;
    if (apple_y > c.height) {
        apple_y = 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_app

le(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);

}

Answer 1

更改部分

apple_x++;
if (apple_x > c.width) {
    apple_x = 0;
}

使用垂直而不是水平...

apple_y++;
if (apple_y > c.height) {
    apple_y = 0;
}

Answer 2

你已经接受了答案，但这看起来很有趣。看看这个小提琴。

https://jsfiddle.net/h82gv4xn/

改进包括：

固定记分牌
添加级别进度（级别每10个苹果增加）
在屏幕上允许更多苹果（播放到第9级）。
随着水平的增加，苹果会以不同的速度下降并加速。
使用动画帧系统更多更流畅的动画。
放松的碰撞处理（桶的中心必须接触苹果）

随着关卡的升级，这一切都变得非常愚蠢，但它应该是一个很好的例子来改进。相关的javascript如下（这将进入你的onLoad函数）：

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
    };
}

我怎样才能让多个苹果掉下来？

2 个答案: