JavaScript Object内での計算

Question

ゲームを作っていて，キャラクターの三角形を描画して，キーに応じて移動させて，再描画したいのです．

Objectやそれを構築するclass, constructorの概念を知って，

let player_x = 100;
let plyaer_w = 50;
let plyaer_speed = 1000;

のように宣言しまくるのを

class MOB {
  constructor(left, right, top, bottom,
    color, speed, HP, direction,) {

    this.left = left; this.right = right;
    this.top = top; this.bottom = bottom;
  
    this.color = color; this.speed = speed;
    this.HP = HP; this.direction = direction;

    this.center_x = ( this.left + this.right ) /2
    this.center_y = ( this.bottom + this.top ) /2
  } 
} // once construted, if re-assigned value,
const player = new MOB(
    500 -15, 500 + 15,
    500 -60 , 500 + -10,
    '#FFF', 15, 500, 1,
);

の ように簡単にMOBを作れるように組んだのですが，動かす段階に至って
このthis.center.xはthis.leftが変化しても再計算されないし，
上下，左右，中央の情報は元の値を元に常に再計算されないとバグると気づきました．

• 衝突判定を楽に作るためにthis.leftの名前は使いたいです．

このようにobject内でobject内の一つの変数を元にして再計算されるものを書くことは
可能でしょうか？？

それともコードが冗長に見えても，そもそも一つ一つ

let player_x = 100;
let plyaer_y = 100;
let plyaer_w = 10;
let player_left = player_x;
let player_right = player_x + player_w;

とするべきなんでしょうかこの場合は？

初心者なので説明が下手で，ググる言葉も下手なのか全く記事にたどり着けませんでした

回答いただけるとありがたいです

Answer 1

お好きな方法をどうぞ。

• this.center_x, this.center_y を関数にして再計算
• this.center_x, this.center_y をgetterにして再計算(class get, `Object.defineProperty

`)

• this.center_x, this.center_y 以外をsetterにして再計算
• getter/setterの代わりに new Proxy を使って再計算

Re: Kaede0902 さん

Answer 2

「JavaScript class セッター」でググると、お求めのものが見つかると思います

Answer 3

class ブロックに書く constructor() は「初期化」しかしません。

例えば、右に動かすなら、moveRight() のような関数を作って、右に動かすために関連する変数(プロパティ)をすべてを処理する必要があります。

constructor() 内を見る限り、「オブジェクト：いくつもの変数をまとめた新しい処理単位」を作るところまではできていますから、メソッドで実装する例を書いてみます。

class MOB {

  constructor(){
    /* omitted */
  }

  // x だけ右にうごく関数（メソッド）
  moveRight( x ){
    // 左右ともにX動く
    this.left += x;
    this.right += x;
    // センターは再計算
    this.center_x = ( this.left + this.right ) /2;
  }

  // センターの再計算は class ゲッターでも書いてもいい
/*
  get center_x() {
    return ( this.left + this.right ) /2
  }
*/
}

こんな感じで、欲しい機能を実装しましょう。

let mob1 = new MOB(/* omitted */);
mob1.moveRight( 32 );
console.log( mob1 ); // 右に動いたような数値になるはず。

とまぁ、超初心者向けで答えてみました。