Forked from: funnythingz's forked: 二次元配列でドット絵 (Hex Color Codes) しかも複数。 diff(30)

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

funnythingz

2012-02-06 14:28:52

License: MIT License

Fork: 0

Fav: 0

View: 975

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);

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

描画元の配列マップに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; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

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>

QR Code