Бесконечная анимация: глобус вращается, по нему едет машина
Бесконечная анимация: глобус вращается, по нему едет машина, а по морю плывёт кораблик. Человечек успевает пересаживаться с одного на другое — и так по кругу. Всё нарисовано кодом, без картинок и плагинов.
Ниже — живой пример, код и инструкция по установке.
Что делает скрипт
- Рисует вращающийся глобус с континентами
- По поверхности едет маленькая машинка
- По морю плывёт кораблик с парусом
- Человечек пересаживается с машины на корабль и обратно
- Анимация бесконечная — цикл не останавливается
- Работает на телефонах, планшетах, компьютерах
- Не мешает кликам по сайту
- Не требует плагинов и сторонних библиотек
Как это работает
Глобус вращается вокруг своей оси. По его поверхности движется машина — она как бы объезжает планету. Когда машина доезжает до берега, появляется кораблик, человечек пересаживается на него, и кораблик плывёт дальше. Потом снова машина — и так по кругу.
Всё нарисовано на canvas: континенты, машина, кораблик, человечек. Никаких картинок не загружается.
Как установить
- Скопируйте код кнопкой выше
- Откройте файл footer.php вашей темы
- Вставьте код перед закрывающим тегом </body>
- Сохраните файл
- Очистите кеш сайта
Если не хотите лезть в код темы — вставьте через кнопку ▶ RUN прямо в запись. Тогда глобус появится только на этой странице.
Где можно использовать
- Сайты про путешествия — атмосферно и по теме
- Блоги — развлечь читателей
- Корпоративные сайты — оживить страницу «О компании»
- Детские сайты — уместно и мило
- Лендинги — привлечь внимание к блоку
- Портфолио — показать внимание к деталям
Часто задаваемые вопросы
Глобус будет мешать читать текст?
Нет. Он появляется в отдельном блоке, который можно поставить в любое место записи. Если не нравится — код можно удалить.
Можно ли поменять скорость вращения?
Да. В коде есть переменные SPEED_GLOBE, SPEED_CAR, SPEED_BOAT — меняйте под себя.
Будет ли тормозить сайт?
Нет. Анимация использует requestAnimationFrame и canvas. Нагрузка минимальная.
Работает ли на мобильных?
Да. Глобус адаптируется под размер экрана.
Можно ли поставить глобус на все страницы?
Да. Вставьте код не через ▶ RUN, а в footer.php темы.
Как убрать глобус?
Удалите код из записи или из footer.php. Всё исчезнет сразу.
Что можно докрутить
Если базовая версия понравилась — можно добавить:
- Самолётик, который летает над глобусом
- Несколько человечков — целая команда
- Смену дня и ночи на глобусе
- Разные города — точки на карте
- Следы от машины и корабля
- Звук — шум мотора и плеск волн (по клику)
Все эти варианты — в следующих обновлениях. Следите за новыми скриптами.
Другие скрипты для сайта
Возможно будут ещё скрипты, воспользуйтесь поиском на сайте:
- 🌍 Глобус с машиной и кораблём
- 🐐 Красная Коза на сайт
- ⏰ Таймер до Нового года
- 👧 Снегурочка на сайт
- ❄️ Снег на сайт
- 🎄 Гирлянда на сайт
- 🎅 Дед Мороз по экрану
- 🌧️ Дождь на сайт
- ⭐ Звёзды на фон
- 🎆 Салют по клику
- 📜 Кнопка «наверх»
- 🌙 Тёмная тема для сайта
- 🍪 Уведомление о cookie
- 📊 Прогресс-бар чтения
- 🎯 Кнопка «поделиться»
- 💬 Чат для сайта
- 🖼️ Галерея с лайтбоксом
- 🔍 Живой поиск
- 📱 PWA для сайта
- ⚡ Оптимизация скорости
Итог
Глобус с машиной и кораблём — это живая бесконечная анимация. Человечек путешествует по миру, пересаживаясь с машины на корабль и обратно. Всё нарисовано кодом, работает в любом браузере, адаптируется под любой экран.
Установите — и пусть ваш сайт станет путешествием.
/*
* ============================================================
* 🌍 МУЛЬТИК: ЧЕЛОВЕЧЕК ПУТЕШЕСТВУЕТ 🚗⛵✈️
* ============================================================
* Автор: Ведерников Сергей
* ИИ: Дэп — https://1promtai.ru/
* ============================================================
*/
(function() {
'use strict';
if (window.__globeTripRunning) return;
window.__globeTripRunning = true;
function init() {
var W = 280;
var H = 340;
var canvas = document.createElement('canvas');
canvas.width = W * 2;
canvas.height = H * 2;
canvas.style.cssText = [
'position:fixed',
'bottom:16px',
'left:16px',
'width:' + W + 'px',
'height:' + H + 'px',
'pointer-events:none',
'z-index:9997'
].join(';');
canvas.setAttribute('aria-hidden', 'true');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
ctx.setTransform(2, 0, 0, 2, 0, 0);
var CX = W * 0.62;
var CY = H * 0.62;
var R = 62;
var start = performance.now();
var CYCLE = 90;
var continents = [
{ x: -0.3, y: -0.4, w: 18, h: 25, color: '#4ade80' },
{ x: 0.5, y: -0.2, w: 16, h: 28, color: '#4ade80' },
{ x: -0.5, y: 0.3, w: 20, h: 22, color: '#4ade80' },
{ x: 0.4, y: 0.4, w: 18, h: 20, color: '#4ade80' },
{ x: -0.1, y: -0.8, w: 14, h: 14, color: '#4ade80' },
{ x: 0.7, y: 0.6, w: 12, h: 12, color: '#4ade80' }
];
var clouds = [
{ x: -0.7, y: -0.6, w: 12, h: 5, offset: 0 },
{ x: -0.2, y: -0.85, w: 14, h: 6, offset: 0.3 },
{ x: 0.3, y: -0.7, w: 10, h: 4, offset: 0.6 },
{ x: 0.6, y: -0.5, w: 13, h: 5, offset: 0.1 },
{ x: -0.6, y: 0.1, w: 11, h: 4.5, offset: 0.5 },
{ x: 0.1, y: -0.3, w: 12, h: 5, offset: 0.8 },
{ x: 0.5, y: 0.05, w: 10, h: 4, offset: 0.2 }
];
var rotation = 0;
var dayPhase = 0;
function drawSky() {
var dark = 0.5 + 0.5 * Math.sin(dayPhase);
var skyGrad = ctx.createRadialGradient(CX, CY, R, CX, CY, R * 2.5);
skyGrad.addColorStop(0, 'rgba(30,91,200,' + (0.15 + 0.15 * (1 - dark)) + ')');
skyGrad.addColorStop(1, 'rgba(10,31,74,0)');
ctx.fillStyle = skyGrad;
ctx.beginPath();
ctx.arc(CX, CY, R * 2.5, 0, Math.PI * 2);
ctx.fill();
}
function drawSun() {
var sunAngle = -Math.PI * 0.75 + Math.sin(dayPhase) * 0.4;
var sx = CX + Math.cos(sunAngle) * (R + 55);
var sy = CY + Math.sin(sunAngle) * (R + 55);
ctx.save();
ctx.translate(sx, sy);
for (var i = 0; i < 8; i++) {
ctx.save();
ctx.rotate((Math.PI / 4) * i + dayPhase * 0.5);
ctx.beginPath();
ctx.moveTo(0, -10);
ctx.lineTo(0, -16);
ctx.strokeStyle = 'rgba(255,210,60,0.7)';
ctx.lineWidth = 1.5;
ctx.lineCap = 'round';
ctx.stroke();
ctx.restore();
}
ctx.restore();
ctx.beginPath();
ctx.arc(sx, sy, 8, 0, Math.PI * 2);
var sunGrad = ctx.createRadialGradient(sx - 2, sy - 2, 1, sx, sy, 8);
sunGrad.addColorStop(0, '#fff3b0');
sunGrad.addColorStop(1, '#ffb300');
ctx.fillStyle = sunGrad;
ctx.fill();
}
function drawMoon() {
var moonAngle = Math.PI * 0.25 - Math.sin(dayPhase) * 0.4;
var mx = CX + Math.cos(moonAngle) * (R + 55);
var my = CY + Math.sin(moonAngle) * (R + 55);
ctx.save();
ctx.translate(mx, my);
ctx.beginPath();
ctx.arc(0, 0, 7, 0, Math.PI * 2);
ctx.fillStyle = '#e0e8ff';
ctx.fill();
ctx.beginPath();
ctx.arc(3, -1, 6, 0, Math.PI * 2);
ctx.globalCompositeOperation = 'destination-out';
ctx.fill();
ctx.restore();
}
function drawClouds() {
clouds.forEach(function(c) {
var lon = c.x + rotation;
var nx = ((lon + 1) % 2) - 1;
if (Math.abs(nx) > 1.1) return;
var px = CX + nx * R * 0.9;
var py = CY + c.y * R * 0.9;
var scale = Math.cos(nx * Math.PI / 2);
if (scale < 0.1) return;
ctx.save();
ctx.translate(px, py);
ctx.scale(scale, scale);
ctx.globalAlpha = 0.85 * scale;
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(-c.w * 0.4, 0, c.h * 0.6, 0, Math.PI * 2);
ctx.arc(0, -c.h * 0.3, c.h * 0.8, 0, Math.PI * 2);
ctx.arc(c.w * 0.4, 0, c.h * 0.6, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
});
}
function drawGlobe() {
var dark = 0.5 + 0.5 * Math.sin(dayPhase);
var sphereGrad = ctx.createRadialGradient(
CX - R * 0.3, CY - R * 0.3, R * 0.1,
CX, CY, R
);
sphereGrad.addColorStop(0, '#3b82f6');
sphereGrad.addColorStop(0.7, '#1e5bc8');
sphereGrad.addColorStop(1, '#0a1f4a');
ctx.beginPath();
ctx.arc(CX, CY, R, 0, Math.PI * 2);
ctx.fillStyle = sphereGrad;
ctx.fill();
ctx.save();
ctx.beginPath();
ctx.arc(CX, CY, R, 0, Math.PI * 2);
ctx.clip();
continents.forEach(function(c) {
var lon = c.x + rotation;
var nx = ((lon + 1) % 2) - 1;
if (Math.abs(nx) > 1) return;
var px = CX + nx * R * 0.9;
var py = CY + c.y * R * 0.9;
var scale = Math.cos(nx * Math.PI / 2);
ctx.save();
ctx.translate(px, py);
ctx.scale(scale, 1);
ctx.fillStyle = c.color;
ctx.beginPath();
ctx.ellipse(0, 0, c.w * scale, c.h, 0, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
});
var nightGrad = ctx.createLinearGradient(CX - R, CY, CX + R, CY);
nightGrad.addColorStop(0, 'rgba(0,0,20,' + (dark * 0.5) + ')');
nightGrad.addColorStop(0.5, 'rgba(0,0,20,0)');
nightGrad.addColorStop(1, 'rgba(0,0,20,' + ((1-dark) * 0.5) + ')');
ctx.fillStyle = nightGrad;
ctx.fillRect(CX - R, CY - R, R * 2, R * 2);
ctx.restore();
ctx.beginPath();
ctx.arc(CX, CY, R, 0, Math.PI * 2);
ctx.strokeStyle = 'rgba(120,180,255,0.6)';
ctx.lineWidth = 1.5;
ctx.stroke();
ctx.beginPath();
ctx.arc(CX - R * 0.4, CY - R * 0.4, R * 0.25, 0, Math.PI * 2);
ctx.fillStyle = 'rgba(255,255,255,0.15)';
ctx.fill();
}
function drawCar(x, y, angle, scale, hairBack) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.scale(scale, scale);
ctx.fillStyle = '#c81d1d';
ctx.beginPath();
ctx.roundRect(-10, -5, 20, 10, 2);
ctx.fill();
ctx.fillStyle = '#8b1a1a';
ctx.beginPath();
ctx.roundRect(-5, -8, 10, 5, 1.5);
ctx.fill();
ctx.fillStyle = '#1a1a1a';
ctx.beginPath();
ctx.arc(-6, 6, 2.5, 0, Math.PI * 2);
ctx.arc(6, 6, 2.5, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#ffd700';
ctx.beginPath();
ctx.arc(9, 0, 2, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
function drawBoat(x, y, angle, scale) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.scale(scale, scale);
ctx.fillStyle = '#7a4b1f';
ctx.beginPath();
ctx.moveTo(-12, 5);
ctx.lineTo(-8, -2);
ctx.lineTo(8, -2);
ctx.lineTo(12, 5);
ctx.closePath();
ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.moveTo(0, -18);
ctx.lineTo(0, -2);
ctx.lineTo(-8, -2);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(2, -16);
ctx.lineTo(2, -2);
ctx.lineTo(9, -2);
ctx.closePath();
ctx.fill();
ctx.strokeStyle = 'rgba(120,180,255,0.6)';
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(-14, 7);
ctx.quadraticCurveTo(-10, 5, -6, 7);
ctx.quadraticCurveTo(-2, 9, 2, 7);
ctx.quadraticCurveTo(6, 5, 10, 7);
ctx.stroke();
ctx.restore();
}
function drawPlane(x, y, angle, scale) {
ctx.save();
ctx.translate(x, y);
ctx.rotate(angle);
ctx.scale(scale, scale);
ctx.fillStyle = '#e0e0e0';
ctx.beginPath();
ctx.ellipse(0, 0, 14, 5, 0, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#c81d1d';
ctx.beginPath();
ctx.arc(13, 0, 3, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.moveTo(-2, -1);
ctx.lineTo(-8, -10);
ctx.lineTo(-3, -10);
ctx.lineTo(1, -1);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(-2, 1);
ctx.lineTo(-8, 10);
ctx.lineTo(-3, 10);
ctx.lineTo(1, 1);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.moveTo(-13, -1);
ctx.lineTo(-17, -6);
ctx.lineTo(-13, -1);
ctx.lineTo(-17, 6);
ctx.closePath();
ctx.fill();
ctx.fillStyle = '#3b82f6';
ctx.beginPath();
ctx.arc(0, -1, 1, 0, Math.PI * 2);
ctx.arc(4, -1, 1, 0, Math.PI * 2);
ctx.arc(8, -1, 1, 0, Math.PI * 2);
ctx.fill();
ctx.restore();
}
function drawMan(x, y, scale, pose, walkPhase, shift, hairBack) {
ctx.save();
ctx.translate(x, y);
ctx.scale(scale, scale);
var legSwing = pose === 'walk' ? Math.sin(walkPhase) * 4 : 0;
var armSwing = pose === 'walk' ? Math.sin(walkPhase + Math.PI) * 4 : 0;
var bounce = shift || 0;
if (pose === 'sit') {
ctx.save();
ctx.translate(0, bounce);
drawManSitting(armSwing, hairBack);
ctx.restore();
} else {
ctx.save();
ctx.translate(0, bounce);
drawManStanding(legSwing, armSwing, hairBack);
ctx.restore();
}
ctx.restore();
}
function drawManStanding(legSwing, armSwing, hairBack) {
ctx.fillStyle = '#ffe4d0';
ctx.beginPath();
ctx.arc(0, -14, 4.5, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#3a2410';
if (hairBack) {
ctx.beginPath();
ctx.arc(0, -15, 4.5, Math.PI, 0);
ctx.fill();
ctx.beginPath();
ctx.moveTo(-3, -16);
ctx.quadraticCurveTo(-9, -15, -10, -12);
ctx.quadraticCurveTo(-8, -14, -3, -14);
ctx.fill();
ctx.beginPath();
ctx.moveTo(-3, -14);
ctx.quadraticCurveTo(-8, -13, -9, -10);
ctx.quadraticCurveTo(-7, -12, -3, -12);
ctx.fill();
} else {
ctx.beginPath();
ctx.arc(0, -15, 4.5, Math.PI, 0);
ctx.fill();
}
ctx.strokeStyle = '#c81d1d';
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.arc(0, -13, 2.5, 0.2 * Math.PI, 0.8 * Math.PI);
ctx.stroke();
ctx.fillStyle = '#1a1a1a';
ctx.beginPath();
ctx.arc(-1.5, -15, 0.6, 0, Math.PI * 2);
ctx.arc(1.5, -15, 0.6, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#3b82f6';
ctx.beginPath();
ctx.roundRect(-3.5, -10, 7, 12, 2);
ctx.fill();
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(0, -7, 0.5, 0, Math.PI * 2);
ctx.arc(0, -4, 0.5, 0, Math.PI * 2);
ctx.arc(0, -1, 0.5, 0, Math.PI * 2);
ctx.fill();
ctx.strokeStyle = '#ffe4d0';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(-3.5, -7);
ctx.lineTo(-6, -3 + armSwing);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(3.5, -7);
ctx.lineTo(6, -3 - armSwing);
ctx.stroke();
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 2.2;
ctx.beginPath();
ctx.moveTo(-2, 2);
ctx.lineTo(-2 - legSwing, 12);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(2, 2);
ctx.lineTo(2 + legSwing, 12);
ctx.stroke();
ctx.fillStyle = '#1a1a1a';
ctx.beginPath();
ctx.ellipse(-2 - legSwing, 12.5, 2.5, 1.2, 0, 0, Math.PI * 2);
ctx.ellipse(2 + legSwing, 12.5, 2.5, 1.2, 0, 0, Math.PI * 2);
ctx.fill();
}
function drawManSitting(armSwing, hairBack) {
ctx.fillStyle = '#ffe4d0';
ctx.beginPath();
ctx.arc(0, -12, 4.5, 0, Math.PI * 2);
ctx.fill();
ctx.fillStyle = '#3a2410';
if (hairBack) {
ctx.beginPath();
ctx.arc(0, -13, 4.5, Math.PI, 0);
ctx.fill();
ctx.beginPath();
ctx.moveTo(-3, -14);
ctx.quadraticCurveTo(-10, -13, -11, -9);
ctx.quadraticCurveTo(-8, -12, -3, -12);
ctx.fill();
ctx.beginPath();
ctx.moveTo(-3, -12);
ctx.quadraticCurveTo(-9, -10, -10, -6);
ctx.quadraticCurveTo(-7, -9, -3, -10);
ctx.fill();
} else {
ctx.beginPath();
ctx.arc(0, -13, 4.5, Math.PI, 0);
ctx.fill();
}
ctx.strokeStyle = '#c81d1d';
ctx.lineWidth = 0.8;
ctx.beginPath();
ctx.arc(0, -11, 2.8, 0.15 * Math.PI, 0.85 * Math.PI);
ctx.stroke();
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 0.7;
ctx.beginPath();
ctx.moveTo(-2.5, -14.5); ctx.lineTo(-0.5, -14.5);
ctx.moveTo(0.5, -14.5); ctx.lineTo(2.5, -14.5);
ctx.stroke();
ctx.fillStyle = '#3b82f6';
ctx.beginPath();
ctx.roundRect(-3.5, -8, 7, 10, 2);
ctx.fill();
ctx.strokeStyle = '#ffe4d0';
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(-3.5, -5); ctx.lineTo(-5, 0 + armSwing);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(3.5, -5); ctx.lineTo(5, 0 - armSwing);
ctx.stroke();
ctx.strokeStyle = '#1a1a1a';
ctx.lineWidth = 2.2;
ctx.beginPath();
ctx.moveTo(-2, 1); ctx.lineTo(-1, 8);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(2, 1); ctx.lineTo(3, 8);
ctx.stroke();
ctx.fillStyle = '#1a1a1a';
ctx.beginPath();
ctx.ellipse(0, 9, 3, 1.3, 0, 0, Math.PI * 2);
ctx.ellipse(4, 9, 3, 1.3, 0, 0, Math.PI * 2);
ctx.fill();
}
function animate(now) {
var t = (now - start) / 1000;
var cycle = t % CYCLE;
rotation = t * 0.03;
dayPhase = t * 0.15;
ctx.clearRect(0, 0, W, H);
drawSky();
drawSun();
drawMoon();
drawGlobe();
drawClouds();
var boatPos = { x: CX + R + 15, y: CY + R - 5 };
var planePos = { x: CX - R - 20, y: CY - R - 10 };
if (cycle < 8) {
var p = cycle / 8;
var a = -Math.PI / 2 - p * 0.6;
var cx2 = CX + Math.cos(a) * (R + 8);
var cy2 = CY + Math.sin(a) * (R + 8);
drawCar(cx2, cy2, a + Math.PI / 2, 1, false);
}
else if (cycle < 20) {
var p2 = (cycle - 8) / 12;
var carAngle = -Math.PI / 2 - 0.6 - p2 * 1.2;
var x2 = CX + Math.cos(carAngle) * (R + 8);
var y2 = CY + Math.sin(carAngle) * (R + 8);
drawCar(x2, y2, carAngle + Math.PI / 2, 1, true);
drawMan(x2, y2 - 4, 1.5, 'sit', 0, 0, true);
}
else if (cycle < 26) {
var p3 = (cycle - 20) / 6;
var aStop = -Math.PI / 2 - 1.8;
var xS = CX + Math.cos(aStop) * (R + 8);
var yS = CY + Math.sin(aStop) * (R + 8);
drawCar(xS, yS, aStop + Math.PI / 2, 1, false);
drawMan(xS, yS - 4, 1.5, 'sit', 0, 0, false);
if (p3 > 0.5) {
var manX = xS + (p3 - 0.5) * 40;
var manY = yS + (p3 - 0.5) * 15;
drawMan(manX, manY, 2.2, 'stand', 0, 0, false);
}
}
else if (cycle < 32) {
var p4 = (cycle - 26) / 6;
var startX = CX + Math.cos(-Math.PI / 2 - 1.8) * (R + 8) + 20;
var startY = CY + Math.sin(-Math.PI / 2 - 1.8) * (R + 8) + 5;
var endX = W * 0.25;
var endY = H * 0.8;
drawBoat(boatPos.x, boatPos.y, 0, 1);
var mx = startX + (endX - startX) * p4;
var my = startY + (endY - startY) * p4;
drawMan(mx, my, 2.2, 'walk', p4 * 30, 0, false);
}
else if (cycle < 36) {
var p5 = (cycle - 32) / 4;
var bounce = Math.sin(p5 * Math.PI * 4) * 1.5;
drawBoat(boatPos.x, boatPos.y, 0, 1);
drawMan(boatPos.x, boatPos.y - 5, 1.8, 'sit', 0, bounce, false);
}
else if (cycle < 50) {
var p6 = (cycle - 36) / 14;
var boatAngle = -0.5 + p6 * 2.5;
var a6 = boatAngle * Math.PI;
var bx = CX + Math.cos(a6) * (R + 15);
var by = CY + Math.sin(a6) * (R + 15);
drawBoat(bx, by, a6 + Math.PI / 2, 1);
drawMan(bx, by - 5, 1.8, 'sit', 0, 0, true);
}
else if (cycle < 56) {
var p7 = (cycle - 50) / 6;
var aStop2 = 2.0 * Math.PI;
var bx2 = CX + Math.cos(aStop2) * (R + 15);
var by2 = CY + Math.sin(aStop2) * (R + 15);
drawBoat(bx2, by2, aStop2 + Math.PI / 2, 1);
if (p7 < 0.5) {
drawMan(bx2, by2 - 5, 1.8, 'sit', 0, 0, false);
} else {
var manX2 = bx2 + (p7 - 0.5) * 30;
var manY2 = by2 + (p7 - 0.5) * 10;
drawMan(manX2, manY2, 2.2, 'stand', 0, 0, false);
}
}
else if (cycle < 62) {
var p8 = (cycle - 56) / 6;
var startX2 = W * 0.5;
var startY2 = H * 0.85;
var endX2 = W * 0.15;
var endY2 = H * 0.35;
drawPlane(planePos.x, planePos.y, 0, 1);
var mx2 = startX2 + (endX2 - startX2) * p8;
var my2 = startY2 + (endY2 - startY2) * p8;
drawMan(mx2, my2, 2.2, 'walk', p8 * 30, 0, false);
}
else if (cycle < 66) {
var p9 = (cycle - 62) / 4;
var bounce2 = Math.sin(p9 * Math.PI * 4) * 1.5;
drawPlane(planePos.x, planePos.y, 0, 1);
drawMan(planePos.x, planePos.y - 5, 1.6, 'sit', 0, bounce2, false);
}
else if (cycle < 80) {
var p10 = (cycle - 66) / 14;
var planeAngle = p10 * Math.PI * 2;
var px = CX + Math.cos(planeAngle) * (R + 25);
var py = CY + Math.sin(planeAngle) * (R + 25);
drawPlane(px, py, planeAngle + Math.PI / 2, 1);
drawMan(px, py - 5, 1.6, 'sit', 0, 0, true);
}
else if (cycle < 86) {
var p11 = (cycle - 80) / 6;
var px2 = CX + Math.cos(0) * (R + 25);
var py2 = CY + Math.sin(0) * (R + 25);
drawPlane(px2, py2, 0, 1);
if (p11 < 0.5) {
drawMan(px2, py2 - 5, 1.6, 'sit', 0, 0, false);
} else {
var manX3 = px2 - (p11 - 0.5) * 40;
var manY3 = py2 + (p11 - 0.5) * 15;
drawMan(manX3, manY3, 2.2, 'stand', 0, 0, false);
}
}
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();