CodePen Embed

Live

This Pen is owned by Tech Wizards on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; serial *; vr *; web-share *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"spaces\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"vYqwJVV\",\"auto_save\":true},\"hashid\":\"vYqwJVV\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":76993116,\"user_id\":13058284,\"html\":\"<html lang=\\\"en\\\">\\n<head>\\n    <meta charset=\\\"UTF-8\\\">\\n    <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1.0\\\">\\n    <title>Кораблик Анимация</title>\\n</head>\\n<body>\\n    <canvas id=\\\"canvas\\\" width=\\\"800\\\" height=\\\"400\\\"></canvas>\\n    <button id=\\\"stopButton\\\">Стоп</button>\\n</body>\\n</html>\",\"css\":\"canvas {\\n            border: 1px solid black;\\n/*             background-color: lightblue; */\\n        }\",\"js\":\"const canvas = document.getElementById('canvas');\\nconst ctx = canvas.getContext('2d');\\n\\nlet isAnimating = true;\\nlet shipPosition = 0;\\nlet shipPosition1 = 0;\\nconst waveAmplitude = 40; // Амплитуда волн\\nconst shipWidth = 200;\\nconst shipHeight = 30;\\n\\n        // Функция для отрисовки морских волн\\nfunction drawWaves() {\\n  const waveCount = canvas.width / 20; // Количество волн\\n  for (let i = 0; i < waveCount; i++) {\\n    ctx.beginPath();\\n    ctx.moveTo(i * 50, 250);\\n    ctx.quadraticCurveTo(i * 150 + 40, 200 - Math.sin((shipPosition1 / 100) + i) * waveAmplitude, (i + 1) * 150, 200);\\n    ctx.strokeStyle = 'blue';\\n    ctx.lineWidth = 2;\\n    // ctx.stroke();\\n    ctx.fillRect(0, 200, 800, 200);\\n    ctx.fill();\\n    ctx.closePath();\\n  }\\n}\\n\\n// Функция для отрисовки корабля\\nfunction drawShip(shipPosition) {\\n  const gradient = ctx.createLinearGradient(0, 0, 200, 200);\\n\\n  // Добавляем в него цвета плавных переходов\\n  gradient.addColorStop(0, \\\"PowderBlue\\\");\\n  gradient.addColorStop(0.7, \\\"white\\\");\\n  gradient.addColorStop(1, \\\"PowderBlue\\\"); \\n\\n  //     Корпус и мачта\\n  ctx.beginPath();\\n  ctx.fillStyle = \\\"rgb(128, 64, 48)\\\";\\n  ctx.fillRect(shipPosition + 670, 160, 75, 50);\\n  ctx.moveTo(shipPosition + 620, 160);\\n  ctx.lineTo(shipPosition + 670, 160);\\n  ctx.lineTo(shipPosition + 670, 210);\\n  ctx.moveTo(shipPosition + 740, 160);\\n  ctx.lineTo(shipPosition + 800, 160);\\n  ctx.lineTo(shipPosition + 745, 210);\\n  ctx.fillRect(shipPosition + 705,60,5,100);\\n  ctx.closePath();\\n  ctx.fill();\\n\\n  // Парус\\n  ctx.beginPath();\\n  // ctx.fillStyle = \\\"rgb(166,189,215)\\\";\\n  ctx.fillStyle = gradient;\\n  ctx.moveTo(shipPosition + 705, 160);\\n  ctx.quadraticCurveTo(shipPosition + 610, 140, shipPosition + 705, 60);\\n  ctx.closePath();\\n  ctx.fill();\\n\\n  //   Флаг\\n  ctx.beginPath();\\n  ctx.fillStyle = \\\"rgb(255, 0, 0)\\\";\\n  ctx.moveTo(shipPosition + 710, 60);\\n  ctx.lineTo(shipPosition + 710, 80);\\n  ctx.lineTo(shipPosition + 730, 70);\\n  ctx.closePath();\\n  ctx.fill();\\n\\n  //     Окна\\n  ctx.beginPath();\\n  ctx.fillStyle = \\\"rgb(169, 169, 169)\\\";\\n  ctx.arc(shipPosition + 680, 180, 12, 0, (Math.PI / 180) * 360);\\n  ctx.moveTo(shipPosition + 735, 180);\\n  ctx.arc(shipPosition + 735, 180, 12, 0, (Math.PI / 180) * 360);\\n  ctx.stroke();\\n  ctx.closePath();\\n  ctx.fill();\\n\\n  ctx.beginPath();\\n  ctx.fillStyle = \\\"rgb(135, 206, 250)\\\";\\n  ctx.arc(shipPosition + 680, 180, 8, 0, (Math.PI / 180) * 360);\\n  ctx.moveTo(shipPosition + 735, 180);\\n  ctx.arc(shipPosition + 735, 180, 8, 0, (Math.PI / 180) * 360);\\n  ctx.stroke();\\n  ctx.closePath();\\n  ctx.fill();\\n  };\\n\\n  // Главная функция анимации\\nfunction animate() {\\n    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очистка canvas\\n    drawShip(shipPosition); // Рисуем корабль\\n    drawWaves(); // Рисуем волны\\n\\n    shipPosition -= 2; // Изменяем позицию корабля\\n    shipPosition1 -= 2;\\n    if (shipPosition < -canvas.width) {\\n      shipPosition = +shipWidth;\\n  }\\n\\n  if (isAnimating) {\\n    requestAnimationFrame(animate);\\n  }\\n}\\n\\n\\n\\n\\n// Обработчик событий для кнопки Стоп\\ndocument.getElementById('stopButton').addEventListener('click', () => {\\n  isAnimating = false; // Останавливаем анимацию\\n});\\n\\n\\nanimate(); \",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-09-15T12:47:32.314Z\",\"updated_at\":\"2024-10-23T15:58:04.061Z\",\"title\":\"Lab-3\",\"description\":\"\",\"slug_hash\":\"vYqwJVV\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity\":1,\"views_count\":7,\"pick_visible_at\":null,\"cpid\":\"0191f5b9-5fdb-7735-9b74-86663739395e\",\"is_new_editor_pen\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://public.codepenassets.com/css/normalize-5.0.0.min.css","__pen_prefix_free_url":"https://public.codepenassets.com/js/prefixfree-1.0.7.min.js","__pen_reset_css_url":"https://public.codepenassets.com/css/reset-2.0.min.css"}