javascriptで黒い丸をランダムに動かす

開発環境は、Windows 7 Professional(32bit)+Firefox 58.0.2(32ビット)+jQuery 3.2.1。

最大5つの黒丸のxとyの位置を最初に決めておいて、描画し、そこから、100ミリ秒単位で、描画をすべて消して、xとyの位置をそれぞれ、ランダムで、-1,0,1のどれか加えて変化させます。それによって、黒丸は、次の動作として、現状に留まるか、八方のどこかに動くという全部で9パターンの動作の内、1つのみを次に行います。

じっと見ていると、微生物を観察しているみたいで面白いです。

JavaScript部分

<script src="jquery-3.2.1.min.js"></script>
<script>
$(function(){
	var sprite = {
		1: {x: 130,y: 30},
		2: {x:30,y:30},
		3: {x:130,y:130},
		4: {x:30,y:130},
		5: {x:75,y:75}
	};

	for(var i = 1; i <= 5; i++){
		var x = sprite[i].x + move();
		var y = sprite[i].y + move();
		sprite[i].x = x;
		sprite[i].y = y;
		var cvs = document.getElementById('canvas');
		if( !cvs || !cvs.getContext){ return false;}
		var ctx = cvs.getContext('2d');
		ctx.beginPath();
		ctx.arc(x,y,5,Math.PI*2,false);
		ctx.stroke();
	}

	setInterval(function(){

        // 描画したものを一旦消す
	var cvs = document.getElementById('canvas');
	if( !cvs || !cvs.getContext){ return false;}
	var ctx = cvs.getContext('2d');
        // canvas.width, canvas.heightでも良い
	ctx.clearRect(0,0,cvs.width,cvs.height);

	for(var i = 1; i <= 5; i++){
		var x = sprite[i].x + move();
		var y = sprite[i].y + move();
		sprite[i].x = x;
		sprite[i].y = y;
		var cvs = document.getElementById('canvas');
		if( !cvs || !cvs.getContext){ return false;}
		var ctx = cvs.getContext('2d');
		ctx.beginPath();
		ctx.arc(x,y,5,Math.PI*2,false);
		ctx.fill();
	}
	},100);


	function move(){
		var pos = Math.floor(Math.random() * Math.floor(3));
		if(pos == 0){
			return 0;
		}else if(pos == 1){
			return 1;
		}else if(pos == 2){
			return -1;
		}
	}
});
</script>

HTML側

<canvas id="canvas" width="300" height="300">

</canvas>

実行結果

参考リンク
HTML5 Canvas の描画領域全体をクリアする | まくまく JavaScript ノート