ウラン：50個
中性子：1個
生成物1：0個
生成物2：0個
中性子1：0個
中性子2：0個
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>核分裂反応視覚化アプリ</title>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<p>ウラン：<span id="uranium-count">50</span>個</p>
<p>中性子：<span id="neutron-count">1</span>個</p>
<p>生成物1：<span id="product1-count">0</span>個</p>
<p>生成物2：<span id="product2-count">0</span>個</p>
<p>中性子1：<span id="neutron1-count">0</span>個</p>
<p>中性子2：<span id="neutron2-count">0</span>個</p>
<button onclick="startSimulation()">開始</button>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const uraniumCountDisplay = document.getElementById('uranium-count');
const neutronCountDisplay = document.getElementById('neutron-count');
const product1CountDisplay = document.getElementById('product1-count');
const product2CountDisplay = document.getElementById('product2-count');
const neutron1CountDisplay = document.getElementById('neutron1-count');
const neutron2CountDisplay = document.getElementById('neutron2-count');
const particleColors = {
'uranium': 'green',
'neutron': 'red',
'product1': 'blue',
'product2': 'purple',
'neutron1': 'orange',
'neutron2': 'yellow'
};
let particles = [];
function init() {
particles = [];
for (let i = 0; i < 50; i++) {
particles.push({
'type': 'uranium',
'x': Math.random() * canvas.width,
'y': Math.random() * canvas.height,
'vx': Math.random() * 2 - 1,
'vy': Math.random() * 2 - 1
});
}
particles.push({
'type': 'neutron',
'x': Math.random() * canvas.width,
'y': Math.random() * canvas.height,
'vx': Math.random() * 2 - 1,
'vy': Math.random() * 2 - 1
});
setCountDisplays();
}
function startSimulation() {
init();
requestAnimationFrame(update);
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Move particles
particles.forEach((particle) => {
particle.x += particle.vx;
particle.y += particle.vy;
if (particle.x < 0 || particle.x > canvas.width) {
particle.vx *= -1;
}
if (particle.y < 0 || particle.y > canvas.height) {
particle.vy *= -1;
}
});
// Collide particles
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const particle1 = particles[i];
const particle2 = particles[j];
if (getDistance(particle1, particle2) < 10) {
if (particle1.type === 'uranium' && particle2.type === 'neutron') {
particles.splice(j, 1);
particle1.type = 'product1';
particles.push(
{'type': 'product2', 'x': particle1.x, 'y': particle1.y, 'vx': Math.random() * 2 - 1, 'vy': Math.random() * 2 - 1},
{'type': 'neutron1', 'x': particle1.x, 'y': particle1.y, 'vx': Math.random() * 2 - 1, 'vy': Math.random() * 2 - 1},
{'type': 'neutron2', 'x': particle1.x, 'y': particle1.y, 'vx': Math.random() * 2 - 1, 'vy': Math.random() * 2 - 1}
);
setCountDisplays();
break;
} else if (particle1.type === 'neutron' && particle2.type === 'uranium') {
particles.splice(i, 1);
particle2.type = 'product1';
particles.push(
{'type': 'product2', 'x': particle2.x, 'y': particle2.y, 'vx': Math.random() * 2 - 1, 'vy': Math.random() * 2 - 1},
{'type': 'neutron1', 'x': particle2.x, 'y': particle2.y, 'vx': Math.random() * 2 - 1, 'vy': Math.random() * 2 - 1},
{'type': 'neutron2', 'x': particle2.x, 'y': particle2.y, 'vx': Math.random() * 2 - 1, 'vy': Math.random() * 2 - 1}
);
setCountDisplays();
break;
}
}
}
}
// Draw particles
particles.forEach((particle) => {
ctx.fillStyle = particleColors[particle.type];
ctx.beginPath();
ctx.arc(particle.x, particle.y, 5, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
});
// Continue simulation or stop
if (hasUranium()) {
requestAnimationFrame(update);
}
}
function setCountDisplays() {
uraniumCountDisplay.innerText = countParticles('uranium');
neutronCountDisplay.innerText = countParticles('neutron');
product1CountDisplay.innerText = countParticles('product1');
product2CountDisplay.innerText = countParticles('product2');
neutron1CountDisplay.innerText = countParticles('neutron1');
neutron2CountDisplay.innerText = countParticles('neutron2');
}
function countParticles(type) {
let count = 0;
particles.forEach((particle) => {
if (particle.type === type) {
count++;
}
});
return count;
}
function hasUranium() {
let hasUranium = false;
particles.forEach((particle) => {
if (particle.type === 'uranium') {
hasUranium = true;
}
});
return hasUranium;
}
function getDistance(particle1, particle2) {
const dx = particle1.x - particle2.x;
const dy = particle1.y - particle2.y;
return Math.sqrt(dx * dx + dy * dy);
}
</script>
</body>
</html>