使用JavaScript实现一个物理模拟
作者：纯爱掌门人
最近掌门人在写3D游戏,对于其中的物理效果很感兴趣,今天我将使用纯JavaScript来实现一个简易的物理模拟,其中包括碰撞检测与响应、摩擦力与空气阻力、以及物体的破坏效果,文中通过代码示例讲解的非常详细,需要的朋友可以参考下
1. 碰撞检测
首先就是碰撞检测，在游戏中这是最基础的效果，下述栗子中将会实现检测两个矩形物体是否发生碰撞。
function isColliding(rect1, rect2) {
return (
rect1.x < rect2.x + rect2.width &&
rect1.x + rect1.width > rect2.x &&
rect1.y < rect2.y + rect2.height &&
rect1.height + rect1.y > rect2.y
);
}
// 测试碰撞检测
const rect1 = { x: 5, y: 5, width: 50, height: 50 };
const rect2 = { x: 20, y: 20, width: 50, height: 50 };
console.log(isColliding(rect1, rect2)); // 输出：true
2. 碰撞响应
正常情况下，当两个物体发生碰撞时，我们需要计算它们的碰撞响应。在这里，就简单地反转它们的速度来模拟弹性碰撞。
function resolveCollision(obj1, obj2) {
const tempVelocity = obj1.velocity;
obj1.velocity = obj2.velocity;
obj2.velocity = tempVelocity;
}
// 测试碰撞响应
let obj1 = { velocity: { x: 5, y: 0 } };
let obj2 = { velocity: { x: -3, y: 0 } };
if (isColliding(rect1, rect2)) {
resolveCollision(obj1, obj2);
}
console.log(obj1.velocity, obj2.velocity); // 输出：{ x: -3, y: 0 } { x: 5, y: 0 }
3. 摩擦力
摩擦力会减缓物体在接触表面上的移动。在这个示例中，我们使用一个简单的摩擦系数来模拟摩擦力对速度的影响。
function applyFriction(velocity, friction) {
velocity.x *= friction;
velocity.y *= friction;
}
// 测试摩擦力
let velocity = { x: 10, y: 0 };
const friction = 0.95; // 摩擦系数
applyFriction(velocity, friction);
console.log(velocity); // 输出：{ x: 9.5, y: 0 }
4. 空气阻力
空气阻力会减缓物体在空中的移动。我们可以通过减小速度的百分比来模拟这种效果.
function applyDrag(velocity, drag) {
velocity.x *= (1 - drag);
velocity.y *= (1 - drag);
}
// 测试空气阻力
let velocity = { x: 10, y: 0 };
const drag = 0.05; // 空气阻力系数
applyDrag(velocity, drag);
console.log(velocity); // 输出：{ x: 9.5, y: 0 }
5. 物体破坏
首先当物体的速度超过一定阈值时，我们可以假设物体已经被破坏。这里我们定义一个简单的函数来判断物体是否应该被破坏，并在破坏发生时改变其状态。
function checkAndApplyDamage(obj, threshold) {
const speed = Math.sqrt(obj.velocity.x ** 2 + obj.velocity.y ** 2);
if (speed > threshold) {
obj.isDestroyed = true;
}
}
// 测试物体破坏
let obj = { velocity: { x: 50, y: 0 }, isDestroyed: false };
const damageThreshold = 30; // 破坏阈值
checkAndApplyDamage(obj, damageThreshold);
console.log(obj.isDestroyed); // 输出：true
完整案例
俗话说光说不练假把式，所有的都是为最终的效果服务的，最后我们将上述的所有效果整合起来，实现一个简单的demo效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>物理模拟</title>
<style>
canvas {
border: 1px solid black;
}
#controls {
margin-top: 10px;
}
.info {
margin-right: 10px;
}
</style>
</head>
</body>
<canvas id="simulation" width="500" height="300"></canvas>
<div id="controls">
<div class="info">
<label for="friction">摩擦力:</label>
<input type="range" id="friction" min="0" max="1" step="0.01" value="0.99">
<span id="frictionValue">0.99</span>
</div>
<div class="info">
<label for="drag">风阻:</label>
<input type="range" id="drag" min="0" max="0.1" step="0.001" value="0.01">
<span id="dragValue">0.01</span>
</div>
<div class="info">
<label for="threshold">临界值:</label>
<input type="range" id="threshold" min="0" max="500" step="1" value="25">
<span id="thresholdValue">25</span>
</div>
<button id="restartBtn">重启模拟</button>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取canvas和context
const canvas = document.getElementById('simulation');
const ctx = canvas.getContext('2d');
// 定义物体构造函数
function GameObject(x, y, width, height, velocity) {
this.initialX = x;
this.initialY = y;
this.width = width;
this.height = height;
this.initialVelocity = { ...velocity };
this.velocity = { ...velocity };
this.isDestroyed = false;
}
// 添加方法到GameObject原型
GameObject.prototype = {
reset() {
this.x = this.initialX;
this.y = this.initialY;
this.velocity = { ...this.initialVelocity };
this.isDestroyed = false;
},
isColliding(other) {
return (
this.x < other.x + other.width &&
this.x + this.width > other.x &&
this.y < other.y + other.height &&
this.height + this.y > other.y
);
},
resolveCollision(other) {
if (!this.isDestroyed && !other.isDestroyed) {
console.log('打印碰撞前的速度:', Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2), Math.sqrt(other.velocity.x ** 2 + other.velocity.y ** 2));
const tempVelocity = this.velocity;
this.velocity = other.velocity;
other.velocity = tempVelocity;
console.log('打印碰撞后的速度:', Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2), Math.sqrt(other.velocity.x ** 2 + other.velocity.y ** 2));
}
},
update(friction, drag, threshold) {
if (this.isDestroyed) return;
// 应用摩擦力和空气阻力
this.velocity.x *= friction;
this.velocity.y *= friction;
this.velocity.x *= (1 - drag);
this.velocity.y *= (1 - drag);
// 更新位置
this.x += this.velocity.x;
this.y += this.velocity.y;
// 检查破坏
const speed = Math.sqrt(this.velocity.x ** 2 + this.velocity.y ** 2);
if (speed > threshold) {
this.isDestroyed = true;
}
},
draw() {
ctx.fillStyle = this.isDestroyed ? 'red' : 'blue';
ctx.fillRect(this.x, this.y, this.width, this.height);
}
};
// 实例化物体，确保设置了 x 和 y
const obj1 = new GameObject(100, 100, 50, 50, { x: 5, y: 0 });
const obj2 = new GameObject(300, 100, 50, 50, { x: -5, y: 0 });
// 设置物理参数
let friction = 0.99;
let drag = 0.01;
let destructionThreshold = 25;
// 获取控件元素
const frictionInput = document.getElementById('friction');
const dragInput = document.getElementById('drag');
const thresholdInput = document.getElementById('threshold');
const frictionValueDisplay = document.getElementById('frictionValue');
const dragValueDisplay = document.getElementById('dragValue');
const thresholdValueDisplay = document.getElementById('thresholdValue');
const restartBtn = document.getElementById('restartBtn');
// 更新参数值的函数
function updateParameters() {
friction = parseFloat(frictionInput.value);
drag = parseFloat(dragInput.value);
destructionThreshold = parseFloat(thresholdInput.value);
}
// 监听滑动条的变化
frictionInput.addEventListener('input', function () {
frictionValueDisplay.textContent = this.value;
});
dragInput.addEventListener('input', function () {
dragValueDisplay.textContent = this.value;
});
thresholdInput.addEventListener('input', function () {
thresholdValueDisplay.textContent = this.value;
});
// 动画循环函数
let animationFrameId;
function animate() {
animationFrameId = requestAnimationFrame(animate);
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 更新和绘制物体
obj1.update(friction, drag, destructionThreshold);
obj2.update(friction, drag, destructionThreshold);
obj1.draw();
obj2.draw();
// 碰撞检测和响应
if (obj1.isColliding(obj2)) {
obj1.resolveCollision(obj2);
}
}
// 启动动画
animate();
// 重新开始动画的函数
function restartAnimation() {
// 取消当前的动画帧请求
cancelAnimationFrame(animationFrameId);
// 重置物体状态
obj1.reset();
obj2.reset();
// 更新参数
updateParameters();
// 重新开始动画
animate();
}
// 绑定重启按钮事件
restartBtn.addEventListener('click', restartAnimation);
})
</script>
<body>
总结
上述的案例我们实现了简单的物理模拟效果，只是给大家一个思路，毕竟万物皆可JS嘛，但是如果大家想要在项目中使用的话，就需要更加拟真和复杂的算法，本文只是带大家大概的了解一下它的实现方式。
大家快去试试吧，俗话说眼过千遍，不如手过一遍，说不定大家在实现的过程中，会找到更加方便简易的实现方法。
以上就是使用JavaScript实现一个物理模拟的详细内容，更多关于JavaScript物理模拟的资料请关注脚本之家其它相关文章！