当前位置：首页 > JavaScript

js 赛道实现

2026-03-14 10:12:50JavaScript

赛道实现的基本思路

在JavaScript中实现赛道效果通常涉及Canvas绘图或CSS动画。赛道可以是赛车游戏中的路径，也可以是可视化设计中的动态元素。以下是两种常见的实现方式。

使用Canvas绘制赛道

Canvas提供灵活的绘图API，适合需要动态交互的赛道效果。

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 绘制赛道边界
function drawTrack() {
    ctx.beginPath();
    ctx.moveTo(100, 100);
    ctx.lineTo(400, 100);
    ctx.lineTo(400, 400);
    ctx.lineTo(100, 400);
    ctx.closePath();
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 10;
    ctx.stroke();

    // 赛道内部填充
    ctx.fillStyle = 'gray';
    ctx.fill();
}

// 动画循环
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawTrack();
    requestAnimationFrame(gameLoop);
}

gameLoop();

使用CSS实现动态赛道

CSS动画适合静态展示或简单的动态效果，如无限循环的赛道背景。

<style>
    .track {
        width: 100%;
        height: 200px;
        background: repeating-linear-gradient(
            45deg,
            #333,
            #333 20px,
            #444 20px,
            #444 40px
        );
        animation: moveTrack 2s linear infinite;
    }

    @keyframes moveTrack {
        0% { background-position: 0 0; }
        100% { background-position: 40px 40px; }
    }
</style>

<div class="track"></div>

赛道碰撞检测

在赛车游戏中，需要检测车辆是否偏离赛道。以下是一个简单的矩形边界检测示例。

function checkCollision(carX, carY, carWidth, carHeight) {
    const trackInnerLeft = 110;
    const trackInnerTop = 110;
    const trackInnerRight = 390;
    const trackInnerBottom = 390;

    return (
        carX < trackInnerLeft ||
        carX + carWidth > trackInnerRight ||
        carY < trackInnerTop ||
        carY + carHeight > trackInnerBottom
    );
}

赛道曲线生成

对于更复杂的赛道，可以使用贝塞尔曲线或样条曲线生成平滑路径。

function drawCurvedTrack() {
    ctx.beginPath();
    ctx.moveTo(100, 200);
    ctx.bezierCurveTo(150, 100, 350, 100, 400, 200);
    ctx.bezierCurveTo(450, 300, 350, 400, 200, 400);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 5;
    ctx.stroke();
}

性能优化建议

对于复杂的赛道场景，考虑使用离屏Canvas进行预渲染。避免在每一帧都重新绘制静态元素，将不变的赛道部分缓存为图像。

js 赛道实现

const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCanvas.width = canvas.width;
offscreenCanvas.height = canvas.height;

// 预渲染静态赛道
drawTrackOnOffscreen();

function drawTrackOnOffscreen() {
    offscreenCtx.beginPath();
    // 绘制赛道逻辑...
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(offscreenCanvas, 0, 0);
    // 绘制动态元素...
    requestAnimationFrame(gameLoop);
}