step
This commit is contained in:
Flatlogic Bot
parent
390ee703a3
commit
866e0c05b7
@ -4,28 +4,39 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const launchButton = document.getElementById('launchButton');
|
||||
const velocityInput = document.getElementById('velocity');
|
||||
const accelerationInput = document.getElementById('acceleration');
|
||||
const burnTimeInput = document.getElementById('burnTime');
|
||||
const angleInput = document.getElementById('angle');
|
||||
const resultMessage = document.getElementById('result-message');
|
||||
|
||||
// --- Параметры симуляции ---
|
||||
const GRAVITY = 9.8; // Ускорение свободного падения (м/с^2)
|
||||
const ESCAPE_VELOCITY = 11200; // Вторая космическая скорость (м/с)
|
||||
const PIXELS_PER_METER = 0.005; // Масштаб: сколько пикселей в одном метре
|
||||
const TIME_STEP = 2.0; // Шаг времени для симуляции (влияет на скорость анимации)
|
||||
const GRAVITY = 9.8;
|
||||
const PIXELS_PER_METER = 0.01;
|
||||
const TIME_STEP = 1.0;
|
||||
|
||||
let rocket = {};
|
||||
let animationFrameId;
|
||||
let initialVelocity = 0;
|
||||
let simulationState = {};
|
||||
|
||||
function initializeState() {
|
||||
return {
|
||||
animationFrameId: null,
|
||||
elapsedTime: 0,
|
||||
acceleration: 0,
|
||||
burnTime: 0,
|
||||
angleRad: 0,
|
||||
};
|
||||
}
|
||||
|
||||
function initializeRocket() {
|
||||
return {
|
||||
x: canvas.width / 2,
|
||||
y: canvas.height - 45, // Позиция на холсте (пиксели)
|
||||
x: 30,
|
||||
y: canvas.height - 45,
|
||||
width: 10,
|
||||
height: 25,
|
||||
// Физические свойства
|
||||
y_meters: 0, // Высота в метрах
|
||||
velocityY_meters_per_sec: 0, // Скорость в м/с
|
||||
x_meters: 0,
|
||||
y_meters: 0,
|
||||
vx: 0, // Скорость по X в м/с
|
||||
vy: 0, // Скорость по Y в м/с
|
||||
};
|
||||
}
|
||||
|
||||
@ -37,21 +48,48 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
function drawRocket() {
|
||||
ctx.save();
|
||||
ctx.translate(rocket.x, rocket.y);
|
||||
|
||||
// Угол поворота ракеты зависит от вектора скорости
|
||||
// Но до старта (скорость 0) она стоит вертикально
|
||||
const angle = (rocket.vx === 0 && rocket.vy === 0)
|
||||
? -Math.PI / 2
|
||||
: Math.atan2(rocket.vy, rocket.vx);
|
||||
|
||||
// Поворачиваем ракету. Наша модель "смотрит" вправо, поэтому доп. вращение не нужно.
|
||||
ctx.rotate(angle);
|
||||
|
||||
// Рисуем пламя, если двигатель работает
|
||||
if (simulationState.elapsedTime > 0 && simulationState.elapsedTime <= simulationState.burnTime) {
|
||||
ctx.fillStyle = `rgba(255, ${Math.random() * 150 + 100}, 0, 0.8)`;
|
||||
ctx.beginPath();
|
||||
const flameLength = rocket.height * (1.5 + Math.random() * 0.5);
|
||||
ctx.moveTo(-rocket.width / 2, 0);
|
||||
ctx.lineTo(-rocket.width / 2 - flameLength, rocket.width / 2);
|
||||
ctx.lineTo(-rocket.width / 2 - flameLength, -rocket.width / 2);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// Корпус ракеты (перерисовываем, чтобы был поверх пламени)
|
||||
// Модель ракеты теперь "смотрит" вправо (по оси X)
|
||||
ctx.fillStyle = '#d0d0d0';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(rocket.x, rocket.y - rocket.height / 2);
|
||||
ctx.lineTo(rocket.x - rocket.width / 2, rocket.y + rocket.height / 2);
|
||||
ctx.lineTo(rocket.x + rocket.width / 2, rocket.y + rocket.height / 2);
|
||||
ctx.moveTo(rocket.height / 2, 0);
|
||||
ctx.lineTo(-rocket.height / 2, -rocket.width / 2);
|
||||
ctx.lineTo(-rocket.height / 2, rocket.width / 2);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
function resetSimulation() {
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
if (simulationState.animationFrameId) {
|
||||
cancelAnimationFrame(simulationState.animationFrameId);
|
||||
}
|
||||
initialVelocity = 0;
|
||||
simulationState = initializeState();
|
||||
rocket = initializeRocket();
|
||||
resultMessage.innerHTML = ' ';
|
||||
resultMessage.className = 'alert alert-secondary';
|
||||
@ -65,14 +103,27 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// 1. Обновляем физику (пошаговая симуляция)
|
||||
// Уменьшаем скорость под действием гравитации
|
||||
rocket.velocityY_meters_per_sec -= GRAVITY * TIME_STEP;
|
||||
// Обновляем высоту на основе новой скорости
|
||||
rocket.y_meters += rocket.velocityY_meters_per_sec * TIME_STEP;
|
||||
simulationState.elapsedTime += TIME_STEP;
|
||||
|
||||
// 2. Обновляем позицию для отрисовки
|
||||
// 1. Обновляем физику
|
||||
// Если двигатель работает, применяем ускорение
|
||||
if (simulationState.elapsedTime <= simulationState.burnTime) {
|
||||
const currentAccelerationX = simulationState.acceleration * Math.cos(simulationState.angleRad);
|
||||
const currentAccelerationY = simulationState.acceleration * Math.sin(simulationState.angleRad);
|
||||
rocket.vx += currentAccelerationX * TIME_STEP;
|
||||
rocket.vy += currentAccelerationY * TIME_STEP;
|
||||
}
|
||||
|
||||
// Всегда применяем гравитацию (она действует на ось Y)
|
||||
rocket.vy -= GRAVITY * TIME_STEP;
|
||||
|
||||
// Обновляем позицию в метрах
|
||||
rocket.x_meters += rocket.vx * TIME_STEP;
|
||||
rocket.y_meters += rocket.vy * TIME_STEP;
|
||||
|
||||
// 2. Обновляем позицию для отрисовки в пикселях
|
||||
const groundY = canvas.height - 45;
|
||||
rocket.x = 30 + (rocket.x_meters * PIXELS_PER_METER);
|
||||
rocket.y = groundY - (rocket.y_meters * PIXELS_PER_METER);
|
||||
|
||||
// 3. Отрисовываем сцену
|
||||
@ -81,62 +132,53 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
drawRocket();
|
||||
|
||||
// 4. Проверяем условия завершения
|
||||
const hasEscaped = initialVelocity >= ESCAPE_VELOCITY && rocket.y < -rocket.height;
|
||||
const hasCrashed = rocket.y_meters <= 0 && initialVelocity < ESCAPE_VELOCITY;
|
||||
const hasCrashed = rocket.y_meters < 0 && simulationState.elapsedTime > 1;
|
||||
const outOfBounds = rocket.x > canvas.width + rocket.height;
|
||||
|
||||
if (hasEscaped) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasCrashed) {
|
||||
// Фиксируем ракету на земле
|
||||
if (hasCrashed || outOfBounds) {
|
||||
rocket.y_meters = 0;
|
||||
rocket.y = groundY;
|
||||
clearCanvas();
|
||||
drawEarth();
|
||||
drawRocket();
|
||||
|
||||
resultMessage.innerHTML = "<strong>Неудача.</strong> Ракета упала обратно на Землю.";
|
||||
resultMessage.innerHTML = outOfBounds
|
||||
? "<strong>Неудача.</strong> Ракета улетела за пределы видимости."
|
||||
: "<strong>Неудача.</strong> Ракета упала обратно на Землю.";
|
||||
resultMessage.className = 'alert alert-danger';
|
||||
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
|
||||
cancelAnimationFrame(simulationState.animationFrameId);
|
||||
simulationState.animationFrameId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Продолжаем анимацию
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
simulationState.animationFrameId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
launchButton.addEventListener('click', () => {
|
||||
const velocityValue = parseFloat(velocityInput.value);
|
||||
const accelValue = parseFloat(accelerationInput.value);
|
||||
const burnTimeValue = parseFloat(burnTimeInput.value);
|
||||
const angleValue = parseFloat(angleInput.value);
|
||||
|
||||
if (isNaN(velocityValue) || velocityValue < 0) {
|
||||
resultMessage.innerHTML = 'Пожалуйста, введите положительное число.';
|
||||
if (isNaN(accelValue) || isNaN(burnTimeValue) || isNaN(angleValue) || accelValue <= 0 || burnTimeValue <= 0 || angleValue < 0 || angleValue > 90) {
|
||||
resultMessage.innerHTML = 'Пожалуйста, введите корректные значения (ускорение > 0, время > 0, угол 0-90).';
|
||||
resultMessage.className = 'alert alert-warning';
|
||||
return;
|
||||
}
|
||||
|
||||
resetSimulation();
|
||||
|
||||
initialVelocity = velocityValue;
|
||||
rocket.velocityY_meters_per_sec = initialVelocity;
|
||||
simulationState.acceleration = accelValue;
|
||||
simulationState.burnTime = burnTimeValue;
|
||||
simulationState.angleRad = angleValue * (Math.PI / 180);
|
||||
|
||||
if (initialVelocity >= ESCAPE_VELOCITY) {
|
||||
resultMessage.innerHTML = "<strong>Успешный запуск!</strong> Ракета улетит в космос.";
|
||||
resultMessage.className = 'alert alert-success';
|
||||
} else {
|
||||
resultMessage.innerHTML = "Запуск... Ракета должна упасть.";
|
||||
resultMessage.className = 'alert alert-info';
|
||||
}
|
||||
resultMessage.innerHTML = "Запуск...";
|
||||
resultMessage.className = 'alert alert-info';
|
||||
|
||||
if (!animationFrameId) {
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
if (!simulationState.animationFrameId) {
|
||||
simulationState.animationFrameId = requestAnimationFrame(animate);
|
||||
}
|
||||
});
|
||||
|
||||
// Начальная отрисовка
|
||||
resetSimulation();
|
||||
});
|
||||
@ -51,7 +51,7 @@
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="text-center section-title">Симулятор Запуска Ракеты</h1>
|
||||
<p class="text-center mb-4">Введите начальную скорость ракеты в метрах в секунду (м/с).<br>Чтобы преодолеть притяжение Земли, нужна скорость не менее 11 200 м/с.</p>
|
||||
<p class="text-center mb-4">Задайте параметры запуска: ускорение, время работы двигателя и угол.<br>Наблюдайте, как ракета набирает скорость и летит по траектории.</p>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-5">
|
||||
@ -60,8 +60,16 @@
|
||||
<!-- Форма теперь без перезагрузки страницы -->
|
||||
<form onsubmit="return false;">
|
||||
<div class="mb-3">
|
||||
<label for="velocity" class="form-label">Начальная скорость (м/с):</label>
|
||||
<input type="number" class="form-control" id="velocity" name="velocity" placeholder="Например, 12000" value="10000" required>
|
||||
<label for="acceleration" class="form-label">Ускорение (м/с²):</label>
|
||||
<input type="number" class="form-control" id="acceleration" name="acceleration" placeholder="Например, 100" value="100" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="burnTime" class="form-label">Время работы двигателя (сек):</label>
|
||||
<input type="number" class="form-control" id="burnTime" name="burnTime" placeholder="Например, 60" value="60" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="angle" class="form-label">Угол запуска (°):</label>
|
||||
<input type="number" class="form-control" id="angle" name="angle" placeholder="от 0 до 90" value="90" min="0" max="90" required>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<!-- Кнопка теперь запускает JS-функцию -->
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user