やってみたJavaScript(0004)：　セル毎に塗る

2023年9月23日

やってみたJavaScript、今回は、セル毎に塗れるようにする。

セルってのはLife Gameでいうところの、縦横の線で区切られた一つ一つの四角のこと。今までは枠線を無視してたので、クリックしたセル単位で塗れるようにする。

test0004

https://www.hircos.work/test/test0004

クリックしたセルをマーク

将来的には単位時間ごとにそれぞれのセルを塗る/塗らないという判断をして塗ることになるので、単純にクリックしたセルを塗るだけじゃなくて、クリックしたセルをマークしておく。

var cells = new Array(CANVAS_WIDTH/CELL_WIDTH);
for( let i = 0 ; i < cells.length ; i++ ){
    cells[i] = new Array(CANVAS_WIDTH/CELL_WIDTH);
}
    function onClick(e){
	let rect = e.target.getBoundingClientRect();
	let point_x = Math.floor( (e.clientX-rect.left)/CELL_WIDTH );
	let point_y = Math.floor( (e.clientY-rect.top) /CELL_WIDTH );

	cells[point_x][point_y] = true;
	drawRect( point_x*CELL_WIDTH, point_y*CELL_WIDTH );
    }

とりあえず二次元配列。

セル毎に塗る

セルのサイズは定義してあったので、あとは座標を何とかすればよし。

	let point_x = Math.floor( (e.clientX-rect.left)/CELL_WIDTH );
	let point_y = Math.floor( (e.clientY-rect.top) /CELL_WIDTH );

セルサイズで割ってMath.floorで小数点以下を切り捨てればいい感じになるかと。

いじょ。

広告

JavaScript,tec