three实现三维水上摩托车驾驶游戏代码
代码语言:html
所属分类:其他
代码由deepseek-v4.1 ai生成,可能有错误,仅供参考:点击查看提示词
代码描述:三维水上摩托车驾驶游戏
代码标签: three 三维 水上 摩托车 驾驶 游戏 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<title>水上摩托 · 极速狂飙</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
width: 100%; height: 100%; overflow: hidden; background: #0a2238;
font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
canvas { display: block; }
#hud {
position: fixed; inset: 0; pointer-events: none; color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,.55); user-select: none;
}
/* 右上角距离 */
#score {
position: absolute; top: 20px; right: 26px; text-align: right;
font-size: 13px; letter-spacing: 2px; opacity: .9;
}
#score b { display: block; font-size: 32px; font-weight: 800; line-height: 1.05; letter-spacing: 0; }
/* 左下角速度表 */
#speedbox { position: absolute; left: 26px; bottom: 24px; }
#speed {
font-size: 66px; font-weight: 800; line-height: .82;
letter-spacing: -2px; font-variant-numeric: tabular-nums;
transition: color .15s;
}
#speed.danger { color: #ff4d4d; }
.unit { font-size: 13px; opacity: .8; letter-spacing: 4px; margin-top: 6px; }
#sinkwrap {
margin-top: 12px; width: 200px; height: 10px; border-radius: 6px;
background: rgba(255,255,255,.16); overflow: hidden;
border: 1px solid rgba(255,255,255,.25);
}
#sinkbar {
height: 100%; width: 0%; border-radius: 6px;
background: linear-gradient(90deg, #ffd24d, #ff3b30);
transition: width .08s linear;
}
#warn {
margin-top: 9px; font-size: 13px; font-weight: 700; letter-spacing: 1px;
color: #ff6b6b; opacity: 0; transition: opacity .2s;
}
#warn.show { opacity: 1; animation: blink .55s infinite alternate; }
@keyframes blink { from { opacity: 1; } to { opacity: .3; } }
/* 操作提示 */
#hint {
position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
font-size: 13px; letter-spacing: 1px; opacity: .75; white-space: nowrap;
background: rgba(0,0,0,.22); paddi.........完整代码请登录后点击上方下载按钮下载查看















网友评论0