存儲ASCII藝術作品作為簡單JavaScript游戲中的角色。 我可以將其存儲在角色的對象中嗎？

Question

制作一個簡單的JS游戲（我只能使用Jquery和Vanilla JS），並希望使用如下圖樣：

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

並使用Jquery將其扔給我頁面上的不同div。 我該如何以及在何處放置它，以免失去該間距但仍可以調用它？ 當我將其作為一個值輸入時，每個值不能顯示多行，因為崇高將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>

simple div沒有應用任何樣式，您可以使用它來完成自己喜歡的任何事情。

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

我做了這個按鈕，以便您可以在需要時添加它。 您可以制定一些邏輯，使其僅添加一次，或僅將其存儲在player div中，然后隱藏按鈕或其他內容。

然后add player只需創建一個<pre>元素，然后在其中添加darthvador播放器。

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

css樣式使pre看起來像普通的div。 您可以更改寬度，也可以根據需要更改。

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

希望這可以幫助。

然后，如果您需要操縱播放器並將其扔向其他div，則jQuery具有detach功能來分離div。 然后可以將if附加在after或appendTo或before 。

PS：對不起，我無法提供jsFiddle鏈接，但我無法訪問所有網站。 但這只是css html和js，因此您可以輕松地重建它：p