metaton
@metaton (metaton Go)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

[javascript]Classで図形を動かしたいが何故か動かない

解決したいこと

classで図形を動かしたかったのですが何故か動きません多分classの書き方が悪いのでしょうが原因が分からなかったので質問させていただきます。

該当するソースコード

class GAME{
  constructor(x,y,widht,height,color,speed){
    this.x=x;
    this.y=y;
    this.widht=widht;
    this.height=height;
    this.color=color;
    this.speed=speed;
  }
  keymove(){
    let can = document.getElementById("canvas");
    let ctx = can.getContext("2d");
    ctx.fillStyle=this.color;
    ctx.fillRect(this.x,this.y,this.widht,this.height);
    this.x += this.speed;
    keymove();
  }
}

こうやって使ってます

let e = new GAME(200,200,100,100,"green",10);
e.keymove();
0

2Answer

  keymove(){
    let can = document.getElementById("canvas");
    let ctx = can.getContext("2d");
    ctx.fillStyle=this.color;
    ctx.fillRect(this.x,this.y,this.widht,this.height);
    this.x += this.speed;
    keymove();
  }

おそらく、最後のkeymove()で無限に動かそうとしているのでしょうが、
それであれば、this.keymove()にしなければなりません。
コンソールにkeymove is not definedと出ていますよね?

さらにこれを実行してしまうと、休みなく計算されてしまうためまともに動きません。setTimeoutsetIntervalrequestAnimationFrameを使って間隔を開けると良いと思います。

この場合thisの束縛という新たな壁があるので乗り越えてください。
最小の変更例:

  keymove(){
    let can = document.getElementById("canvas");
    let ctx = can.getContext("2d");
    ctx.fillStyle=this.color;
    ctx.fillRect(this.x,this.y,this.widht,this.height);
    this.x += this.speed;
    setTimeout(() => this.keymove.call(this), 1000);
  }
1Like

Comments

  1. @metaton

    Questioner

    丁寧な回答どうもありがとうございました。
    おかげさまでちゃんと思い道理に動かすことができました。
    本当にありがとうございました。

図形を動かしたかった

とありますが、「図形」とは何を指しているのでしょうか?
(素人目にはcanvasに四角形を書くコードにしか見えないのですが……)

あとkeymoveメソッドの最終行で呼んでいるkeymove()関数?の情報をいただけると助かります。

0Like

Comments

  1. @metaton

    Questioner

    説明不足ですいません図形はkeymove関数内のctx.fillrectの部分のことです。
    keymove関数は図形の描画する座標を変えて何度も呼び出したかったので最後にkeymove();を付けました
  2. @metaton

    Questioner

    this.xを変えることで座標を変えようとしましたが失敗したようです

Your answer might help someone💌