当前位置：首页 > JavaScript

js实现重力

2026-03-15 05:44:28JavaScript

实现重力的基本概念

在JavaScript中实现重力效果通常涉及模拟物体在重力作用下的运动轨迹。重力可以通过加速度和速度的变化来模拟，使物体在垂直方向上逐渐加速下落。

初始化变量

定义物体的初始位置、速度和加速度。重力加速度通常设置为一个固定值，例如 9.8 像素/秒²，但可以根据实际需求调整。

js实现重力

let positionY = 0; // 初始垂直位置
let velocityY = 0; // 初始垂直速度
const gravity = 0.5; // 重力加速度

更新物体的位置和速度

在每一帧动画中，更新物体的速度和位置。速度会因重力而增加，位置会根据速度变化。

js实现重力

function update() {
    velocityY += gravity; // 速度增加
    positionY += velocityY; // 位置更新

    // 确保物体不会穿过地面（假设地面在canvas底部）
    if (positionY > canvas.height - objectHeight) {
        positionY = canvas.height - objectHeight;
        velocityY *= -0.8; // 反弹效果，能量损失
    }

    requestAnimationFrame(update);
}

渲染物体

使用Canvas或DOM将物体绘制到屏幕上，并根据 positionY 更新其垂直位置。

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(objectX, positionY, objectWidth, objectHeight);
    requestAnimationFrame(render);
}

完整示例代码

以下是一个完整的示例，展示如何在Canvas中实现重力效果：

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

let positionY = 50;
let velocityY = 0;
const gravity = 0.5;
const objectWidth = 50;
const objectHeight = 50;

function update() {
    velocityY += gravity;
    positionY += velocityY;

    if (positionY > canvas.height - objectHeight) {
        positionY = canvas.height - objectHeight;
        velocityY *= -0.8;
    }

    requestAnimationFrame(update);
}

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillRect(50, positionY, objectWidth, objectHeight);
    requestAnimationFrame(render);
}

update();
render();