-2

私は JavaScript の初心者です。1 つのオブジェクト (array[0]) の複数の x 値と y 値を格納する配列を作成し、この値を使用してキャンバス描画オブジェクトの x 座標と y 座標と比較したいと考えています。

たとえば、次のように x と y の値を修正しています: (x : y) 585 : 225 584 : 231 579 : 254 573 : 271 570 : 279 570 : 280

描画オブジェクトの x 座標と y 座標を取得し、上記の値と比較します。x と y の値のグループが 3 つ以上間違っている場合は、間違った答えを表示します。それは可能ですか？ありがとうございました！助けてください...

ここにコーディングがあります：

<!DOCTYPE html>
  <html><head>
    <style>
      #contain {
        width: 500px;
        height: 120px;
        top : 15px;
        margin: 0 auto;
        position: relative;    
        }
   </style>
  <script>
var touchList = [];
var plates = [];
    var currentPlates;
    var currentIndex = 0;
    var canvas;
    var ctx;
    var lastPt=null;
    var letsdraw = false;
    var offX = 440, offY = 25;


function init() {
    var touchzone = document.getElementById("layer1");
    touchzone.addEventListener("touchmove", draw, false);
    touchzone.addEventListener("touchend", end, false);
    ctx = touchzone.getContext("2d");
  }

  function draw(e) {
    e.preventDefault();
var selectedCoordinate = new Object();
selectedCoordinate.x = e.touches[0].pageX;
selectedCoordinate.y = e.touches[0].pageY;
touchList.push(selectedCoordinate);
console.log("X: " + e.touches[0].pageX + " Y: " + e.touches[0].pageY);

    if (lastPt != null) {
    ctx.beginPath();
    ctx.moveTo(lastPt.x, lastPt.y);
    ctx.lineTo(e.touches[0].pageX - offX,
             e.touches[0].pageY - offY);
    ctx.stroke();
      }
    lastPt = {
       x: e.touches[0].pageX - offX,
       y: e.touches[0].pageY - offY
       };
     }

 function end(e) {
 for(var i=0; i<touchList.length; i++)
    console.log(touchList[i].x + " : " + touchList[i].y);
var touchzone = document.getElementById("layer1");
e.preventDefault();
    //Terminate touch path
    lastPt = null;
  }

function clear_canvas_width ()
  {

        var s = document.getElementById ("layer1");
        var w = s.width;
        s.width = 10;
        s.width = w;
  }

    function initPlates() {
        plates[0] = new Plates(1, 568, 262);

      generateQuestion(isEasy);

        for(var i=0; i<currentPlates.length; i++) {
            console.log("Index: " + i + " value: " + currentPlates[i].index);   
        }
    }

    function Plates(index, correct, deficient) {
        this.index = index;            
        this.correct = correct;
        this.deficient = deficient;
    }

    Plates.prototype.checkAnswer = function(answer) {
        console.log("Checking user answer: " + answer);
        this.userAnswer = answer;
        if(answer == this.correct)
            this.result = "Correct";
        else
            this.result = "Wrong";
        }
    </script>    
  </head>

 <body onload="init()">

    <div id="contain">

     <canvas id="layer1" width="450" height="440" style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"></canvas> 
    </div>

     </body>
   </html>
4

1 に答える 1

3

多次元配列の代わりにオブジェクトを格納しようとすることができます。

var coords=new Array(); 

coords.push({x:584,y:225});
coords.push({x:588,y:222});

var xcoord =coords[0].x;
var ycoord =coords[0].y;
于 2013-10-29T08:57:29.113 に答える