存储ASCII艺术作品作为简单JavaScript游戏中的角色。 我可以将其存储在角色的对象中吗？

Question

Making a simple JS game (all I can use is Jquery and vanilla JS) and would like to use art like this:

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

and use Jquery to toss it around to different divs on my page. How and where can I put this as to not lose that spacing but still be able to call it? When I have it in as a value i cant have multiple lines per value it would seem because sublime turns vader into a rainbow.

Answer 1

Since SO seems to display your stuff correctly i just inspected what is the element and seems to be <pre> . So i created a var with the styling for recreating a darthvader like this:

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

<br> to make a linebreak. and doubles all the \\ so it doesn't consider it as an escape character.

then i've made a div to hold the player:

 <div id="player">

</div>

simple div didn't apply any style you can do what ever you like with it.

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

I made this button so you can add it when you want. You can make some logic to add it only once or just store it in player div and hide the button or what ever.

And then add player simply creates a <pre> element and adds the darthvador player in it.

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

css style to make pre look like a normal div. You can change the width or what ever if you need.

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

hope this helps.

Then if you need to manipulate the player and toss it around other divs jQuery has a detach function to detach a div. And then you can attach if with after or appendTo or before .

PS: Sry i can't provide jsFiddle link i don't have access to all the website. But it's just css html and js so you can easily rebuild it :p