网络/游戏加速器通常分：游戏加速器、视频/网页加速器、下载加速器、跨境网络加速器；按技术又分 VPN、代理、专线、SD-WAN、CDN 等。
这是一个用于单机游戏或自研游戏的变速器HTML代码，通过调节滑块来实时控制游戏速度。
```html
<!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>
* {
box-sizing: border-box;
}
body {
background: linear-gradient(145deg, #1a1e2b 0%, #0e121c 100%);
font-family: 'Segoe UI', Roboto, system-ui, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 16px;
}
.accelerator {
background: rgba(22, 28, 40, 0.9);
backdrop-filter: blur(8px);
border-radius: 40px;
padding: 28px 30px;
box-shadow: 0 25px 40px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.08);
border: 1px solid rgba(90, 160, 255, 0.2);
width: 400px;
transition: all 0.2s;
}
h2 {
text-align: center;
color: #b8d0ff;
margin-top: 0;
margin-bottom: 18px;
font-weight: 500;
letter-spacing: 2px;
font-size: 1.4rem;
text-shadow: 0 0 12px rgba(70, 130, 255, 0.5);
}
.speed-panel {
display: flex;
align-items: baseline;
justify-content: center;
gap: 6px;
margin-bottom: 12px;
}
.speed-value {
font-size: 4.2rem;
font-weight: 800;
color: #ffffff;
text-shadow: 0 0 30px #3f7aff, 0 0 10px #3f7aff;
line-height: 1;
transition: text-shadow 0.2s;
min-width: 180px;
text-align: center;
}
.speed-unit {
font-size: 1.3rem;
color: #6a8fc0;
font-weight: 400;
}
.slider-container {
padding: 8px 4px 0 4px;
}
input[type=range] {
width: 100%;
height: 8px;
-webkit-appearance: none;
background: #1e2638;
border-radius: 10px;
outline: none;
box-shadow: inset 0 2px 5px #0a0d14;
margin: 12px 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
background: #4d8aff;
border: 2px solid #b0d0ff;
box-shadow: 0 0 16px #4d8aff, 0 2px 6px black;
cursor: pointer;
transition: 0.1s;
}
input[type=range]::-webkit-slider-thumb:hover {
background: #6aa2ff;
transform: scale(1.08);
}
input[type=range]::-moz-range-thumb {
width: 24px;
height: 24px;
border-radius: 50%;
background: #4d8aff;
border: 2px solid #b0d0ff;
box-shadow: 0 0 16px #4d8aff;
cursor: pointer;
}
.tick-labels {
display: flex;
justify-content: space-between;
color: #5d729b;
font-size: 0.75rem;
font-weight: 600;
padding: 0 6px;
letter-spacing: 0.5px;
}
.preset-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 10px;
margin: 22px 0 14px 0;
}
.preset-btn {
background: #1c2436;
border: 1px solid #314a6e;
color: #bdd3ff;
padding: 8px 16px;
border-radius: 60px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.15s;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
letter-spacing: 0.3px;
}
.preset-btn:hover {
background: #2a3a55;
border-color: #4d8aff;
color: white;
box-shadow: 0 0 18px rgba(70, 130, 255, 0.5);
transform: translateY(-2px);
}
.preset-btn:active {
transform: translateY(1px);
box-shadow: 0 2px 4px black;
}
.game-sandbox {
background: #0b0f17;
border-radius: 24px;
padding: 16px 18px;
margin-top: 18px;
border: 1px solid #253143;
box-shadow: inset 0 0 10px #00000066;
}
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
color: #9bb5e0;
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.5px;
margin-bottom: 10px;
}
.game-canvas-wrap {
display: flex;
justify-content: center;
align-items: center;
}
canvas {
display: block;
width: 100%;
height: auto;
border-radius: 16px;
background: #0a0e15;
box-shadow: 0 0 20px #00000099;
border: 1px solid #2f405b;
}
.game-stats {
display: flex;
justify-content: space-between;
color: #7f9fd0;
font-size: 0.78rem;
margin-top: 10px;
font-family: 'Courier New', monospace;
background: #111a26;
padding: 8px 14px;
border-radius: 40px;
border: 1px solid #253a50;
}
.badge {
background: #1e2d44;
padding: 2px 10px;
border-radius: 40px;
color: #9ec3ff;
font-weight: 600;
}
</style>
</head>
<body>
<div class="accelerator">
<h2>⚡ 变速齿轮 · 加速器</h2>
<!– 速度显示 –>
<div class="speed-panel">
<span class="speed-value" id="speedDisplay">1.00</span>
<span class="speed-unit">×</span>
</div>
<!– 滑块 –>
<div class="slider-container">
<input type="range" id="speedSlider" min="0.1" max="5.0" step="0.05" value="1.0">
<div class="tick-labels">
<span>0.1×</span>
<span>1×</span>
<span>3×</span>
<span>5×</span>
</div>
</div>
<!– 预设按钮 –>
<div class="preset-row">
<button class="preset-btn" data-speed="0.25">0.25×</button>
<button class="preset-btn" data-speed="0.5">0.5×</button>
<button class="preset-btn" data-speed="1.0">1×</button>
<button class="preset-btn" data-speed="2.0">2×</button>
<button class="preset-btn" data-speed="3.0">3×</button>
<button class="preset-btn" data-speed="5.0">5×</button>
</div>
<!– 沙盒演示游戏 –>
<div class="game-sandbox">
<div class="game-header">
<span>🎮 速度测试沙盒</span>
<span class="badge" id="gameSpeedTag">1.00×</span>
</div>
<div class="game-canvas-wrap">
<canvas id="gameCanvas" width="340" height="120"></canvas>
</div>
<div class="game-stats">
<span>🔵 粒子数: <span id="particleCount">0</span></span>
<span>⏱️ 模拟时间: <span id="simTime">0.0</span>s</span>
</div>
</div>
</div>
<script>
(function() {
// ———- 全局变速核心 ———-
let speed = 1.0; // 当前速度倍数
const speedDisplay = document.getElementById('speedDisplay');
const speedSlider = document.getElementById('speedSlider');
const gameSpeedTag = document.getElementById('gameSpeedTag');
const particleCountSpan = document.getElementById('particleCount');
const simTimeSpan = document.getElementById('simTime');
// 更新UI & 全局速度
function setSpeed(value) {
speed = Math.min(5.0, Math.max(0.1, value));
// 保留两位小数显示
speedDisplay.textContent = speed.toFixed(2);
speedSlider.value = speed;
gameSpeedTag.textContent = speed.toFixed(2) + '×';
// 根据速度改变光效颜色（小细节）
const glowColor = speed > 2.5 ? '#ffaa33' : (speed < 0.5 ? '#33ccff' : '#3f7aff');
speedDisplay.style.textShadow = `0 0 30px ${glowColor}, 0 0 10px ${glowColor}`;
}
// 滑块输入
speedSlider.addEventListener('input', function(e) {
setSpeed(parseFloat(e.target.value));
});
// 预设按钮
document.querySelectorAll('.preset-btn').forEach(btn => {
btn.addEventListener('click', function() {
const val = parseFloat(this.dataset.speed);
setSpeed(val);
});
});
// ———- 粒子沙盒 ———-
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
// 粒子系统
let particles = [];
let simTime = 0.0;
class Particle {
constructor() {
this.reset();
}
reset() {
this.x = Math.random() * W;
this.y = Math.random() * H;
// 基础速度（像素/秒）
this.vx = (Math.random() – 0.5) * 90;
this.vy = (Math.random() – 0.5) * 90;
this.radius = 2 + Math.random() * 5;
// 颜色基于速度
const hue = Math.floor(Math.random() * 40 + 190); // 蓝色/青色系
this.color = `hsl(${hue}, 80%, 65%)`;
}
update(dt) {
// 边界反弹
if (this.x < this.radius) { this.x = this.radius; this.vx *= -1; }
if (this.x > W – this.radius) { this.x = W – this.radius; this.vx *= -1; }
if (this.y < this.radius) { this.y = this.radius; this.vy *= -1; }
if (this.y > H – this.radius) { this.y = H – this.radius; this.vy *= -1; }
this.x += this.vx * dt;
this.y += this.vy * dt;
}
draw(ctx) {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
// 发光效果
ctx.shadowColor = this.color;
ctx.shadowBlur = 12;
ctx.fillStyle = this.color;
ctx.fill();
ctx.shadowBlur = 0; // 重置，避免影响后续绘制
}
}
// 初始化粒子
function initParticles(count = 32) {
particles = [];
for (let i = 0; i < count; i++) {
particles.push(new Particle());
}
particleCountSpan.textContent = particles.length;
}
initParticles(32);
// ———- 固定步长累加器（变速核心） ———-
const FIXED_DT = 1 / 60; // 逻辑更新固定步长 (60Hz)
let accumulator = 0;
let lastRealTime = performance.now() / 1000; // 真实时间(秒)
let totalSimTime = 0; // 累计模拟时间
// 游戏主循环
function gameLoop(nowMs) {
const realNow = nowMs / 1000;
let realDelta = realNow – lastRealTime;
lastRealTime = realNow;
// 防止切换标签页等导致的时间跳变
if (realDelta > 0.25) realDelta = 0.25;
// ★★★ 加速关键：真实时间 × 速度倍数 => 虚拟时间增量 ★★★
accumulator += realDelta * speed;
// 固定步长更新逻辑（保证物理稳定，不受帧率影响）
let updateCount = 0;
const maxUpdates = 12; // 防止极端卡顿导致死循环
while (accumulator >= FIXED_DT && updateCount < maxUpdates) {
// 更新粒子（使用固定步长，物理表现一致）
for (let p of particles) {
p.update(FIXED_DT);
}
accumulator -= FIXED_DT;
totalSimTime += FIXED_DT;
updateCount++;
}
// 如果更新次数达到上限，丢弃剩余累积，避免螺旋死亡
if (updateCount >= maxUpdates) {
accumulator = 0;
}
// 更新UI中的模拟时间显示
simTimeSpan.textContent = totalSimTime.toFixed(1);
// ———- 渲染 ———-
ctx.clearRect(0, 0, W, H);
// 绘制微弱的网格背景
ctx.strokeStyle = '#1e2b3a';
ctx.lineWidth = 0.5;
for (let i = 0; i < W; i += 30) {
ctx.beginPath();
ctx.moveTo(i, 0);
ctx.lineTo(i, H);
ctx.strokeStyle = '#18232e';
ctx.stroke();
}
for (let i = 0; i < H; i += 30) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(W, i);
ctx.strokeStyle = '#18232e';
ctx.stroke();
}
// 绘制粒子
for (let p of particles) {
p.draw(ctx);
}
// 绘制速度指示文字（canvas上）
ctx.font = 'bold 14px "Segoe UI", monospace';
ctx.fillStyle = 'rgba(160, 200, 255, 0.7)';
ctx.shadowBlur = 0;
ctx.fillText(`×${speed.toFixed(2)}`, 10, 24);
// 继续下一帧
requestAnimationFrame(gameLoop);
}
// 启动循环（传入当前时间戳）
requestAnimationFrame(gameLoop);
// 初始化速度为1
setSpeed(1.0);
// 可选：键盘快捷键（1~5对应速度）
window.addEventListener('keydown', (e) => {
// 数字键 1-5 直接设置速度倍数
if (e.key >= '1' && e.key <= '5') {
const num = parseInt(e.key, 10);
if (num >= 1 && num <= 5) {
setSpeed(num);
}
}
// 按 R 重置为1倍
if (e.key === 'r' || e.key === 'R') {
setSpeed(1.0);
}
});
// 防止滑块拖动时页面滚动（移动端友好）
speedSlider.addEventListener('touchstart', (e) => e.stopPropagation());
})();
</script>
</body>
</html>
此处仅限于示例展示学习，抗压测试等请自行操作。
