質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.04%

jQueryを使って画像が長方形領域内を動き回るJavascriptのプログラムを含んだhtmlファイルを作りたいのですが

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,639

tanaka_taro

score 8


画像をスタートボタンで動き始め、ストップボタンで、その場で止まるようにしたいです。画像が動くようにはなりましたが、領域内からはみ出てしまいます。ストップさせる方法もわかりません。
よろしくお願いします。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第8週練習問題</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
  var img = $('#img').attr('src',
                            'http://www.ics.ritsumei.ac.jp/wp-content/themes/ics/images/img_research01.gif').height(128).css({'left': 0, 'top': 0, 'position': 'absolute', cursor: 'pointer'});

  var div = $('#rect').css({border: 'dotted 1px', position: 'relative'})
  .width(480).height(360);
  var width = div.width();
  var height = div.height();
  var x = 0, y = 0, divx = 1, divy = 1, velx = 4, vely = 4;


  function loop(){

$('#img').css({left: x + 'px', top: y + 'px'})

  x = x + velx * divx;
  if((x + ('#img').width > width) || (x < 0)){
   divx = - divx;
   x = x + velx * divx;
   }
  y = y + vely * divy;
  if((y + ('#img').height > height) || (y < 0)){
   divy = - divy;
   y = y + vely * divy;
   }

  setTimeout(loop, 100);
 }


  $('#start-btn').on('click', function() {

  loop();

  });
  $('#stop-btn').on('click', function() {
  


  setTimeout(loop, 100);
  
  });
});


</script>
<div id="rect">
 <img id="img">
</div>
<button id="start-btn">スタート</button>
<button id="stop-btn">ストップ</button>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

0

(1)領域判定
領域外に出たかどうかの判定部分ですが、
画像サイズを取得するには「width」「height」の後に「()」が必要です。
if((x + ('#img').width > width) || (x < 0))

if((x + ('#img').width() > width) || (x < 0)) //← widthに「()」をつける
heightも同様に「()」をつけてみてください。

(2)停止する

loop内で実行しているsetTimeoutをキャンセルする処理が必要です。
まずsetTimeoutで実行されるタイマーを識別するIDを変数に保存します。

timeout_id = setTimeout(loop, 100); //← setTimeout関数はIDを返す
このタイマーをキャンセルする処理をstop-btnに割り当てます。

$('#stop-btn').on('click', function() {
  clearTimeout(timeout_id); //← キャンセルしたいタイマーIDを渡す
});

timeout_idはloop関数の外で使用するので、冒頭で変数宣言しておきましょう。

var timeout_id;




投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/06/09 16:56

    ちょっとコメントすると、最初の領域判定では「$」も足りていないと思います。

    キャンセル

  • 2015/06/09 16:59

    たしかにそうですね。見落としていました。
    カッコの前に「$」をつけて、

    $('#img').width()

    が正しい記述ですね。

    キャンセル

0

setTimeout関数はIDを返す。clearTimeout関数にそのIDを渡すと、setTimeout関数に登録したコールバック関数は実行されない。
('#img').widthはimg要素の幅を返さずにundefinedを返す。

この2つを理解し、適切な修正を入れることで、プログラムが正しく動くようになります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

想定通りに動かない原因はpenguinshunyaさんがおっしゃった通りです。
ただsetTimeoutを使うのではなくsetIntervalclearIntervalを利用すべきだと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる