Jquery：使用 .animate 创建游戏答案

【问题标题】：Jquery: using .animate to creata a gameJquery：使用 .animate 创建游戏
【发布时间】：2014-04-28 18:44:35
【问题描述】：

我知道这不是最好的问题，但我真的被困住了。我正在尝试创建一个类似于此链接中的游戏：http://richard.parnaby-king.co.uk/examples/games/balloons/，仅使用 Jquery/Javascript/CSS/HTML。（所以我不能使用闪光灯）。

我知道这个游戏看起来不太好或不流畅，但我现在所拥有的甚至都行不通。

首先，我创建了一个 div，即“游戏场”。然后我想每 200 毫秒在页面底部添加一个气球，它会上升。它适用于一个气球，但只要我添加更多，气球就会在 .animate 函数启动时跳到屏幕顶部。

 var divheight = $("#playfield").height();
var divwidth = $("#playfield").width();
var y = 0;

while (y<=20) {
var position = Math.round(divwidth*Math.random());
setTimeout(function(){

var testballoon = '<img src="Afbeeldingen/testballon.png" class="blueballoon"'
testballoon+= 'style="position:absolute;bottom:0px;' + 'left:' + position + 'px;"/>';
$("#playfield").append(testballoon);
}, 1000); y++}

但我什至无法将图像放在一个好的位置，并且为它们设置动画也不能像我打算的那样工作。我不是要求即用型代码，但如果有人有类似的经验并且知道随机添加元素/在页面上移动它们的更好方法，我将不胜感激。

【问题讨论】：

那家伙糟透了，我得到了 135。你能把剩下的代码贴出来，比如你在哪里使用 .animate 函数。此外，创建一个 jsfiddle 会有所帮助。

标签： jquery position jquery-animate

【解决方案1】：

Here is a JSFiddle example 创建新对象的一种方法，为它们设置动画，然后删除它们。下面是这个例子的代码。除非你喜欢看气球飘起来，否则它要成为一个游戏当然还有很长的路要走！

HTML

<div class="gamefield">
    Click this area to add balloons! 
    <br />
    Click fast or click slow!
</div>

CSS

div.gamefield {
    width: 100%;
    height: 500px;
    border: 1px red solid;
}

div.balloon {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100px;
    height: 150px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

Javascript

var burl = "http://etc-mysitemyway.s3.amazonaws.com/icons/legacy-previews/icons/green-jelly-icons-culture/028931-green-jelly-icon-culture-balloon.png";

function createBalloon() {
    var gamefield = $("div.gamefield");

    var d = $(document.createElement("div"));
    d.addClass("balloon");
    d.css("background-image", "url('" + burl + "')");

    var maxwidth = gamefield.width() - 100;
    var left = Math.round(maxwidth * Math.random());

    d.css("left", left+"px");
    d.css("bottom", "0px");

    gamefield.append(d);
    d.animate({
        bottom: gamefield.height()
    }, 3000, function() {
        animationComplete($(this));
    });
}

function animationComplete(jobj) {
    jobj.remove();
}

$(function() {
    $("div.gamefield").click(function() {
        createBalloon();
    });
});

【讨论】：

非常感谢伙计！这真的很有帮助:)
我让我的更“像游戏”......虽然它仍然很简单！ jsfiddle.net/K5W8E/1

【解决方案2】：

检查这个FIDDLE

jQuery

var div ="<div class='balloon'></div>";
var $div = $(div);
var totalHits = 0;
var totalSeconds = 30;
var time = 0;

var colors = ["red","green","blue","yellow","brown","orange","black","gray"];



var game = setInterval(function(){
    time = time + 3;

    for(i=0;i<5;i++){
        var numBottom = Math.floor(Math.random()*100);
    var numLeft = Math.floor(Math.random()*300);
    var colorRand = colors[Math.floor(Math.random()*colors.length)];

        var cloneDiv = $div.clone(true);
        cloneDiv.css({
            "background-color":colorRand,
            "bottom":-numBottom,
            "left":numLeft
        }).appendTo("#panel");

        cloneDiv.animate({
            bottom:"700px"
        },20000,function(){
            cloneDiv.remove();
        });

        cloneDiv.on("click",function(){
            $(this).hide();
            totalHits = totalHits + 1;
        });

        if(time > totalSeconds){
            clearInterval(game);
            $("#panel").html("<h2>Game Over</h2><br/><h3>your Score: " + totalHits + "</h3>");
        }
    }
},3000);

【讨论】：