2017-11-26 5 views
0

の大きな形状を印刷する方法、それが印刷されます:the output looks like this. 私は例を示すために、フロントエンドの言語を使用します。出力をシミュレートするために9 * 9グリッドとして入れ子配列を生成しました。その後、forループを使用してHTML構文に変更します。この場合、どの言語を使用していても、キーはアルゴリズムです。私はアルゴリズムが効率的だとは思っていません。なぜなら26文字の配列を26個生成しなければならないからです。 26のネスト配列を作成するのではなく、この問題を解決する効率的な方法はありますか?アルゴリズム:入力が「Y」である手紙例えば

$(document).ready(function(){ 
 
    
 

 
    var letter_y=[ 
 
     [0,0,0,0,0,0,0,0,0], 
 
     [0,1,0,0,0,0,0,1,0], 
 
     [0,1,0,0,0,0,0,1,0], 
 
     [0,1,0,0,0,0,0,1,0], 
 
     [0,1,1,1,1,1,1,1,0], 
 
     [0,0,0,0,1,0,0,0,0], 
 
     [0,0,0,0,1,0,0,0,0], 
 
     [0,0,0,0,1,0,0,0,0], 
 
     [0,0,0,0,1,0,0,0,0], 
 
     [0,0,0,0,0,0,0,0,0], 
 
    ] 
 

 

 

 

 
    for(var x=0;x<letter_y.length;x++){ 
 
     for(var j=0;j<letter_y[x].length;j++){ 
 
      if(letter_y[x][j]===0) 
 
      $('.row').append('<div class="grid"></div>'); 
 
      if(letter_y[x][j]===1) 
 
      $('.row').append('<div class="grid2"></div>'); 
 
     }  
 
     $('.row').append('<br>'); 
 
    } 
 

 
    
 
});
.grid{ 
 
    background-color: black; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
    margin:0px; 
 
} 
 
.row{ 
 
    line-height: 0px; 
 
} 
 
.grid2{ 
 
    background-color: blue; 
 
    width: 20px; 
 
    height: 20px; 
 
    display: inline-block; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
     <meta charset="utf-8"> 
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
     <title>fill_me_in</title> 
 
     <meta name="description" content="fill_me_in" > 
 
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css " rel="stylesheet">    
 
     <link rel="stylesheet" type="text/css" href="style.css"> 
 
     
 
    </head> 
 
    <body> 
 
     <nav id="nav_top" class="navbar navbar-inverse navbar-static-top"> 
 
       <div class="container" id="main_container"> 
 
         <a class="navbar-brand" href="http://api.jquery.com">Pac_man</a> 
 
       </div> 
 
     </nav> 
 
     <div class="container"> 
 
       <div class="row"> 
 
        
 
        
 
       </div> 
 
      </div> 
 
     
 
     <div class="own"></div> 
 

 

 

 

 

 
      <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
 
      <script src="application.js"></script> 
 
      
 
     
 
    </body> 
 
</html>

+2

なぜ適切なフォントが見つからないのですか?フォントサイズで再生できます。あなたは[この1つ](https://github.com/Marak/asciimo)のようなライブラリを使用することもできます – jrook

+0

あなたの助けをありがとう。私の目標はPAC-MANのゲームを作成することです:https://www.google.com/search?newwindow = 1&source = hp&ei = - 8aWu3oM6HQjwSzpZPYCQ&q = pacman&gp_l = psy-ab.3..0l3j0i131i10k1j0l6.712.1887。 0.2115.6.6.0.0.0.0.170.633.0j4.4 .... 0 ... 1.1.64.psy-ab.2.4.632 ... 46j0i131i46k1j46i131k1j0i131k1j0i46k1.0.8QjhpJhym_I#clb = clb 私はしたいGoogleのロゴではなく私の名前を表示する –

答えて

2

記号表現する2つの一般的な方法があります - ラスター表現とベクトル表現。シンボルの画像をビットマップとして保存しようとしたので、ベクトルを試すことができます。 "1"は "line(0,0)〜(0,10)"となります。

ビットマップがコード内でどのように見えるかは、文字列("010000010",...)または個々のビット数(9x9は9個の数字で表すことができます)を使用できます。

注:目的が巨大なピクセル化された文字をレンダリングするだけであれば、そのようなフォントに一致する可能性があります。また、そのようなフォントをクライアント上で利用できるようにする方法を理解する必要があるかもしれません。

+0

お返事ありがとうございます。私の目標はPAC-MANのゲームを作成することです:https://www.google.com/search?newwindow = 1&source = hp&ei = - 8aWu3oM6HQjwSzpZPYCQ&q = pacman&gp_l = psy-ab.3..0l3j0i131i10k1j0l6.712.1887。 0.2115.6.6.0.0.0.0.170.633.0j4.4 .... 0 ... 1.1.64.psy-ab.2.4.632 ... 46j0i131i46k1j46i131k1j0i131k1j0i46k1.0.8QjhpJhym_I#clb = clb 私はしたいGoogleのロゴではなく私の名前を表示する –

関連する問題