矢量归一化无法按预期工作

问题描述

我的游戏动作有问题。我要么错误地使用了 sin 和 cos 来计算真正的 X,Y 来移动屏幕（角色保持居中），要么计算时间太长，刷新速度不够快。以下代码在使用 window.requestAnimationFrame 继续循环的游戏循环中实现。

有时它会朝着正确的方向移动，有时它会朝着与我预期相反的方向移动，但这种行为并不一致。

我的角度范围为正负 (0-360)，具体取决于头像是顺时针旋转还是逆向旋转（这部分代码正确注册）。 我已经测试了 BattleField 对象设置方法以确保它们正确设置顶部和左侧。 我已经测试了 BattleField 对象方法以确保它返回正确的顶部和左侧值（整数形式，没有像“px”这样的单位指示符）；

非常感谢任何想法或建议。

let battleField = {
    id: 'battleField',speed: 5,get speedTop() {
    let rotateNum = parseInt(rotateAngle,10);
    let radians=rotateNum*Math.PI/180
    let truetop=userAvatar.speed*(Math.sin(radians))
    return truetop;
  },get speedLeft() {
    let rotateNum = parseInt(rotateAngle,10);
    let radians=rotateNum*Math.PI/180
    let trueLeft=userAvatar.speed*(Math.cos(radians))
    return trueLeft
  },get element() {
    let elm = document.getElementById(this.id);
    return elm;
  },get bottom() {
    let elmBottom = parseInt(window.getComputedStyle(this.element).bottom,10);
    return elmBottom;
  },get top() {
    let elmTop = parseInt(window.getComputedStyle(this.element).top,10);
    return elmTop;
  },get left() {
    let elmLeft = parseInt(window.getComputedStyle(this.element).left,10);
    return elmLeft;
  },get right() {
    let elmRight = this.left + this.width;
    return elmRight;
  },get width() {
    let elmWidth = parseInt(window.getComputedStyle(this.element).width,10);
    return elmWidth;
  },get height() {
    let elmHeight = parseInt(window.getComputedStyle(this.element).height,10);
    return elmHeight;
  },set setBottom(value) {
    this.element.style.bottom = value + 'px';
  },set setLeft(value) {
    this.element.style.left = value + 'px';
  },set setRight(value) {
    this.element.style.left = (value - 50) + 'px';
  },set setTop(value) {
    this.element.style.top = (value) + 'px';
  },get maxRight() {
    if(this.left<screenArea.width-this.width){
        return true;
    }
  },get maxLeft() {
    if(this.left>=0){
        return true;
    }
  },get maxTop() {
    if(this.top>=0){
        return true;
    }
  },get maxBottom() {
    if(this.top<screenArea.height-this.height){
        return true;
    }
  }
}
let userAvatar = {
  speed:5
}
let rotateAngle="15deg";

function loop(){
let rotateNum = parseInt(rotateAngle,10);
let radians=rotateNum*Math.PI/180
let newTop= battleField.top + (Math.sin(radians) * userAvatar.speed);
let newLeft= battleField.left - (Math.cos(radians) * userAvatar.speed);
battleField.setTop = newTop;
battleField.setLeft = newLeft;
window.requestAnimationFrame(loop);
}
window.requestAnimationFrame(loop);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）