Jquery: использование .animate для создания игры

Question

Jquery: использование .animate для создания игры

0

Я знаю, что это не лучший вопрос, но я действительно застрял. Я пытаюсь создать такую игру, как on в этой ссылке: http://richard.parnaby-king.co.uk/examples/games/balloons/, используя только Jquery/Javascript/CSS/HTML. (Так что я не могу использовать flash).

Я знаю, что игра не может выглядеть так хорошо или свободно с ней, но то, что я сейчас сейчас, даже не работает.

Во-первых, я создал 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++}

Но я не могу даже получить изображения в хорошем месте, и анимация их не работает, как я намереваюсь. Я не прошу использовать готовый код, но если у кого-то есть что-то подобное, и он знает лучший подход к случайному добавлению элементов/перемещению их на странице, я был бы признателен.

user3117628 28 апр. 2014, в 21:25

Источник

0

Этот парень отстой, у меня 135. Можете ли вы опубликовать остальную часть своего кода, например, где вы используете функцию .animate. Также поможет создание jsfiddle.
mambrow 28 апр. 2014, в 18:52

Теги:

jquery

position

jquery-animate

2 ответа

0

проверьте этот 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);

Amit Soni 28 апр. 2014, в 18:55

Ещё вопросы

Этот парень отстой, у меня 135. Можете ли вы опубликовать остальную часть своего кода, например, где вы используете функцию .animate. Также поможет создание jsfiddle.

jwatts1980 · Accepted Answer · 2014-04-28T17-14-00.000Z

Вот пример JSFiddle одного из способов создания новых объектов, их анимации, а затем удаления. Ниже приведен код для этого примера. Это, безусловно, долгий путь, чтобы стать игрой, если вам не нравится смотреть воздушные шары!

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