1

私は「プレイヤー」imgが他の「モンスター」と戦うゲームを作っていimgます。戦いはたくさんのラウンドです。ヒットが発生するたびに、「ヒット」を div で上に向かってフェードアウトする数字として表示します (説明が難しいです)。そのように説明するには：

ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力 ここに画像の説明を入力

（それが私の意味を示していることを願っています）

私がこれを行った方法は、オリジナルを作成したときにdivwith eachを追加することでした。プレイヤー/モンスター (つまり、その他) に接続されています。次に、このコードをファイルに入れます。imgimgidobjectmonster0health

$("#" + displayHealthDivId).delay(250).animate({
    opacity: 100,
    top: "+=" + (3 * (scale / 10))
}, 0);
$("#" + displayHealthDivId).html(healthLost);
$("#" + displayHealthDivId).animate({
    opacity: 0,
    top: "-=" + (3 * (scale / 10))
}, 1000, function () {});

名前が示すようにhealthLost、失われた健康状態です - 表示したいテキストは said divandscaleです。imgheight

CSS

.healthLost{
    position: absolute;
    padding:0;
    left: 0;
    top: -10px;
    z-index:2;
    width:100%;

    opacity:0;

    font-family: cursive;
    font-size: 20px;
    font-weight: bold;
    text-align:center;
    color:red;

    pointer-events:none;
}

divを作成するときに を作成せずにこれを行う方法があるかどうか知りたいですimg。jQueryで、 を基準とした特定の位置に を作成するにはどうすればよいですか? divimg次に、それを（上向きに）フェードアウトし、（少なくとも）戦いが続く限り維持したいと思います。

フィドルを作るにはコードが多すぎるので、ここにリンクしてください。

4

2 に答える 2

1

あなたのjQueryでは、次のようなものがあります

function strike(el, dmg) {
  var template = '<div class="damage" data-monster-id="el">' + dmg + '</div>';
  $(el).parent() // Parent is your .boardspot
       .append(template);
  $(el).siblings('.damage:last')
       .slideUp('slow'); // For fancier effect you will have to look at jquery ui
}

// To strike a monster with id monsters[12]
strike('#monsters[12]', 200);

の CSS .damage:

z-index: 9999;
font-size: 20px;
color: red;
position: absolute;
text-align: center;
width: 100%;
top: 20%;

上記はざっくりとテストしたものですので、参考にしてください。

于 2013-09-12T00:04:24.153 に答える