js实现轮船动力学模拟器代码-html代码-BFW代码库

js实现轮船动力学模拟器代码

代码语言：html

所属分类：其他

代码描述：js实现轮船动力学模拟器代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮船动力学模拟器</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  width:100%;height:100%;overflow:hidden;background:#04121f;
  font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#eaf6ff;user-select:none;
}
#sea{position:fixed;inset:0;display:block;cursor:grab;}
#sea:active{cursor:grabbing;}

#hud{
  position:fixed;left:16px;top:16px;z-index:10;
  display:grid;grid-template-columns:repeat(2,minmax(130px,auto));gap:8px 18px;
  padding:14px 16px;background:rgba(4,18,32,.72);
  border:1px solid rgba(120,220,255,.22);border-radius:14px;
  backdrop-filter:blur(8px);box-shadow:0 8px 28px rgba(0,0,0,.35);pointer-events:none;
}
.metric{display:flex;flex-direction:column;gap:2px;}
.metric .label{font-size:11px;color:#8fc7e8;letter-spacing:1px;}
.metric .value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;}

#panel{
  position:fixed;right:16px;top:16px;z-index:10;width:330px;
  max-height:calc(100vh - 32px);overflow:auto;padding:16px;
  background:rgba(4,18,32,.78);border:1px solid rgba(120,220,255,.22);
  border-radius:16px;backdrop-filter:blur(10px);box-shadow:0 10px 32px rgba(0,0,0,.4);
}
#panel h3{font-size:16px;margin-bottom:12px;color:#bdf3ff;letter-spacing:1px;}
#collapseBtn{float:right;padding:2px 8px;font-size:12px;}
.row{margin:10px 0;}
.row label{
  display:flex;justify-content:space-between;font-size:12px;color:#9fd6f2;margin-bottom:6px;
}
.row output{color:#fff;font-weight:700;}
input[type=range]{width:100%;accent-color:#37c8ff;}
.btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
button{
  padding:8px 6px;border:1px solid rgba(120,220,255,.3);border-radius:10px;
  background:rgba(23,68,102,.65);color:#eaf6ff;font-size:12px;cursor:pointer;transition:.15s;
}
button:hover{background:rgba(55,200,255,.28);}
button:active{transform:translateY(1px);}
button.active{background:rgba(55,200,255,.45);border-color:#7fe3ff;}
.section{margin-top:14px;padding-top:12px;border-top:1px solid rgba(120,220,255,.16);}
.tips{margin-top:12px;font-size:11px;color:#88bad8;line-height:1.7;}

@media(max-width:900px){
  #panel{width:min(88vw,330px);}
  #hud{grid-template-columns:repeat(2,1fr);transform:scale(.88);transform-origin:left top;}
}
</style>
</head>
<body>

<canvas id="sea"></canvas>

<div id="hud">
  <div class="metric"><span class="label">航向 HDG</span><span class="value" id="heading">000.0°</span></div>
  <div class="metric"><span class="label">计程仪 STW</span><span class="value" id="stw">0.0 kn</span></div>
  <div class="metric"><span class="label">对地速度 SOG</span><span class="value" id="sog">0.0 kn</span></div>
  <div class="metric"><span class="label">转速 RPM</span><span class="value" id="rpm">0%</span></div>
  <div class="metric"><span class="label">实际舵角</span><span class="value" id="r.........完整代码请登录后点击上方下载按钮下载查看