681 lines
24 KiB
JavaScript
681 lines
24 KiB
JavaScript
// Состояние плеера
|
||
let width = 15;
|
||
let height = 15;
|
||
let map = [];
|
||
let solution = null;
|
||
let trajectory = [];
|
||
let currentStep = 0;
|
||
let isPlaying = false;
|
||
let playbackSpeed = 5;
|
||
let playbackInterval = null;
|
||
let startPosition = null;
|
||
|
||
let scale = 1;
|
||
let offsetX = 0;
|
||
let offsetY = 0;
|
||
let isPanning = false;
|
||
let startPanX = 0;
|
||
let startPanY = 0;
|
||
|
||
// Функция обработки ошибок во время воспроизведения
|
||
function handlePlaybackError(message) {
|
||
alert(`❌ Ошибка воспроизведения: ${message}`);
|
||
pauseVisualization();
|
||
// Сбрасываем счёт, но не очищаем визуализацию
|
||
if (trajectory && trajectory.length > 0) {
|
||
trajectory.forEach(step => {
|
||
step.score = 0;
|
||
step.passedCheckpoints = 0;
|
||
});
|
||
updateStepInfo();
|
||
drawMap();
|
||
}
|
||
console.error('Ошибка воспроизведения:', message);
|
||
}
|
||
|
||
// Функция проверки корректности ускорения
|
||
function validateAcceleration(ax, ay, x, y, vx, vy) {
|
||
// Проверка выезда за границы карты
|
||
if (x < 0 || x >= width || y < 0 || y >= height) {
|
||
return `Выезд за границы карты на позиции (${x.toFixed(1)}, ${y.toFixed(1)})`;
|
||
}
|
||
|
||
// Получаем тип текущей ячейки
|
||
const cellX = Math.floor(x);
|
||
const cellY = Math.floor(y);
|
||
const cellType = map[cellY] ? map[cellY][cellX] : -1;
|
||
|
||
// Проверка правил для разных типов ячеек
|
||
switch (cellType) {
|
||
case 0: // Обычная дорога
|
||
if (ax < -2 || ax > 2 || ay < -2 || ay > 2) {
|
||
return `На дороге ускорение должно быть от -2 до +2, получено (${ax}, ${ay})`;
|
||
}
|
||
break;
|
||
|
||
case 1: // Камень
|
||
// Можно проезжать через камни, но нельзя на них останавливаться
|
||
if (vx === 0 && vy === 0 && ax === 0 && ay === 0) {
|
||
return `Нельзя останавливаться на камне на позиции (${cellX}, ${cellY})`;
|
||
}
|
||
if (ax < -2 || ax > 2 || ay < -2 || ay > 2) {
|
||
return `На камне ускорение должно быть от -2 до +2, получено (${ax}, ${ay})`;
|
||
}
|
||
break;
|
||
|
||
case 2: // Снег
|
||
if (ax < -1 || ax > 1 || ay < -1 || ay > 1) {
|
||
return `На снегу ускорение должно быть от -1 до +1, получено (${ax}, ${ay})`;
|
||
}
|
||
break;
|
||
|
||
case 3: // Лёд
|
||
if (ax !== 0 || ay !== 0) {
|
||
return `На льду нельзя менять ускорение, получено (${ax}, ${ay})`;
|
||
}
|
||
break;
|
||
|
||
case 4: // Чекпоинт
|
||
if (ax < -2 || ax > 2 || ay < -2 || ay > 2) {
|
||
return `На чекпоинте ускорение должно быть от -2 до +2, получено (${ax}, ${ay})`;
|
||
}
|
||
break;
|
||
|
||
case 5: // Старт
|
||
if (ax < -2 || ax > 2 || ay < -2 || ay > 2) {
|
||
return `На старте ускорение должно быть от -2 до +2, получено (${ax}, ${ay})`;
|
||
}
|
||
break;
|
||
|
||
default:
|
||
return `Неизвестный тип ячейки ${cellType} на позиции (${cellX}, ${cellY})`;
|
||
}
|
||
|
||
return null; // Нет ошибок
|
||
}
|
||
|
||
// Canvas элементы
|
||
const canvas = document.getElementById('mapCanvas');
|
||
const ctx = canvas.getContext('2d');
|
||
|
||
// Инициализация
|
||
function init() {
|
||
initMap();
|
||
resizeCanvas();
|
||
drawMap();
|
||
updateControlsState();
|
||
updateStepInfo();
|
||
}
|
||
|
||
// Инициализация пустой карты
|
||
function initMap() {
|
||
map = Array(height).fill(null).map(() => Array(width).fill(0));
|
||
}
|
||
|
||
function resizeCanvas() {
|
||
const wrapper = canvas.parentElement;
|
||
canvas.width = Math.max(1000, wrapper.clientWidth || 1000);
|
||
canvas.height = Math.max(1000, wrapper.clientHeight || 1000);
|
||
}
|
||
|
||
// Отрисовка карты
|
||
function drawMap() {
|
||
ctx.setTransform(1, 0, 0, 1, 0, 0);
|
||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||
ctx.translate(offsetX, offsetY);
|
||
ctx.scale(scale, scale);
|
||
drawCells(ctx, map, width, height);
|
||
drawGrid(ctx, width, height);
|
||
drawMarkers(ctx, map, width, height);
|
||
|
||
if (trajectory.length > 0) {
|
||
drawTrajectory();
|
||
}
|
||
}
|
||
|
||
// Рисование траектории решения
|
||
function drawTrajectory() {
|
||
if (!trajectory || trajectory.length === 0) return;
|
||
|
||
// Рисуем все предыдущие позиции как след
|
||
ctx.strokeStyle = '#667eea';
|
||
ctx.lineWidth = 3;
|
||
ctx.lineCap = 'round';
|
||
ctx.lineJoin = 'round';
|
||
|
||
ctx.beginPath();
|
||
for (let i = 0; i <= currentStep && i < trajectory.length; i++) {
|
||
const pos = trajectory[i];
|
||
const screenX = pos.x * CELL_SIZE + CELL_SIZE / 2;
|
||
const screenY = pos.y * CELL_SIZE + CELL_SIZE / 2;
|
||
|
||
if (i === 0) {
|
||
ctx.moveTo(screenX, screenY);
|
||
} else {
|
||
ctx.lineTo(screenX, screenY);
|
||
}
|
||
}
|
||
ctx.stroke();
|
||
|
||
// Рисуем точки на каждом шаге
|
||
for (let i = 0; i <= currentStep && i < trajectory.length; i++) {
|
||
const pos = trajectory[i];
|
||
const screenX = pos.x * CELL_SIZE + CELL_SIZE / 2;
|
||
const screenY = pos.y * CELL_SIZE + CELL_SIZE / 2;
|
||
|
||
ctx.beginPath();
|
||
ctx.arc(screenX, screenY, 4, 0, Math.PI * 2);
|
||
ctx.fillStyle = '#667eea';
|
||
ctx.fill();
|
||
ctx.strokeStyle = 'white';
|
||
ctx.lineWidth = 2;
|
||
ctx.stroke();
|
||
}
|
||
|
||
// Рисуем текущую позицию большим кругом
|
||
if (currentStep < trajectory.length) {
|
||
const current = trajectory[currentStep];
|
||
const screenX = current.x * CELL_SIZE + CELL_SIZE / 2;
|
||
const screenY = current.y * CELL_SIZE + CELL_SIZE / 2;
|
||
|
||
// Пульсирующий эффект
|
||
ctx.beginPath();
|
||
ctx.arc(screenX, screenY, 10, 0, Math.PI * 2);
|
||
ctx.fillStyle = '#f5576c';
|
||
ctx.fill();
|
||
ctx.strokeStyle = 'white';
|
||
ctx.lineWidth = 3;
|
||
ctx.stroke();
|
||
|
||
// Стрелка направления скорости
|
||
if (current.vx !== 0 || current.vy !== 0) {
|
||
const arrowLen = 20;
|
||
const angle = Math.atan2(current.vy, current.vx);
|
||
const endX = screenX + Math.cos(angle) * arrowLen;
|
||
const endY = screenY + Math.sin(angle) * arrowLen;
|
||
|
||
ctx.beginPath();
|
||
ctx.moveTo(screenX, screenY);
|
||
ctx.lineTo(endX, endY);
|
||
ctx.strokeStyle = '#f5576c';
|
||
ctx.lineWidth = 3;
|
||
ctx.stroke();
|
||
|
||
// Наконечник стрелки
|
||
const headLen = 8;
|
||
const headAngle = Math.PI / 6;
|
||
ctx.beginPath();
|
||
ctx.moveTo(endX, endY);
|
||
ctx.lineTo(
|
||
endX - headLen * Math.cos(angle - headAngle),
|
||
endY - headLen * Math.sin(angle - headAngle)
|
||
);
|
||
ctx.moveTo(endX, endY);
|
||
ctx.lineTo(
|
||
endX - headLen * Math.cos(angle + headAngle),
|
||
endY - headLen * Math.sin(angle + headAngle)
|
||
);
|
||
ctx.stroke();
|
||
}
|
||
}
|
||
}
|
||
|
||
// Симуляция траектории на основе векторов ускорений
|
||
function simulateTrajectory(accelerations, start) {
|
||
const traj = [];
|
||
let x = start.x;
|
||
let y = start.y;
|
||
let vx = 0;
|
||
let vy = 0;
|
||
let passedCheckpoints = new Set();
|
||
let totalSteps = accelerations.length;
|
||
|
||
// Начальная позиция
|
||
traj.push({ x, y, vx, vy, ax: 0, ay: 0, passedCheckpoints: 0, score: 0 });
|
||
|
||
// Применяем каждое ускорение
|
||
for (let i = 0; i < accelerations.length; i++) {
|
||
const [ax, ay] = accelerations[i];
|
||
|
||
// Обновляем скорость
|
||
vx += ax;
|
||
vy += ay;
|
||
|
||
// Обновляем позицию
|
||
x += vx;
|
||
y += vy;
|
||
|
||
// Проверяем, попали ли на чекпоинт
|
||
const checkpointKey = `${Math.floor(x)},${Math.floor(y)}`;
|
||
if (map[Math.floor(y)] && map[Math.floor(y)][Math.floor(x)] === 4) {
|
||
passedCheckpoints.add(checkpointKey);
|
||
}
|
||
|
||
// Вычисляем очки по формуле: 100 * количество пройденных чекпоинтов ^ 1.3 / количество шагов
|
||
const checkpointCount = passedCheckpoints.size;
|
||
const score = totalSteps > 0 ? Math.round(100 * Math.pow(checkpointCount, 1.3) / totalSteps) : 0;
|
||
|
||
traj.push({
|
||
x, y, vx, vy, ax, ay,
|
||
passedCheckpoints: checkpointCount,
|
||
score: score
|
||
});
|
||
}
|
||
|
||
return traj;
|
||
}
|
||
|
||
// Загрузка карты из JSON
|
||
function loadMap(event) {
|
||
const file = event.target.files[0];
|
||
if (!file) return;
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
try {
|
||
const data = JSON.parse(e.target.result);
|
||
const validated = validateMap(data);
|
||
|
||
// Импортируем карту
|
||
height = validated.height;
|
||
width = validated.width;
|
||
map = validated.map;
|
||
|
||
// Очищаем траекторию при загрузке новой карты
|
||
clearVisualization();
|
||
|
||
resizeCanvas();
|
||
drawMap();
|
||
|
||
// Включаем кнопку "Найти решение" после загрузки карты
|
||
document.getElementById('solveBtn').disabled = false;
|
||
|
||
document.getElementById('loadMapBtn').textContent = '✓ Карта загружена';
|
||
setTimeout(() => {
|
||
document.getElementById('loadMapBtn').textContent = '📂 Загрузить карту';
|
||
}, 2000);
|
||
|
||
alert('Карта успешно загружена!');
|
||
} catch (error) {
|
||
alert('Ошибка при загрузке карты: ' + error.message);
|
||
console.error('Ошибка загрузки:', error);
|
||
}
|
||
};
|
||
|
||
reader.readAsText(file);
|
||
event.target.value = '';
|
||
}
|
||
|
||
// Загрузка решения из JSON
|
||
function loadSolution(event) {
|
||
const file = event.target.files[0];
|
||
if (!file) return;
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = (e) => {
|
||
try {
|
||
const data = JSON.parse(e.target.result);
|
||
|
||
if (!data.solution || !Array.isArray(data.solution)) {
|
||
throw new Error('Неверный формат: отсутствует массив solution');
|
||
}
|
||
|
||
// Проверяем, что это массив массивов из двух чисел
|
||
if (!data.solution.every(acc => Array.isArray(acc) && acc.length === 2)) {
|
||
throw new Error('Неверный формат: solution должен быть массивом [[ax, ay], ...]');
|
||
}
|
||
|
||
// Находим стартовую позицию
|
||
startPosition = findStartPosition(map, width, height);
|
||
if (!startPosition) {
|
||
throw new Error('На карте не найдена точка старта (тип 5). Сначала загрузите карту с точкой старта.');
|
||
}
|
||
|
||
solution = data.solution;
|
||
trajectory = simulateTrajectory(solution, startPosition);
|
||
currentStep = 0;
|
||
|
||
// Обновляем состояние кнопок и информацию
|
||
updateControlsState();
|
||
updateStepInfo();
|
||
drawMap();
|
||
|
||
document.getElementById('loadSolutionBtn').textContent = '✓ Решение загружено';
|
||
setTimeout(() => {
|
||
document.getElementById('loadSolutionBtn').textContent = '🎬 Загрузить решение';
|
||
}, 2000);
|
||
|
||
alert(`Решение загружено! ${solution.length} шагов.`);
|
||
} catch (error) {
|
||
alert('Ошибка при загрузке решения: ' + error.message);
|
||
console.error('Ошибка загрузки:', error);
|
||
}
|
||
};
|
||
|
||
reader.readAsText(file);
|
||
event.target.value = '';
|
||
}
|
||
|
||
// Обновление состояния элементов управления
|
||
function updateControlsState() {
|
||
const hasTrajectory = trajectory && trajectory.length > 0;
|
||
|
||
document.getElementById('playBtn').disabled = !hasTrajectory;
|
||
document.getElementById('pauseBtn').disabled = !hasTrajectory || !isPlaying;
|
||
document.getElementById('resetBtn').disabled = !hasTrajectory;
|
||
document.getElementById('backBtn').disabled = !hasTrajectory;
|
||
document.getElementById('forwardBtn').disabled = !hasTrajectory;
|
||
document.getElementById('speedSlider').disabled = !hasTrajectory;
|
||
}
|
||
|
||
// Обновление информации о текущем шаге
|
||
function updateStepInfo() {
|
||
if (!trajectory || trajectory.length === 0) {
|
||
document.getElementById('stepNumber').textContent = '0 / 0';
|
||
document.getElementById('positionValue').textContent = '(0, 0)';
|
||
document.getElementById('velocityValue').textContent = '(0, 0)';
|
||
document.getElementById('accelerationValue').textContent = '(0, 0)';
|
||
document.getElementById('scoreValue').textContent = '0';
|
||
return;
|
||
}
|
||
|
||
const current = trajectory[currentStep];
|
||
|
||
document.getElementById('stepNumber').textContent = `${currentStep} / ${trajectory.length - 1}`;
|
||
document.getElementById('positionValue').textContent = `(${current.x}, ${current.y})`;
|
||
document.getElementById('velocityValue').textContent = `(${current.vx}, ${current.vy})`;
|
||
document.getElementById('accelerationValue').textContent = `(${current.ax}, ${current.ay})`;
|
||
document.getElementById('scoreValue').textContent = current.score || 0;
|
||
}
|
||
|
||
// Воспроизведение визуализации
|
||
function playVisualization() {
|
||
if (!trajectory || trajectory.length === 0) return;
|
||
|
||
isPlaying = true;
|
||
updateControlsState();
|
||
|
||
playbackInterval = setInterval(() => {
|
||
if (currentStep < trajectory.length - 1) {
|
||
const nextStep = currentStep + 1;
|
||
const current = trajectory[currentStep];
|
||
const next = trajectory[nextStep];
|
||
|
||
// Проверяем корректность ускорения для следующего шага
|
||
const error = validateAcceleration(next.ax, next.ay, current.x, current.y, current.vx, current.vy);
|
||
if (error) {
|
||
handlePlaybackError(`Шаг ${nextStep + 1}: ${error}`);
|
||
return;
|
||
}
|
||
|
||
// Проверяем корректность новой позиции
|
||
const positionError = validateAcceleration(0, 0, next.x, next.y, next.vx, next.vy);
|
||
if (positionError && positionError.includes('Выезд за границы')) {
|
||
handlePlaybackError(`Шаг ${nextStep + 1}: ${positionError}`);
|
||
return;
|
||
}
|
||
|
||
currentStep = nextStep;
|
||
updateStepInfo();
|
||
drawMap();
|
||
} else {
|
||
pauseVisualization();
|
||
}
|
||
}, 1000 / playbackSpeed);
|
||
}
|
||
|
||
// Пауза воспроизведения
|
||
function pauseVisualization() {
|
||
isPlaying = false;
|
||
updateControlsState();
|
||
|
||
if (playbackInterval) {
|
||
clearInterval(playbackInterval);
|
||
playbackInterval = null;
|
||
}
|
||
}
|
||
|
||
// Сброс визуализации
|
||
function resetVisualization() {
|
||
pauseVisualization();
|
||
currentStep = 0;
|
||
updateStepInfo();
|
||
drawMap();
|
||
}
|
||
|
||
// Шаг вперед
|
||
function stepForward() {
|
||
if (!trajectory || trajectory.length === 0) return;
|
||
|
||
if (currentStep < trajectory.length - 1) {
|
||
const nextStep = currentStep + 1;
|
||
const current = trajectory[currentStep];
|
||
const next = trajectory[nextStep];
|
||
|
||
// Проверяем корректность ускорения для следующего шага
|
||
const error = validateAcceleration(next.ax, next.ay, current.x, current.y, current.vx, current.vy);
|
||
if (error) {
|
||
handlePlaybackError(`Шаг ${nextStep + 1}: ${error}`);
|
||
return;
|
||
}
|
||
|
||
// Проверяем корректность новой позиции
|
||
const positionError = validateAcceleration(0, 0, next.x, next.y, next.vx, next.vy);
|
||
if (positionError && positionError.includes('Выезд за границы')) {
|
||
handlePlaybackError(`Шаг ${nextStep + 1}: ${positionError}`);
|
||
return;
|
||
}
|
||
|
||
currentStep = nextStep;
|
||
updateStepInfo();
|
||
drawMap();
|
||
}
|
||
}
|
||
|
||
// Шаг назад
|
||
function stepBackward() {
|
||
if (!trajectory || trajectory.length === 0) return;
|
||
|
||
if (currentStep > 0) {
|
||
currentStep--;
|
||
updateStepInfo();
|
||
drawMap();
|
||
}
|
||
}
|
||
|
||
// Обновление скорости воспроизведения
|
||
function updateSpeed() {
|
||
playbackSpeed = parseInt(document.getElementById('speedSlider').value);
|
||
document.getElementById('speedValue').textContent = `${playbackSpeed}x`;
|
||
|
||
// Если воспроизведение идет, перезапускаем с новой скоростью
|
||
if (isPlaying) {
|
||
pauseVisualization();
|
||
playVisualization();
|
||
}
|
||
}
|
||
|
||
// Очистка визуализации
|
||
function clearVisualization() {
|
||
pauseVisualization();
|
||
solution = null;
|
||
trajectory = [];
|
||
currentStep = 0;
|
||
startPosition = null;
|
||
|
||
updateControlsState();
|
||
updateStepInfo();
|
||
drawMap();
|
||
}
|
||
|
||
// Решение карты через API
|
||
async function solveMap() {
|
||
const solveBtn = document.getElementById('solveBtn');
|
||
const statusDiv = document.getElementById('solverStatus');
|
||
|
||
// Проверяем, что карта загружена
|
||
if (!map || map.length === 0) {
|
||
alert('⚠️ Сначала загрузите карту!');
|
||
return;
|
||
}
|
||
|
||
// Находим стартовую позицию
|
||
startPosition = findStartPosition(map, width, height);
|
||
if (!startPosition) {
|
||
alert('⚠️ На карте не найдена точка старта (тип 5)!');
|
||
return;
|
||
}
|
||
|
||
// Проверяем наличие чекпоинтов
|
||
let hasCheckpoint = false;
|
||
for (let y = 0; y < height; y++) {
|
||
for (let x = 0; x < width; x++) {
|
||
if (map[y][x] === 4) {
|
||
hasCheckpoint = true;
|
||
break;
|
||
}
|
||
}
|
||
if (hasCheckpoint) break;
|
||
}
|
||
|
||
if (!hasCheckpoint) {
|
||
alert('⚠️ На карте нет чекпоинтов (тип 4)!');
|
||
return;
|
||
}
|
||
|
||
// Отключаем кнопку и показываем статус
|
||
solveBtn.disabled = true;
|
||
solveBtn.textContent = '⏳ Поиск решения...';
|
||
statusDiv.innerHTML = '<div style="color: #ff9800;">⏳ Отправка запроса на сервер...</div>';
|
||
|
||
try {
|
||
const requestData = {
|
||
map: map,
|
||
maxIterations: 5000000
|
||
};
|
||
|
||
const response = await fetch('http://localhost:5000/solve', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
body: JSON.stringify(requestData)
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
|
||
const result = await response.json();
|
||
|
||
if (result.success) {
|
||
// Успешно найдено решение
|
||
const stats = result.statistics;
|
||
statusDiv.innerHTML = `
|
||
<div style="color: #4caf50; font-weight: bold;">✅ Решение найдено!</div>
|
||
<div style="font-size: 12px; margin-top: 5px;">
|
||
📊 Шагов: ${stats.steps}<br>
|
||
🎯 Чекпоинтов: ${stats.checkpoints}<br>
|
||
⚡ Макс. скорость: ${stats.maxSpeed}<br>
|
||
⏱️ Время: ${stats.computeTimeSeconds.toFixed(2)}s
|
||
</div>
|
||
`;
|
||
|
||
// Загружаем решение напрямую
|
||
solution = result.solution;
|
||
trajectory = simulateTrajectory(solution, startPosition);
|
||
currentStep = 0;
|
||
|
||
// Обновляем состояние кнопок и информацию
|
||
updateControlsState();
|
||
updateStepInfo();
|
||
drawMap();
|
||
|
||
// Автоматически начинаем воспроизведение
|
||
setTimeout(() => {
|
||
playVisualization();
|
||
}, 500);
|
||
|
||
} else {
|
||
// Решение не найдено
|
||
statusDiv.innerHTML = `
|
||
<div style="color: #f44336; font-weight: bold;">❌ Решение не найдено</div>
|
||
<div style="font-size: 12px; margin-top: 5px;">${result.error || 'Неизвестная ошибка'}</div>
|
||
`;
|
||
}
|
||
} catch (error) {
|
||
console.error('Ошибка при решении карты:', error);
|
||
|
||
if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) {
|
||
statusDiv.innerHTML = `
|
||
<div style="color: #f44336; font-weight: bold;">❌ Сервер недоступен</div>
|
||
<div style="font-size: 12px; margin-top: 5px;">
|
||
Убедитесь, что сервер запущен:<br>
|
||
<code style="background: #333; padding: 2px 5px; border-radius: 3px;">./run-webservice.sh</code>
|
||
</div>
|
||
`;
|
||
} else {
|
||
statusDiv.innerHTML = `
|
||
<div style="color: #f44336; font-weight: bold;">❌ Ошибка</div>
|
||
<div style="font-size: 12px; margin-top: 5px;">${error.message}</div>
|
||
`;
|
||
}
|
||
} finally {
|
||
// Включаем кнопку обратно
|
||
solveBtn.disabled = false;
|
||
solveBtn.textContent = '🧠 Найти решение';
|
||
}
|
||
}
|
||
|
||
canvas.addEventListener('mousedown', (e) => {
|
||
if (e.button === 2 || e.shiftKey) {
|
||
isPanning = true;
|
||
startPanX = e.clientX - offsetX;
|
||
startPanY = e.clientY - offsetY;
|
||
canvas.style.cursor = 'grabbing';
|
||
}
|
||
});
|
||
|
||
canvas.addEventListener('mousemove', (e) => {
|
||
if (isPanning) {
|
||
offsetX = e.clientX - startPanX;
|
||
offsetY = e.clientY - startPanY;
|
||
drawMap();
|
||
}
|
||
});
|
||
|
||
canvas.addEventListener('mouseup', () => {
|
||
isPanning = false;
|
||
canvas.style.cursor = 'default';
|
||
});
|
||
|
||
canvas.addEventListener('mouseleave', () => {
|
||
isPanning = false;
|
||
canvas.style.cursor = 'default';
|
||
});
|
||
|
||
canvas.addEventListener('wheel', (e) => {
|
||
e.preventDefault();
|
||
const rect = canvas.getBoundingClientRect();
|
||
const mouseX = e.clientX - rect.left;
|
||
const mouseY = e.clientY - rect.top;
|
||
const zoom = e.deltaY < 0 ? 1.1 : 0.9;
|
||
const newScale = Math.min(Math.max(0.1, scale * zoom), 5);
|
||
|
||
offsetX = mouseX - (mouseX - offsetX) * (newScale / scale);
|
||
offsetY = mouseY - (mouseY - offsetY) * (newScale / scale);
|
||
scale = newScale;
|
||
|
||
drawMap();
|
||
});
|
||
|
||
canvas.addEventListener('contextmenu', (e) => e.preventDefault());
|
||
|
||
window.addEventListener('resize', () => {
|
||
resizeCanvas();
|
||
drawMap();
|
||
});
|
||
|
||
init();
|
||
|