電子書籍の厳選無料作品が豊富！

画像がプルプルふるえるんです。

解決済

  • 質問者：Onetouch
  • 質問日時：
  • 回答数：2件

画面上でクリックするとその場所に向かって、キャラが移動するコードなのですが、
移動中、何かぎくしゃくした感じで、指定座標まで来るとピタッと止まってくれません。
プルプルとふるえています。
どうすれば、ピタッと止まってくれるでしょう？
あと出現場所の左上隅から画像の1/4が出てしまいます。top,leftで調整しても同じだったので、
position:absolute;だけにしましたが、こちらでも同じでした。
どこをどのように修正すればいいのか教えてください。
よろしくお願いします。


<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="message"></div>
<script>
var JIKI="img/jiki.gif"; //画像をここで指定
var wx = -(28/2); // 画像の中心をクリックした座標に合わせる　x座標(画像毎に調整)
var hy = -(30/2); // 画像の中心をクリックした座標に合わせる　y座標(画像毎に調整)
var tmp1 = 0; //作業用1
var tmp2 = 0; //作業用2
var spd = 8; //画像の速度。小さいほど速い
var ix = 0; // 画像のx座標
var iy = 0; // 画像のy座標
var mx = 0; //マウスのx座標
var my = 0; //マウスのy座標

var pict = "<img src='"+JIKI+"' id='Ship' style=' position:absolute;'>";

document.getElementById("message").innerHTML = pict;

//座標取得
document.onmousedown=function (e){
mx=e.clientX;
my=e.clientY;
}

//移動させる
function move_jiki() {
tmp=Math.atan2((my-iy),(mx-ix))+2*Math.PI;

//jiki画像の座標に加える
ix+=Math.cos(tmp);
iy+=Math.sin(tmp);

Ship.style.left=ix + wx + "px";
Ship.style.top=iy + hy + "px";

setTimeout("move_jiki()",spd);
}
window.onload=move_jiki;
</script>
</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo1です。



私の勘違いがありましたので、まず訂正です。
速度が変わることはありませんね。
ごめんなさい。忘れてください。

＞画面から消えてくれません。
スタイルでの指定は、ご提示のソースの場合はあまり意味がありません。なぜなら、onloadで直ぐにスクリプトで位置を制御し始めるからです。
スクリプト内の初期値も、同様に、window外に表示するようにしておけばよろしいと思います。

＞早く動いたり微妙に震えていたりと
これに関しては座標移動の計算ロジックによるところが大きいです。
計算方法とそれによる移動量を再チェックしてみてください。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： fujillin
  • 回答日時：

こんにちは。



ざっと眺めただけで、計算内容まで追いかけてはいませんので、正解ではありませんが、

＞プルプルとふるえています。
の原因として考えられることが、以下の2つありますので再確認してみてください。
1)目標の位置まで移動した後もアニメーションを停止していないので、ほぼ0に近い移動(描画)を繰り返している。
2)目的位置近辺で移動量を計算するのに描画上有効でない計算を繰り返していないか、あるいは近辺で往き来していませんか？
質問者様はお気付きでないようですが、1)は、後で述べる、予定と異なる動作になってしまう可能性も秘めているように思います。

画面表示上は1px以下の移動は意味を持たないので、計算での位置が目標位置に対してX,Yとも0.5pxより小さくなったら、座標を強制的に目標値にセットして、clearTimeoutで繰り返しを止める(=アニメーション終了)ようにしてあげるのが良いのではないでしょうか。
ご提示のままですと、ずっと処理が繰り返されるようになっています。

実は、アニメーションの途中であっても打ち切る機能も用意しておくことが必要かもしれません。(ご提示のコードをどのように使うかでも変わってきますが)
ご提示のサンプルでは、計算のインターバルが8とかなり速いので分かりにくいと思いますが、100ぐらいにセットしてテストしてみてください。
アニメーション中に何度かクリックしてみると、移動速度が変わりませんか？(それが質問者様の意図するところであるなら、問題ではありませんが)

＞あと出現場所の左上隅から画像の1/4が出てしまいます。
初期設定の問題と思いますが、top、leftは画像の左上の位置を示します。
最初に全て見えない位置からスタートさせたければ、画像のサイズに対して、-W、-Hより小さい座標位置から始める必要があります。
計算の初期設定も同様ですね。
    • good
    • 0
    • 件
通報する
この回答へのお礼

一つ目の指摘にあったように、clearTimeout調べて、付け加えてみました。clearTimeoutっていのあったんですね。(^-^;
function stopTimer() {
clearTimeout(timerID);
}
function restart(){
clearTimeout(timerID);
move_jiki();
}
document.onmouseout=function (e){//テストのためウィンドウ外にカーソルを持っていくと止まります。
stopTimer();
}
document.onmouseover=function (e){//カーソルをウィンドウ内に戻すと再開します。
restart();
}

おかげでTimeout()が止まると綺麗に止まるようになりました。
でも、動いてる時の挙動はちょっと早く動いたり微妙に震えていたりと、まだ不安定です。

あと、position:absolute; top:-60px; left:-60px;とここまでマイナスにしても、画面から消えてくれません。
なにが悪いのでしょうか？

通報する
お礼日時：2015/09/05 16:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報