时间戳

首页 > 解决方案 > 显示游戏结束声明

javascript - 显示游戏结束声明

问题描述

一旦达到特定的游戏分数，我就会尝试在文本上显示游戏，但我似乎无法让它出现。

<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“left”，右边的分数将基于 id“right”，当这些分数中的任何一个达到 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";
        }
    }

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

标签： javascripthtmlsvg

解决方案

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

那里没有html画布...

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

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

问题是您使用的是divinside 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".

推荐阅读