javascript - 存储 ASCII 艺术以用作简单 JavaScript 游戏中的 Angular 色。我可以将它存储在 Angular 色的对象中吗？

Question

制作一个简单的 JS 游戏(我只能使用 Jquery 和 vanilla JS)并且想像这样使用艺术:

        .-.       |_:_|      /(_Y_)\     (_\/M\/_)      /.'-'.\     //|[_]|\\     \\|   |//      #|===|\#     / |\ /I \    /_ | | I _\       |_|_|  

并使用 Jquery 将它扔到我页面上的不同 div 中。我可以如何以及在哪里放置它而不丢失那个间距但仍然可以调用它？当我将它作为一个值时，我不能为每个值设置多行，这似乎是因为 sublime 将 vader 变成了彩虹。

Answer 1

因为 SO 似乎正确显示了你的东西，我只是检查了元素是什么，似乎是 <pre> .所以我创建了一个带有样式的 var 来重新创建一个像这样的 darthvader:

var darthvador = "        .-.<br>       |_:_|<br>      /(_Y_)\\<br>     (_\\/M\\/_)<br>      /.'-'.\\<br>     //|[_]|\\\\<br>     \\\\|   |//<br>      #|===|\\#<br>     / |\\ /I \\<br>    /_ | | I _\\<br>       |_|_| ";

<br>换行。并将所有\加倍，因此它不会将其视为转义字符。

然后我制作了一个 div 来容纳播放器:

 <div id="player">

</div>

简单的 div 没有应用任何样式，您可以随心所欲地使用它。

<input type="button" value="addPlayer" onclick="addPlayer();"/> 

我制作了这个按钮，以便您可以在需要时添加它。您可以制定一些逻辑来仅添加一次或将其存储在播放器 div 中并隐藏按钮或其他任何东西。

然后添加玩家简单地创建一个<pre>元素并在其中添加 darthvador 播放器。

function addPlayer(){
    document.getElementById("player").innerHTML = "<pre>" + darthvador +"</pre>";
}

css 样式使 pre 看起来像一个普通的 div。您可以根据需要更改宽度或任何内容。

 pre{
    background-color: transparent;
    border: 0px;
}

希望对您有所帮助。

然后如果你需要操纵播放器并将它扔到其他 div 周围，jQuery 有一个 detach分离一个div的函数。然后你可以附上 after或 appendTo或 before .

PS:抱歉，我无法提供 jsFiddle 链接，我无法访问所有网站。但它只是 css html 和 js，所以你可以轻松地重建它 :p