dorivenの日記

気がついたら社会人。気になる技術的なことについて少しずつ書いていけたらと思っております。

【Wonderfl移植計画】砂ゲー【5作目】

wonderflのFavoriteTop100にランクインしている作品をCreateJSを使って移植しようという計画。

ライセンスはMITなのを確認していますが、
制作者様の方から何かアクションがあった場合は削除させていただきます。

60位 砂ゲー

移植元のFlashソースコード

CreateJSのデモ

ソースコードは次回から解説をします。

今回はソースコードを掲載するだけにします。

// EaselJS 0.7
// BitmapData 1.0.0
// -- http://kudox.jp/java-script/createjs-easeljs-bitmapdata

window.onload = init;

var W;
var H;
var stage;

var ERASE_COLOR = 0x000000;
var WALL_COLOR  = 0x836034;
var SAND_COLOR  = 0xF7E779;
var WATER_COLOR = 0x80A2F0;

var _CANVAS;

var _B0;
var _B1;
var _B2;
var _B3;

var _CLICK = false;
var _COLOR;
var _BX = 0;
var _BY = 0;

function init()
{
	stage = new createjs.Stage("canvas");
	W = stage.canvas.width;
	H = stage.canvas.height;

	_CANVAS = new createjs.BitmapData(null, W, H, 0x000000);
	var bm = new createjs.Bitmap(_CANVAS.canvas);
	stage.addChild(bm);

	_B0 = document.getElementById("erase_btn");
	_B1 = document.getElementById("wall_btn" );
	_B2 = document.getElementById("sand_btn" );
	_B3 = document.getElementById("water_btn");

	_COLOR = WALL_COLOR;
	_B1.disabled = true;

	_B0.onclick = function(){_COLOR = ERASE_COLOR; _B0.disabled = true  ; _B1.disabled = false ; _B2.disabled = false ;_B3.disabled = false ;};
	_B1.onclick = function(){_COLOR = WALL_COLOR ; _B0.disabled = false ; _B1.disabled = true  ; _B2.disabled = false ;_B3.disabled = false ;};
	_B2.onclick = function(){_COLOR = SAND_COLOR ; _B0.disabled = false ; _B1.disabled = false ; _B2.disabled = true  ;_B3.disabled = false ;};
	_B3.onclick = function(){_COLOR = WATER_COLOR; _B0.disabled = false ; _B1.disabled = false ; _B2.disabled = false ;_B3.disabled = true  ;};

	stage.addEventListener('stagemousedown', function(){_CLICK = true ;});
	stage.addEventListener('stagemouseup'  , function(){_CLICK = false;});
	createjs.Ticker.addEventListener('tick', RUN);
	createjs.Ticker.setFPS(60);
}

function RUN()
{
	for(var I = 200; I < 250; ++I)
	{
		if(Math.random() < .1)
		{
			_CANVAS.setPixel(I, 0, SAND_COLOR);
		}
	}

	if(_CLICK)
	{
		for(var J = 0; J < 20; ++J)
		{
			var R = J / 20;
			_CANVAS.fillRect(new createjs.Rectangle(Math.floor(_BX * R + stage.mouseX * (1 - R)), Math.floor(_BY * R + stage.mouseY * (1 - R)), 5, 5), _COLOR);
		}
	}
	_BX = stage.mouseX;
	_BY = stage.mouseY;

	for(var X = 0; X < _CANVAS.width; ++X)
	{
		for(var Y = _CANVAS.height - 1; Y >= 0; --Y)
		{
			var C  =_CANVAS.getPixel(X, Y);
			if(C == ERASE_COLOR)
			{
				continue;
			}

			// SAND
			if(C == SAND_COLOR)
			{
				var T;
				var TX;

				{//[落下]
					T = _CANVAS.getPixel(X, Y + 1);
					if(T == ERASE_COLOR)
					{
						_CANVAS.setPixel(X, Y 	 , T);
						_CANVAS.setPixel(X, Y + 1, C);
						continue;
					}

					// [水より砂の方が重い、適当な確率で場所の置換を許す。]
					if(T == WATER_COLOR && Math.random() < .5)
					{
						_CANVAS.setPixel(X, Y    , T);
						_CANVAS.setPixel(X, Y + 1, C);
						continue;
					}
				}

				{//[左右移動]
					TX = X + Math.floor(Math.random() * 7) - 3;
					T = _CANVAS.getPixel(TX, Y);
					if(T == ERASE_COLOR)
					{
						_CANVAS.setPixel(X , Y, T);
						_CANVAS.setPixel(TX, Y, C);
						continue;
					}

					// [水より砂の方が重い、適当な確率で場所の置換を許す。]
					if(T == WATER_COLOR && Math.random() < .8)
					{
						_CANVAS.setPixel(X , Y, T);
						_CANVAS.setPixel(TX, Y, C);
						continue;
					}
				}
			}

			// WATER
			if(C == WATER_COLOR)
			{
				{//[落下]
					T = _CANVAS.getPixel(X, Y + 1);
					if(T == ERASE_COLOR)
					{
						_CANVAS.setPixel(X, Y 	 , T);
						_CANVAS.setPixel(X, Y + 1, C);
						continue;
					}
				}

				{//[左右移動]
					TX = X + Math.floor(Math.random() * 7) - 3;
					T = _CANVAS.getPixel(TX, Y);
					if(T == ERASE_COLOR)
					{
						_CANVAS.setPixel(X , Y, T);
						_CANVAS.setPixel(TX, Y, C);
						continue;
					}
				}
			}
		}
	}

	_CANVAS.updateContext();
	stage.update();
}