HTMLとCSSで二次元配列でドット絵 (Hex Color Codes)

これからcanvas盛り上がっていくという中、あえてHTMLタグとCSSを使ったドット絵を描いてみました。 jsdoitに投稿したものなのでちょい古いですけど紹介します。

といっても仕組みは簡単で、描画するデータ情報を二次元配列にもっておいて、それを<li>タグでfloatで並べて描画するというもの。描画のロジックはJavaScriptで実装しました。 描画するターゲットがcanvasか、HTMLタグかの違いだけなので仕組みはとってもシンプルです。

こちらが完成図です。

二次元配列でドット絵 (Hex Color Codes) - jsdo.it - share JavaScript, HTML5 and CSS

描画データとなる二次元配列マップにHexカラー値を直接書いて渡しているため、このように色は自由に指定できます。

さて、ソースコードの紹介になります。

【1】描画するHTML側でステージ的なものを用意します。

<ul class="group tstList">
    <li id="stage">

【2】CSSで見た目を制御します。

* {
    margin: 0;
        padding: 0;
}
.box {
        width: 10px;
    height: 10px;
    overflow: hidden;
    display: block;
    float: left;
}
.wrap:after,
.box:after {
    content: ".";
    display: block;
    clear: both;
    height: 0;
    visibility: hidden;
    font-size: 0.1em;
    line-height: 0;
}
.wrap,
.group {
    zoom: 1;
}
.tstList {
    width: 240px;
}
.tstList li {
    float: left;
        list-style: none;
}

【3】描画データを二次元配列で用意します。値にはHexカラー値を文字列でもちます。

/*-------------------------------------------------
* map
*/
var map = [
    ['ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','f5b199','f5b199','f5b199'],
    ['ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','e10000','e10000','e10000','e10000','e10000','ffffff','ffffff','f5b199','f5b199','f5b199'],
    ['ffffff','ffffff','ffffff','ffffff','ffffff','e10000','e10000','e10000','e10000','e10000','e10000','e10000','e10000','e10000','f5b199','f5b199'],
    ['ffffff','ffffff','ffffff','ffffff','ffffff','FFFF00','FFFF00','FFFF00','f5b199','f5b199','000000','f5b199','ffffff','05299d','05299d','05299d'],
    ['ffffff','ffffff','ffffff','ffffff','FFFF00','f5b199','FFFF00','f5b199','f5b199','f5b199','000000','f5b199','f5b199','05299d','05299d','05299d'],
    ['ffffff','ffffff','ffffff','ffffff','FFFF00','f5b199','FFFF00','FFFF00','f5b199','f5b199','f5b199','000000','f5b199','f5b199','f5b199','05299d'],
    ['ffffff','ffffff','ffffff','ffffff','FFFF00','FFFF00','f5b199','f5b199','f5b199','f5b199','000000','000000','000000','000000','05299d','ffffff'],
    ['ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','f5b199','f5b199','f5b199','f5b199','f5b199','f5b199','f5b199','05299d','ffffff','ffffff'],
    ['ffffff','ffffff','05299d','05299d','05299d','05299d','05299d','fb8a10','05299d','05299d','05299d','fb8a10','05299d','ffffff','ffffff','ffffff'],
    ['ffffff','05299d','05299d','05299d','05299d','05299d','05299d','05299d','fb8a10','05299d','05299d','05299d','fb8a10','ffffff','ffffff','05299d'],
    ['f5b199','f5b199','05299d','05299d','05299d','05299d','05299d','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','ffffff','ffffff','05299d'],
    ['f5b199','f5b199','f5b199','ffffff','fb8a10','fb8a10','05299d','fb8a10','fb8a10','EEEEEE','fb8a10','fb8a10','EEEEEE','fb8a10','05299d','05299d'],
    ['ffffff','f5b199','ffffff','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','05299d','05299d'],
    ['ffffff','ffffff','05299d','05299d','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','05299d','05299d'],
    ['ffffff','05299d','05299d','05299d','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','fb8a10','ffffff','ffffff','ffffff','ffffff','ffffff'],
    ['ffffff','05299d','ffffff','ffffff','fb8a10','fb8a10','fb8a10','fb8a10','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff','ffffff']
]

【4】描画ロジックをJavaScriptで実装します。

/*-------------------------------------------------
* module
*/
var $ = function(id){
    return document.getElementById(id);
}
var $$ = function(id, tag){
    return document.getElementById(id).getElementsByTagName(tag);
}
var createElement = function(tag){
    return document.createElement(tag);
}

/*-------------------------------------------------
* Elements
*/

//Wrap
var Wrap = function(){
    return this.init();
}
Wrap.prototype = {
    init: function(){
        var div = createElement('div');
        div.setAttribute('class', 'wrap');
        div.innerHTML = '';
        return div;
    }
}

//Dot
var Dot = function(args){
    this.background = args.background;
    return this.init();
}
Dot.prototype = {
    init: function(){
        var span = createElement('span');
        span.style.background = "#" + this.background;
        span.setAttribute('class', 'box');
        span.innerHTML = '';
        return span;
    }
}

//Create
var Create = function(obj){
    var stage = obj;
    var wrap = [];
    for( var i = 0, L = map.length; i < L; i++ ){
        wrap[i] = new Wrap();
        for( var j = 0, M = map[i].length; j < M; j++ )
    {
        wrap[i].appendChild( new Dot({ background: map[i][j] }) );
        }
        stage.appendChild(wrap[i]);
    }
}

/*-------------------------------------------------
* initilize
*/
var init = function(){
    new Create( $('stage') );
}
window.addEventListener('load', init, false);

JavaScriptはライブラリは使っていません、ネイティブ実装です。 jQueryとか使えばもっと簡単に実装できると思います。

でもProcessing.js使う方が面白いのでcanvasに描画した方が良いんじゃないかなw