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

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

ただいまの
回答率

87.49%

ボタンを押したら要素が指定方向に動くようにしたい

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 901

score 19

javascriptでボタンを押したら一定方向に要素が一定距離だけ動くように
したいです。今回はtop位置をボタンを押すと上に○px;移動というようにしたいです。

  • top:100~300pxの間で初めは300px;の位置
  • ボタンを押すと+10px;現在の位置より上に上がる
  • top:100px;位置までいくとボタンを押しても上がらないようにalert("stop");

以下とりあえずのコードです。

<html>
<head>
 <meta charset="utf-8">
 <title>game</title>
<style>
#ball{
 width:50px;
 height:50px;
 border-radius:50%;
 top:300px;
 left:300px;
 background-color:black;
 position:absolute;
}

</style>

</head>

<body>
 <div id="ball"></div>

 <input type="button" value="up" id="up" onclick="up()">
</body>

<script>
 function up(){
 var ball=document.getElementById("ball");

 var dis=Math.floor(Math.random()*300);
 var dis1=10;

 var st=ball.style.top;

 if(st<100){
 ball.style.top=-dis;


 }else if(st>300){

 alert("stop");
 }else{

 ball.style.top=dis;
 }

 };

</script>
</html>

とりあえずランダムでtop位置が絶対位置で変わってる・・・というような状態です。
jQueryは使わない方法でお願いします。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2018/10/26 15:09

    質問は編集できるので適宜ご対応ください

    キャンセル

  • m.ts10806

    2018/10/26 17:04

    JavaScriptのコードのインデントされてませんが、読みづらくはないのでしょうか。(今回はJavaScriptがメインですよね)

    キャンセル

  • nonnon8.

    2018/10/29 08:30

    すみません、解決済みの方で修正しておきます。。。

    キャンセル

回答 3

+3

Math.random()使ったらランダムになってしまうのでは?

<div id="ball" style="top: 300px;"></div>
function up(){
  var ball = document.getElementById("ball");
  var dis = parseFloat(ball.style.top) - 10;
  if (dis < 100) {
    alert('stop');
    return;
  }

  ball.style.top = dis.toString() + 'px';
}

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/10/26 14:27

    解答ありがとうございます。

    ランダムを入れたのはtop位置を絶対位置で変更はできたけれど、続けて押したときに位置が変わる様子を見たかったので一応いれただけです。現在位置から+10px;ずつとかで動くようにどうすればいいのかわからないので・・・
    parseFloatで300px→300と認識されるのですか?(数値として認識?)
    CSS部分のpxはつけない方がいいのでしょうか。

    dis.toString() + 'px';では-10移動した位置を文字列にしているというので合ってますか。

    確認したのですがボタンを押しても変化がないみたいです><

    キャンセル

  • 2018/10/26 14:45

    Chrome/IE/Firefoxで動作確認済みです。
    とくに難しいことはしていないので、どんなブラウザでも動くと思いますが何かエラーが出ているのでしょうか?

    キャンセル

  • 2018/10/26 15:51

    ありがとうございます。dice142様の回答みて納得しました。
    <div>内部でstyle指定していなかったようです。
    確認したらちゃんと動いていました。お手数おかけしました。

    キャンセル

  • 2018/10/26 15:55

    最初にインラインスタイルを適用しないのであれば、getComputedStyle()を使ってスタイルを取得する方法に変える必要があります。
    https://developer.mozilla.org/ja/docs/Web/API/Window/getComputedStyle

    キャンセル

check解決した方法

0

回答いただきありがとうございました。
ボタンを押すことで、上下左右に物体が動くようにできました。
以下コードです。

<html>
<head>
    <meta charset="utf-8">
    <title>game</title>
    <style>
    #ball{
        width:50px;
        height:50px;
        border-radius:50%;
        background-color:black;
        position:absolute;
        z-index:3;
    }

    #waku{
        width:350px;
        height:250px;
        border:1px solid black;
        top:100px;
        left:300px;
        z-index:1;
        position:absolute;
    }

    </style>

</head>

<body>

</body>
    <div id="ball" style="top: 300px; left: 300px;"></div>
    <div id="waku"></div>

    <input type="button" value="up" id="up" onclick="up()">
    <input type="button" value="down" id="up" onclick="down()">
    <input type="button" value="right" id="up" onclick="right()">
    <input type="button" value="left" id="up" onclick="left()">


<script>

    function up(){
      var ball = document.getElementById("ball");
      var dis = parseFloat(ball.style.top) - 10;
      if (dis < 100) {
        alert('stop');
        return;
      }

      ball.style.top = dis.toString() + 'px';
    }

    function down(){
      var ball = document.getElementById("ball");
      var dis = parseFloat(ball.style.top) + 10;
      if (dis >300) {
        alert('stop');
        return;
      }

      ball.style.top = dis.toString() + 'px';
    }

    function right(){
      var ball = document.getElementById("ball");
      var dis = parseFloat(ball.style.left) + 10;
      if (dis >600) {
        alert('stop');
        return;
      }

      ball.style.left = dis.toString() + 'px';
    }

    function left(){
      var ball = document.getElementById("ball");
      var dis = parseFloat(ball.style.left) - 10;
      if (dis <300) {
        alert('stop');
        return;
      }

      ball.style.left = dis.toString() + 'px';
    }

</script>
</html>

jsでCSSスタイルを変更する際は要素に直接style=""を記入する必要があると
初めて知りました^^;アドバイスありがとうございます。
parseFloatで小数含む数値として値を取得し、
そこから文字列に直してstyleに適用すればいいようです。

ありがとうございました。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

0

コードを拝見し、実行してみましたが、「ボタンを押しても動かない」
ということでよろしいですよね?

#ballのスタイルを全てCSSで行っていますが、
JavaScriptでvar st=ball.style.top;と記述しても
CSSのスタイルは取得できません。

var st=ball.style.top;の記述で取得できるのは
DOMに直接書いたときなので、

<div id="ball" style="top: 300px;"></div>


と書いていなければいけません。
また、このときの値は300pxなので、数値としては扱えません。

ball.style.top.match(/(\d+)px/)[1]


などで数値のみを取得しましょう。

設定の際には逆に

ball.style.top = [数値] + 'px'


を付ける必要があります。

CSSによる取得・設定は面倒なので回答しませんが、
「javascript css 取得」などで調べると出てくるでしょう。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

同じタグがついた質問を見る