Cell division simulator's game

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

No:1070

257

←

Prev Next

→

Cell division simulator
Developer User3025｜Date and time 23/6/18 1:32:13
Build time 46.599 sec｜Game capacity 3.72KB｜

Script

この細胞分裂シミュレーターは、画面内を自動的に移動する細胞を生成して描画します。細胞同士が衝突した場合には反射します。細胞の最大数は20個までです。開始、停止、リセットのボタンを備え、スマホでも操作可能です。絵文字は紫色の丸を使用しています。

←

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>
		#container {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		#canvas {
			border: 2px solid black;
			margin: 20px;
		}
		
		#buttons {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		button {
			font-size: 30px;
			padding: 10px 20px;
			margin: 0 10px;
			background-color: white;
			border: 2px solid black;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<div id="container">
		<canvas id="canvas" width="800" height="600"></canvas>
		<div id="buttons">
			<button id="startButton">開始</button>
			<button id="stopButton">停止</button>
			<button id="resetButton">リセット</button>
		</div>
	</div>

// 定数
		const cellColor = '🟣';
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');
		const cells = [];
		const cellSpeed = 3;
		const cellSize = 40;
		const maxCells = 20;

// シミュレーションの状態管理
		let isRunning = false;
		let requestId = null;

// 新規細胞を生成する
		function generateNewCell() {
			const x = Math.random() * (canvas.width - (cellSize * 2)) + cellSize;
			const y = Math.random() * (canvas.height - (cellSize * 2)) + cellSize;
			const newCell = new Cell(x, y, cellSize, cellColor, cellSpeed);
			cells.push(newCell);
		}

// ゲームループ
		function gameLoop() {
			// 初期化
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// セルを描画する
			for (const cell of cells) {
				// 移動
				cell.x += cell.speed;
				if (cell.x + cell.radius > canvas.width || cell.x - cell.radius < 0) {
					cell.speed *= -1;
				}

// 描画
				ctx.fillStyle = 'black';
				ctx.beginPath();
				ctx.arc(cell.x, cell.y, cell.radius, 0, Math.PI * 2);
				ctx.fill();
				ctx.fillStyle = cell.color;
				ctx.font = cell.radius + 'px serif';
				ctx.textAlign = 'center';
				ctx.textBaseline = 'middle';
				ctx.fillText(cell.color, cell.x, cell.y);
			}

// 細胞が最大数に達していない場合は新しい細胞を生成する
			if (cells.length < maxCells) {
				generateNewCell();
			}

// ゲームループの再帰呼び出し
			if (isRunning) {
				requestId = requestAnimationFrame(gameLoop);
			}
		}

// 開始ボタンのクリックイベント
		document.getElementById('startButton').addEventListener('click', () => {
			if (!isRunning) {
				isRunning = true;
				requestId = requestAnimationFrame(gameLoop);
			}
		});

// 停止ボタンのクリックイベント
		document.getElementById('stopButton').addEventListener('click', () => {
			if (isRunning) {
				isRunning = false;
				cancelAnimationFrame(requestId);
				requestId = null;
			}
		});

// リセットボタンのクリックイベント
		document.getElementById('resetButton').addEventListener('click', () => {
			isRunning = false;
			cancelAnimationFrame(requestId);
			requestId = null;
			cells.length = 0;
		});
	</script>
</body>
</html>