Question

一旦达到特定的游戏分数，我就试图在文本上显示游戏，但是我似乎无法使其显示出来。

<svg id="canvas" width="600" height="600">
<text id="left" x="135" y="70" font-size = 60 font-family = "Menlo, sans-serif" fill="white">0</text>
<text id= "right" x= "435" y = "70" font-size = 60 font-family = "Menlo, sans-serif" fill = "white">0</text>
<div id= "game-over" x = "100" y = "100" font-size = 40 font-family = "Menlo, sans-serif" fill = "white"> Winner:</div>
</svg>

左得分将基于ID“左”，右得分将基于ID“右”，当这些得分中的任何一个达到2时，我希望显示ID为“ game-over”的游戏结束声明html画布上的获胜者。

在Javascript中，我试图让左手玩家获胜：

    function declareWinner(score_left:HTMLElement) {
        let max_point:number = 2;
        let winner = document.getElementById("game-over")!;
        if (score_left.innerHTML == max_point.toString()) {
            winner.innerHTML += "Left Player";
        }
    }

但是当达到特定分数时，不会显示获胜者文本。

Answer 1

@Kaiido的评论是一种解决方案。它说：

其中没有html画布...

因为<svg>不是您在问题中所说的HTML画布。

我希望ID为“ game-over”的游戏结束声明在HTML画布上显示获胜者。

问题是您在div内使用了svg，这不受支持。

您的svg标记无效：不属于svg元素

因此，将其替换为文本应该有效：

<text id="game-over" x="100" y="100" font-size="40" font-family="Menlo, sans-serif" fill="white">Winner:</text>

还要确保您没有在白色背景上显示白色文本或与颜色相关的内容，因为您的文本是fill="white"。

显示游戏过度声明

1 个答案: