three实现小船河流行驶躲避桥梁游戏代码-html代码-BFW代码库

three实现小船河流行驶躲避桥梁游戏代码

代码语言：html

所属分类：其他

代码描述：3d小船行驶躲避桥梁游戏

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

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>河流小船冒险</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{overflow:hidden;background:#1a3a4a;font-family:'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;user-select:none;-webkit-user-select:none}
canvas{display:block}
.overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
#startScreen{background:linear-gradient(180deg,rgba(10,30,50,.92),rgba(5,20,40,.95));z-index:10}
#startScreen h1{font-size:clamp(2rem,8vw,4rem);font-weight:900;color:#FFD54F;text-shadow:0 4px 30px rgba(255,213,79,.4);margin-bottom:.5rem}
.subtitle{color:#80CBC4;font-size:clamp(.9rem,3vw,1.2rem);margin-bottom:2rem;text-align:center;line-height:2}
.controls-info{color:#90A4AE;font-size:.85rem;margin-bottom:2rem;text-align:center;line-height:1.8;background:rgba(255,255,255,.05);padding:12px 24px;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.btn{padding:14px 44px;font-size:1.2rem;font-weight:700;border:none;border-radius:50px;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);outline:none;font-family:inherit}
.btn-primary{background:linear-gradient(135deg,#FFD54F,#FFB300);color:#3E2723;box-shadow:0 4px 20px rgba(255,179,0,.35)}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px rgba(255,179,0,.5)}
.btn-primary:active{transform:translateY(0) scale(.98)}
#hud{position:absolute;top:0;left:0;right:0;padding:16px 20px;display:none;justify-content:space-between;align-items:flex-start;z-index:5;pointer-events:none}
.hud-panel{background:rgba(0,0,0,.45);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.08)}
.hud-label{color:rgba(255,255,255,.6);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.hud-value{color:#FFD54F;font-size:1.4rem;font-weight:800;margin-top:2px}
#warning{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1.5rem,5vw,3rem);font-weight:900;color:#FF5252;text-shadow:0 0 40px rgba(255,82,82,.6);display:none;z-index:6;animation:warnPulse .4s ease infinite alternate;pointer-events:none;white-space:nowrap}
@keyframes warnPulse{from{opacity:.6;transform:t.........完整代码请登录后点击上方下载按钮下载查看