Forked from: funnythingz's forked: 二次元配列でドット絵 (Hex Color Codes) しかも複数。 diff(30) 二次元配列でドット絵 (Hex Color Codes) funnythingz Follow 2012-02-06 14:28:52 License: MIT License Fork0 Fav0 View975 描画元の配列マップにHexカラーを指定するバージョン。 Play Stop Reload Fullscreen Smart Phone Readme JavaScript 90 lines HTML 3 lines CSS 32 lines 描画元の配列マップにHexカラーを指定するバージョン。 二次元配列でドット絵 (Hex Color Codes) // forked from funnythingz's "forked: 二次元配列でドット絵 (Hex Color Codes) しかも複数。" http://jsdo.it/funnythingz/s4WF // forked from funnythingz's "二次元配列でドット絵" http://jsdo.it/funnythingz/o4ql /*------------------------------------------------- * 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'] ] /*------------------------------------------------- * 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); <ul class="group tstList"> <li id="stage"></li> </ul> 二次元配列でドット絵 (Hex Color Codes) * { 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; } 描画元の配列マップにHexカラーを指定するバージョン。 // forked from funnythingz's "forked: 二次元配列でドット絵 (Hex Color Codes) しかも複数。" http://jsdo.it/funnythingz/s4WF // forked from funnythingz's "二次元配列でドット絵" http://jsdo.it/funnythingz/o4ql /*------------------------------------------------- * 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'] ] /*------------------------------------------------- * 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); <ul class="group tstList"> <li id="stage"></li> </ul> * { 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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? 描画元の配列マップにHexカラーを指定するバージョン。 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet style Design view Code view code <script type="text/javascript" src="http://jsdo.it/blogparts/etba/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/funnythingz/etba" title="二次元配列でドット絵 (Hex Color Codes)">二次元配列でドット絵 (Hex Color Codes) - jsdo.it - share JavaScript, HTML5 and CSS</a></p> css3 HTML5 Javascript Tweet twitter Tags HTML5 Javascript css3 Forked sort new page view favorite forked forked: 二次元配列でドット絵 (Hex Color .. yoyoyoshitak.. 00 47views 91/3/32 HTML5 Javascript css3 forked: 二次元配列でドット絵 (Hex Color .. Toyotaro.Oku.. 00 37views 91/3/32 HTML5 Javascript css3