JavaScriptでWebページを作成しているのですがどうしてもできないところがあるため質問させていただきます。

以下のようにして画像を横方向に動かすコードを書いているのですが、これを斜めに動かすものに変えたいと思っています。
斜めにするためにはどうすればいいのでしょうか。
わかる方いましたら教えて下さると助かります。
よろしくお願いします。

var draw3dx = -1;
var draw3LargeHeight = -1;

var c1X = 0;
var c1Y = 0;
var c1Dx = 1;

context.drawImage(c1, c1X, c1Y, c1.width * scale, c1.height * scale);



//横方向の移動
c1X -= c1Dx * 10;
//動く範囲を決め、範囲外の場合は向きを変える
if(c1X < 0){
c1Dx *= -1;
}
if(c1X > (canvas.width - c1.width * scale)){
c1Dx *= -1;
}
}

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2017/09/05 15:40:07

回答1件)

id:a-kuma3 No.1

回答回数4973ベストアンサー獲得回数2154

縦方向は、下向きが正なことだけ気を付けて、横方向と同じに書けば良いです。

var draw3dx = -1;
var draw3LargeHeight = -1;

var c1X = 0;
var c1Y = 0;
var c1Dx = 1;
var c1Dy = 1;       // ★ここと

context.drawImage(c1, c1X, c1Y, c1.width * scale, c1.height * scale);

//横方向の移動
c1X -= c1Dx * 10;
//動く範囲を決め、範囲外の場合は向きを変える
if(c1X < 0){
    c1Dx *= -1;
}
if(c1X > (canvas.width - c1.width * scale)){
    c1Dx *= -1;
}

// ★ここから
//縦方向の移動
c1Y -= c1Dy * 10;
//動く範囲を決め、範囲外の場合は向きを変える
if(c1Y < 0){
    c1Dy *= -1;
}
if(c1Y > (canvas.height - c1.height * scale)){
    c1Dy *= -1;
}
// ★ここまで

c1Dy にかける数字の大きさで斜めの角度が決まります。
同じ数字の場合には、ななめ45°。

ここら辺りはすでにやってるということであれば、

  • 「どうしてもできない」を再現できるコードをさらす
  • 「どうしてもできない」の内容を、もっと具体的に書く

あたりをしてくれないと、ピンポイントな回答ができません。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません