細胞分裂ゲーム * 初期の細胞の数は1つです。 * 細胞をタップすると、タップする毎に度に、細胞の数が1→2→4→8→16→32……と増えていきます。 * 細胞は丸い形であり、JavaScriptによって線画されています。's game

Click here for free DL of the app version that can save data.

No:3968

1481

←

Prev Next

→

細胞分裂ゲーム * 初期の細胞の数は1つです。 * 細胞をタップすると、タップする毎に度に、細胞..ALL
Developer もちきなこ｜Date and time 23/6/27 0:56:03
Build time 23.18 sec｜Game capacity 1.718KB｜

Script

細胞分裂ゲームを作りました。以下がプログラムです。

このプログラムはスマホでも動作するようになっており、canvas要素で細胞を描画しています。細胞をタップすると、現在の全細胞から2つの新しい細胞が生成されます。生成された新しい細胞は既存の細胞からランダムな位置に生成されるようになっています。また、細胞の数が増えるにつれて細胞の大きさが小さくなるようになっており、これによってスマホでも見やすいようになっています。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

Click here for free DL of the app version that can save data.

細胞分裂ゲームを作りました。以下がプログラムです。

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>細胞分裂ゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var size = 50;
		var cells = [{
			x: canvas.width/2,
			y: canvas.height/2
		}];

function drawCells() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.beginPath();
			for (var i = 0; i < cells.length; i++) {
				ctx.arc(cells[i].x, cells[i].y, size, 0, Math.PI*2, false);
				ctx.fillStyle = "black";
				ctx.fill();
			}
			ctx.closePath();
		}

canvas.addEventListener("touchstart", function(event) {
			event.preventDefault();
			var newCells = [];
			for (var i = 0; i < cells.length; i++) {
				for (var j = 0; j < 2; j++) {
					newCells.push({
						x: cells[i].x + (Math.random() - 0.5) * size * 2,
						y: cells[i].y + (Math.random() - 0.5) * size * 2
					});
				}
			}
			cells = newCells;
			size /= 2;
			drawCells();
		});

drawCells();
	</script>
</body>
</html>
```