サッカーアプリを作りたいと思っています。

解決済

回答 1

投稿

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

前提・実現したいこと

サッカーのアプリを作りたいと思っています。
具体的にはホワイトボードなどで行う戦術分析をアプリで行えるようにしたいです。
アニメーション機能を用いたいと思っています。
ただし、決められた動きをするアニメーションではなく、自分の指で動かした通りに動くアニメーションを作りたいと思っています。わかりにくいかと思います。すみません。
座標を取得してそれを保存し(データベースで?)、再生すれば良いのかと思いますが分かりません。
アニメーションの再生は再生ボタンを押すと再生するようにしたいです。

発生している問題・エラーメッセージ

指で要素を動かすことには成功しました。
しかし、求めているアニメーションが作れません。
### 該当のソースコード
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  </head>
  <style>
      #canvas {
        background: #666;
      }
    </style>
      <table border="0" bgcolor="black"width="100%" height="100%">
         <tr>
                <td class="droppable-elem" align="left" >
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: blue">
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: blue"></div>
                <td class="droppable-elem" align="left" >
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: red">
                <div class="draggable-elem" style="width:30px; height:30px;border-radius:50%;background-color: red"></div>
                </td>

                <td bgcolor="black" align="right">
                <form>
                <INPUT type="button" onClick='history.back();' value="戻る">
                </form>
                </td>
        </tr>
        </table>
      <body onLoad="init()">
        <div id="canvas-container">
        <canvas id="canvas" style="background-color:green;"width="100%" height="100%"></canvas>
        </div>
  <script>
 //画面サイズ
      var theCanvas = document.getElementById('canvas');
function canvas_resize(){
  var windowInnerWidth=window.innerWidth;
  var windowInnerHeight=window.innerHeight;
  theCanvas.setAttribute('width',windowInnerWidth);
  theCanvas.setAttribute('height',windowInnerHeight);
}
window.addEventListener('resize',canvas_resize,false);
canvas_resize();
//サッカーコート
var container = document.getElementById("canvas-container");
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');

//親要素のサイズをCanvasに指定
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;

function init() {

  // オブジェクトを描画
  drawRect();
}

function drawRect() {
    //色を指定する
  context.strokeStyle = 'rgb(255,255,255)'; //枠線の色は白
  context.fillStyle = 'rgb(00,00,255)';

context.strokeRect(canvas.width/2.5, canvas.height/13.5,canvas.width/4.5, canvas.height/18.5);
context.strokeRect(canvas.width/3.65, canvas.height/13.4,canvas.width/2.1, canvas.height/9);
context.strokeRect(canvas.width/2.155, canvas.height/16.5,canvas.width/11, canvas.height/70);
context.strokeRect(canvas.width/11, canvas.height/2.142,canvas.width/1.17, 0);
context.strokeRect(canvas.width/11, canvas.height/13.5,canvas.width/1.17, canvas.height/1.241);
context.strokeRect(canvas.width/3.65, canvas.height/1.3,canvas.width/2.1, canvas.height/9);
context.strokeRect(canvas.width/2.5, canvas.height/1.195,canvas.width/4.5, canvas.height/23);
context.strokeRect(canvas.width/2.155, canvas.height/1.135,canvas.width/11, canvas.height/70);
//円弧
context.beginPath();
context.arc(canvas.width/1.94, canvas.height/5.4,canvas.width/10,Math.PI*1,Math.PI*2,true);
context.stroke();
context.closePath();

context.beginPath();
context.arc(canvas.width/1.94, canvas.height/1.3,canvas.width/10,Math.PI*1,Math.PI*2,false);
context.stroke();
context.closePath();
//円
context.beginPath();
context.arc(canvas.width/1.95, canvas.height/2.13,canvas.width/7,0,Math.PI*2,true);
context.stroke();
context.closePath();
}

//タッチ
        function touchStartEvent(event) {
            // タッチによる画面スクロールを止める
            event.preventDefault();
        }

        function touchMoveEvent(event) {
            event.preventDefault();

            // ドラッグ中のアイテムをカーソルの位置に追従
            var draggedElem = event.target;
            var touch = event.changedTouches[0];
            event.target.style.position = "fixed";
            event.target.style.top = (touch.pageY - window.pageYOffset - draggedElem.offsetHeight / 2) + "px";
            event.target.style.left = (touch.pageX - window.pageXOffset - draggedElem.offsetWidth / 2) + "px";
        }

        function touchEndEvent(event) {
            event.preventDefault();

            // ドロップした位置にあるドロップ可能なエレメントに親子付けする
            var touch = event.changedTouches[0];
            // スクロール分を加味した座標に存在するエレメントを新しい親とする
            var newParentElem = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
            if (newParentElem.className == "droppable-elem") {
                newParentElem.appendChild(droppedElem);
            }
        }

        {
            // ドラッグ可能アイテムへのタッチイベントの設定
            var draggableItems = $(".draggable-elem");
            for (var i = 0; i < draggableItems.length; ++i) {
                var item = draggableItems[i];
                item.addEventListener('touchstart', touchStartEvent, false);
                item.addEventListener('touchmove', touchMoveEvent, false);
                item.addEventListener('touchend', touchEndEvent, false);
            }
        }
    </script>
    </div>
</body>
</html>

ここに言語名を入力
html,javascript,css

試したこと

決められた動きをするアニメーションは作れましたが、求めているものと違うため断念しました。

補足情報(FW/ツールのバージョンなど)

monacaを使ってアプリを作ろうと思っています。
お金がかからないやり方を教えて欲しいです。
よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2019/09/11 16:47

    HTML構文チェックにかけてください。
    それか構文チェックしてくれるエディタ使ってください。
    閉じられてないタグなどそれなりにミスがあります。

    >cssはまだ書き込んでいません。
    htmlにCSSファイルがlinkされていたり、JavaScriptにより操作されていると「ある」と見た人は感じます。

    キャンセル

  • Lhankor_Mhy

    2019/09/11 16:54

    ① touchMoveEventの座標を配列に納める
    ② requestAnimationFrame()でフレームを作って、style.topなどを座標配列のとおりに操作してアニメーションさせる

    という手順でいいかと思いますが、ご不明の点を具体的にご提示いただけますか?

    キャンセル

  • yamagutikaito

    2019/09/12 13:06

    html構文チェックにかけてみます。
    なるほど、1度試してみます。

    キャンセル

回答 1

checkベストアンサー

0

SVG(もしくはcanvas)のアニメーションでどうでしょう?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/09/14 15:05

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

    キャンセル

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

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

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