座標を配列に納めたい

前提・実現したいこと

touchMoveEventの座標を配列に納めたいのですがやり方が分からず苦戦しています。
どうすればいいのでしょうか。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, height=device-height"> <link rel="stylesheet" href="css/style.css"> <script src="https://code.jquery.com/jquery-1.10.2.js"></script> </head> <style> .draggable-elem{ width:30px; height:30px; border-radius:50%; background-color:blue; } .draggable-elem2{ width:30px; height:30px; border-radius:50%; background-color:red; } </style> <body onLoad="init()"> <div id="canvas-container"> <canvas id="canvas" style="background-color:green;"width="100%" height="100%"></canvas> <div class="draggable-elem"> <div class="draggable-elem"> <div class="draggable-elem"> <div class="draggable-elem"></div> <script> //画面サイズ var theCanvas = document.getElementById('canvas'); function canvas_resize(){ var windowInnerWidth=window.innerWidth; var windowInnerHeight=window.innerHeight/1.2; 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";

}
// ドラッグ可能アイテムへのタッチイベントの設定
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);
}
// ドラッグ可能アイテムへのタッチイベントの設定
var draggableItems = $(".draggable-elem2");
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>

</body> </html>

試したこと

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

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

こういうことでしょうか？
ただ少し動かしただけでも位置情報を配列に格納するので、配列の長さは結構長くなります。

var positionAry = [];  /* グローバル変数として宣言 */


function touchMoveEvent(event) {
  ...
  
  /* ここから */
  var positionMap = {};
  positionMap.x = event.target.offsetLeft;  // 左から何pxか
  positionMap.y = event.target.offsetTop;   // 上から何pxか

  positionAry.push(positionMap);

  ...
}

投稿2019/09/13 07:41