1

我正在制作一个游戏，其中“玩家”img与其他“怪物”战斗img，战斗是一大堆回合。每次发生命中时，我都会将“命中”显示为在 div 中向上淡出的数字（有点难以描述）。像这样说明：

在此处输入图像描述 在此处输入图像描述 在此处输入图像描述 在此处输入图像描述

（希望能说明我的意思）

我这样做的方式是在我最初制作时添加了div一个。与连接到连接到播放器/怪物（即等）。然后我把这段代码放在我的文件中。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，就是丢失的健康——我想在其中显示的div文字scale是imgs height。

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 中创建一个div, 在相对于 a 的某个位置img？然后我想淡出它，（向上）并保持它（至少）只要战斗持续。

太多代码无法制作小提琴，因此请在此处链接。

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 回答
1

jsFiddle Demo

模拟您的确切情况有点困难。我使用了一些占位符图像。基本上你需要用 css 做一些事情来完成这项工作。然后也使用 jQuery。

首先，您应该确保将每个图像的容器设置为 position:relative。这将允许与 top 一起使用相对值来操纵绝对定位的动态 div。

接下来，您可以像这样制作div

var hp = "-99";
var lost = $("<div class='healthLost'>");
lost.attr("data-tar",t);
lost.html(hp);

为了保存显示 hp 的 div，您始终可以在某处有一个可用的数组

var hits = [];

然后在您的动画回调中，您可以存储命中 div

lost.animate({
 opacity: 0,
 top: "-=" + (3 * (scale / 10))
}, 1000, function () {
    hits.push($(this).clone(false));
    $(this).remove();
    console.log(hits);
});
于 2013-09-12T00:06:37.163 回答