canvas实现成本预算的造桥修桥游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：canvas实现成本预算的造桥修桥游戏代码，每种材料价格不一样，选择材料点击拖拽连线修桥，最后点击开始测试，有车子行驶上来检测桥会不会塌方。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>桥梁建造模拟器</title>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow: hidden;
  background: #87ceeb;
  font-family: "Microsoft YaHei", Arial, sans-serif;
  user-select: none;
}
#container {
  width: 100vw;
  height: 100vh;
  position: relative;
}
#threeCanvas {
  position: absolute;
  top: 0;
  left: 0;
}
/* 顶部状态栏 */
#topBar {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 100;
}
#statusText {
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
#budgetDisplay {
  color: white;
  background: rgba(0, 0, 0, 0.7);
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  white-space: nowrap;
}
/* 材料选择面板 */
#materialPanel {
  position: absolute;
  top: 60px;
  left: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 100;
}
.mat-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 2px solid transparent;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
  min-width: 140px;
}
.mat-btn:hover {
  background: rgba(40, 40, 40, 0.8);
}
.mat-btn.active {
  border-color: #00ff88;
  background: rgba(0, 80, 40, 0.8);
}
.mat-btn .key-hint {
  float: right;
  opacity: 0.5;
  font-size: 11px;
}
/* 底部控制栏 */
#bottomBar {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 100;
}
.ctrl-btn {
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: 2px solid transparent;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  transition: background 0.15s, border-color 0.15s;
}
.ctrl-btn:hover {
  background: rgba(60, 60, 60, 0.8);
}
.ctrl-btn.play-btn {
  border-color: #4caf50;
  min-width: 100px;
}
.ctrl-btn.delete-btn.active {
  border-color: #f44336;
  background: rgba(120, 20, 20, 0.8);
}
/* 操作说明 */
#instructions {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 100;
  white-space: nowrap;
}
</style>
</head>
<body translate="no">
<div id="container">
  <canvas id="threeCanvas"></canvas>
  <div id="topBar">
    <div id="statusText">建造你的桥梁！</div>
    <div id="budgetDisplay">预算：$5000 / $5000</div>
  </div>
  <div id="materialPanel">
    <button class="mat-btn active" data-material="ROAD">
      路面 - $100/单位 <span class="key-hint">1</span>
    </button>
    <button class="mat-btn" data-material="WOOD">
      木材 - $50/单位 <span class="key-hint">2</span>
    </button>
    <button class="mat-btn" data-material="STEEL">
      钢材 - $200/单位 <span class="key-hint">3</span>
    </button>
    <button class="mat-btn" data-material="ROPE">
      绳索 - $30/单位 <span class="key-hint">4</span>
    </button>
  </div>
  <div id="bottomBar">
    <button class="ctrl-btn play-btn" id="playBtn">开始测试（空格）</button>
    <button class="ctrl-btn" id="resetBtn" style="display:none">重置（R）</button>
    <button class="ctrl-btn delete-btn" id="deleteBtn">删除（D）</button>
    <button class="ctrl-btn" id="clearBtn">清空全部</button>
    <button class="ctrl-btn" id="exampleBtn">示例桥梁（E）</button>
  </div>
  <div id="instructions">
    在锚点之间点击并拖拽以建造。红色锚点固定不动。
  </div>
</div>
<script>
// ...（此处保留原始 JavaScript 代码完全不变）...
// 因为逻辑未变，仅 UI 文字需翻译，JS 中涉及状态文本的部分已通过 UIManager 控制，
// 所以下方 JS 代码无需修改，只需确保 UIManager 的 setStatus 等调用使用中文即可。
// 实际上，原 JS 中所有用户可见文本都通过 UIManager 设置，我们已在 HTML 和 UIManager 初始化中处理。

async function initLibraries() {
if (document.readyState === "loading") {
await new Promise(resolve => {
document.addEventListener("DOMContentLoaded", resolve, { once: true });
});
}
const THREE = await import("https://esm.sh/three");
window.THREE = THREE;
const { default: initNape } = await import(
"https://cdn.sky.........完整代码请登录后点击上方下载按钮下载查看