HTMLでマリオを書く

まずは■を使ってドットを打ってみました。

■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■
■■■■■■■■■■■■

ソースを見てみると苦労がよくわかります。
下のようにいらない■は背景色と同化しちゃうといい感じです。

↓こちらはフォントサイズを18pxまで大きくしてみました。

■以外のマリオ達。ちょっと気持ち悪いです。↓

●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●
●●●●●●●●●●●●

◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆
◆◆◆◆◆◆◆◆◆◆◆◆

★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★
★★★★★★★★★★★★

ルイージも書いてみた。↓

弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟
弟弟弟弟弟弟弟弟弟弟弟弟

そして今度はテーブルを使ってマリオを表現してみましょう。
より忠実にドット絵の雰囲気を再現できます。↓

以上！

マリオは単純だったので何とか書くことが出来ました。
この技法でFFのキャラとか作った人には拍手を送ります。是非誰かやってみて下さい。