simulator
This commit is contained in:
Flatlogic Bot
parent
f2fd1d30f2
commit
390ee703a3
142
assets/js/simulator.js
Normal file
142
assets/js/simulator.js
Normal file
@ -0,0 +1,142 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const canvas = document.getElementById('simulationCanvas');
|
||||
if (!canvas) return;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const launchButton = document.getElementById('launchButton');
|
||||
const velocityInput = document.getElementById('velocity');
|
||||
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; // Шаг времени для симуляции (влияет на скорость анимации)
|
||||
|
||||
let rocket = {};
|
||||
let animationFrameId;
|
||||
let initialVelocity = 0;
|
||||
|
||||
function initializeRocket() {
|
||||
return {
|
||||
x: canvas.width / 2,
|
||||
y: canvas.height - 45, // Позиция на холсте (пиксели)
|
||||
width: 10,
|
||||
height: 25,
|
||||
// Физические свойства
|
||||
y_meters: 0, // Высота в метрах
|
||||
velocityY_meters_per_sec: 0, // Скорость в м/с
|
||||
};
|
||||
}
|
||||
|
||||
function drawEarth() {
|
||||
ctx.fillStyle = '#2c5c23';
|
||||
ctx.beginPath();
|
||||
ctx.arc(canvas.width / 2, canvas.height + canvas.height - 50, canvas.height, 0, Math.PI, true);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function drawRocket() {
|
||||
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.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function resetSimulation() {
|
||||
if (animationFrameId) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
}
|
||||
initialVelocity = 0;
|
||||
rocket = initializeRocket();
|
||||
resultMessage.innerHTML = ' ';
|
||||
resultMessage.className = 'alert alert-secondary';
|
||||
clearCanvas();
|
||||
drawEarth();
|
||||
drawRocket();
|
||||
}
|
||||
|
||||
function clearCanvas() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
|
||||
function animate() {
|
||||
// 1. Обновляем физику (пошаговая симуляция)
|
||||
// Уменьшаем скорость под действием гравитации
|
||||
rocket.velocityY_meters_per_sec -= GRAVITY * TIME_STEP;
|
||||
// Обновляем высоту на основе новой скорости
|
||||
rocket.y_meters += rocket.velocityY_meters_per_sec * TIME_STEP;
|
||||
|
||||
// 2. Обновляем позицию для отрисовки
|
||||
const groundY = canvas.height - 45;
|
||||
rocket.y = groundY - (rocket.y_meters * PIXELS_PER_METER);
|
||||
|
||||
// 3. Отрисовываем сцену
|
||||
clearCanvas();
|
||||
drawEarth();
|
||||
drawRocket();
|
||||
|
||||
// 4. Проверяем условия завершения
|
||||
const hasEscaped = initialVelocity >= ESCAPE_VELOCITY && rocket.y < -rocket.height;
|
||||
const hasCrashed = rocket.y_meters <= 0 && initialVelocity < ESCAPE_VELOCITY;
|
||||
|
||||
if (hasEscaped) {
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasCrashed) {
|
||||
// Фиксируем ракету на земле
|
||||
rocket.y_meters = 0;
|
||||
rocket.y = groundY;
|
||||
clearCanvas();
|
||||
drawEarth();
|
||||
drawRocket();
|
||||
|
||||
resultMessage.innerHTML = "<strong>Неудача.</strong> Ракета упала обратно на Землю.";
|
||||
resultMessage.className = 'alert alert-danger';
|
||||
|
||||
cancelAnimationFrame(animationFrameId);
|
||||
animationFrameId = null;
|
||||
return;
|
||||
}
|
||||
|
||||
// Продолжаем анимацию
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
launchButton.addEventListener('click', () => {
|
||||
const velocityValue = parseFloat(velocityInput.value);
|
||||
|
||||
if (isNaN(velocityValue) || velocityValue < 0) {
|
||||
resultMessage.innerHTML = 'Пожалуйста, введите положительное число.';
|
||||
resultMessage.className = 'alert alert-warning';
|
||||
return;
|
||||
}
|
||||
|
||||
resetSimulation();
|
||||
|
||||
initialVelocity = velocityValue;
|
||||
rocket.velocityY_meters_per_sec = initialVelocity;
|
||||
|
||||
if (initialVelocity >= ESCAPE_VELOCITY) {
|
||||
resultMessage.innerHTML = "<strong>Успешный запуск!</strong> Ракета улетит в космос.";
|
||||
resultMessage.className = 'alert alert-success';
|
||||
} else {
|
||||
resultMessage.innerHTML = "Запуск... Ракета должна упасть.";
|
||||
resultMessage.className = 'alert alert-info';
|
||||
}
|
||||
|
||||
if (!animationFrameId) {
|
||||
animationFrameId = requestAnimationFrame(animate);
|
||||
}
|
||||
});
|
||||
|
||||
// Начальная отрисовка
|
||||
resetSimulation();
|
||||
});
|
||||
@ -56,6 +56,7 @@
|
||||
<li class="nav-item"><a class="nav-link" href="#contact">Контакт</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/admin">Админка</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="tools.php">Инструменты</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="simulator.php">Симулятор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -70,6 +70,7 @@
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#contact">Контакт</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/admin">Админка</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="tools.php">Инструменты</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="simulator.php">Симулятор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -49,6 +49,7 @@
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#contact">Контакт</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/admin">Админка</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="tools.php">Инструменты</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="simulator.php">Симулятор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
110
simulator.php
Normal file
110
simulator.php
Normal file
@ -0,0 +1,110 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- SEO and Meta Tags -->
|
||||
<title>Симулятор | Личное Портфолио</title>
|
||||
<meta name="description" content="Страница симулятора.">
|
||||
|
||||
<!-- Google Fonts: Poppins -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<!-- Bootstrap Icons -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
||||
</head>
|
||||
<body class="dark-theme">
|
||||
|
||||
<!-- Particles.js container -->
|
||||
<div id="particles-js"></div>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="sticky-top">
|
||||
<nav class="navbar navbar-expand-lg">
|
||||
<div class="container">
|
||||
<a class="navbar-brand fw-bold" href="index.php">Имя Фамилия</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#about">Обо мне</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="projects.php">Портфолио</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="index.php#contact">Контакт</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="/admin">Админка</a></li>
|
||||
<li class="nav-item"><a class="nav-link" href="tools.php">Инструменты</a></li>
|
||||
<li class="nav-item"><a class="nav-link active" href="simulator.php">Симулятор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="text-center section-title">Симулятор Запуска Ракеты</h1>
|
||||
<p class="text-center mb-4">Введите начальную скорость ракеты в метрах в секунду (м/с).<br>Чтобы преодолеть притяжение Земли, нужна скорость не менее 11 200 м/с.</p>
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-6 col-lg-5">
|
||||
<div class="card bg-dark-2 text-white">
|
||||
<div class="card-body">
|
||||
<!-- Форма теперь без перезагрузки страницы -->
|
||||
<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>
|
||||
</div>
|
||||
<div class="d-grid">
|
||||
<!-- Кнопка теперь запускает JS-функцию -->
|
||||
<button type="button" id="launchButton" class="btn btn-primary btn-lg">Запуск</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Область для анимации -->
|
||||
<div class="row justify-content-center mt-4">
|
||||
<div class="col-md-10 col-lg-8">
|
||||
<div class="card bg-dark-2 text-white">
|
||||
<div class="card-body text-center">
|
||||
<h5 class="card-title mb-3">Траектория полёта</h5>
|
||||
<canvas id="simulationCanvas" width="600" height="400" style="background-color: #0c1021; border-radius: 5px;"></canvas>
|
||||
<div id="result-message" class="mt-3"> </div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="text-center p-4">
|
||||
<div class="container">
|
||||
<p class="mb-0">© <?php echo date("Y"); ?> Имя Фамилия. Все права защищены.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Bootstrap JS Bundle -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
|
||||
|
||||
<!-- Particles.js -->
|
||||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
|
||||
<!-- Custom JS -->
|
||||
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
||||
<script src="assets/js/simulator.js?v=<?php echo time(); ?>"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -61,6 +61,7 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['user_prompt'])) {
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="tools.php">Инструменты</a>
|
||||
</li>
|
||||
<li class="nav-item"><a class="nav-link" href="simulator.php">Симулятор</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user