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

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

代码语言：html

所属分类：其他

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

下面为部分代码预览，完整代码请点击下载或在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; }
body { overflow: hidden; background: #000; font-family: 'Microsoft YaHei', sans-serif; }
canvas { display: block; }

#ui {
  position: absolute; top: 0; left: 0; width: 100%;
  padding: 15px 25px;
  display: flex; justify-content: space-between; align-items: flex-start;
  pointer-events: none; z-index: 10;
}
.ui-box {
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px; padding: 12px 22px; color: #fff;
}
#score-box { font-size: 18px; }
#score-box span { color: #4fc3f7; font-weight: bold; font-size: 26px; }
#height-box { font-size: 14px; color: #aaa; }
#height-box .val { font-weight: bold; font-size: 16px; }
#height-box .up { color: #66bb6a; }
#height-box .down { color: #ef5350; }

#start-screen {
  position: absolute; top:0; left:0; width:100%; height:100%;
  background: linear-gradient(180deg, rgba(0,20,40,0.92), rgba(0,40,80,0.95));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 100; color: #fff;
}
#start-screen h1 { font-size: 52px; margin-bottom: 10px; text-shadow: 0 0 30px #4fc3f7; }
#start-screen .sub { font-size: 18px; color: #90caf9; margin-bottom: 30px; }
#start-screen .rules {
  background: rgba(255,255,255,0.08); border-radius: 16px;
  padding: 25px 35px; margin-bottom: 30px; font-size: 16px; line-height: 2;
  border: 1px solid rgba(255,255,255,0.12);
}
#start-screen .rules b { color: #4fc3f7; }
#start-btn {
  background: linear-gradient(135deg, #4fc3f7, #0288d1);
  border: none; color: #fff; padding: 16px 60px; font-size: 22px;
  border-radius: 50px; cursor: pointer; font-weight: bold;
  box-shadow: 0 6px 30px rgba(79,195,247,0.4);
  transition: all 0.3s;
}
#start-btn:hover { transform: scale(1.08); box-shadow: 0 8px 40px rgba(79,195,247,0.6); }

#gameover {
  position: absolute; top:0; left:0; width:100%; height:100%;
  background: rgba(0,0,0,0.85); display: none;
  flex.........完整代码请登录后点击上方下载按钮下载查看