Удаление мышиного хода

Question

Я разрабатываю приложение, чтобы помочь аутичным детям готовиться учиться писать.Это очень прямо вперед.Им просто нужно провести линию прямо вниз.У меня это работает очень похоже на «соединение точек», где они начинаются с зеленого света, переходят к желтому, а затем к красному.Однако на моей веб-странице с помощью мыши все работает отлично, потому что «точки» «касаются» с помощью наведения мыши, например:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>


<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.jplayer.min.js" type="text/javascript"></script>
<script type="text/javascript">


    $(function() {
        var dots = [13, 15, 13, 25, 13, 55, -1, -1,
                    45, 15, 45, 40, -1, -1,
                    70, 15, 70, 40, -1, -1, 
                    80, 15, 80, 40, 80, 60, -1, -1];

        function contains(arr, value) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == value) {
                    return true;
                }
            }
            return false;
        }
        function getRandomPoints(totalPoints) {
            var indexes = new Array();
            for (var i = 0; i < totalPoints; i++) {
                var done = false;
                while (!done) {
                    var index = Math.floor(Math.random() * dots.length);
                    if (index % 2 != 0) {
                        index++;
                        if (index > dots.length) {
                            continue;
                        }
                    }

                    if (!contains(indexes, index)) {
                        indexes.push(index);
                        done = true;
                    }
                }
            }

            return indexes.sort(function(a, b) {
                return a - b;
            });
        }
        function displayGrid(ctx) {
            var gridSize = 20, width = 900;
            for (var ypos = 0; ypos < width; ypos += gridSize) {
                ctx.moveTo(0, ypos);
                ctx.lineTo(width, ypos);
            }
            for (var xpos = 0; xpos < width; xpos += gridSize) {
                ctx.moveTo(xpos, 0);
                ctx.lineTo(xpos, width);
            }

            ctx.strokeStyle = "#eee";
            ctx.lineWidth = .7;
            ctx.stroke();
        }
        function addPoint(index, x1, y1) {
            for (var i = 0; i < points.length; i++) {
                var x2 = points[i].x, y2 = points[i].y;
                var d1 = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
                var d2 = radius * 2 + 2;
                if (d2 > d1) {
                    return false;
                }
            }

            points.push({ 'x': x1, 'y': y1, 'index': index });
            return true;
        }

        //Initialization....
        var $graph = $('#graph'), gpos = $graph.position();
        var $timer = $('#timer');
        var points = new Array();
        var ctx = $graph.get(0).getContext("2d");

        //Parameters...
        var indexes = getRandomPoints(7), ratio = 3, hops = 0, point = 0, maxTotalHops = 60, radius = 12;
        var lineWidth = 11.5;
        var xDisplacement = 0, yDisplacement = 0;
        var borderColor = 'rgb(0,102,204)';



        //Display the character's fixed lines...
        ctx.beginPath();
        ctx.translate(xDisplacement, yDisplacement);
        ctx.lineWidth = lineWidth;

        for (var i = 0; i < dots.length; i += 2) {
            var newLine = dots[i] == -1;
            if (newLine) {
                i += 2;
            }

            var x = ratio * dots[i], y = ratio * dots[i + 1];
            if (hops == 0 && contains(indexes, i)) {
                hops++;
                ctx.moveTo(x, y);
                continue;
            }

            if (newLine || i == 0) {
                ctx.moveTo(x, y);
            }
            else {
                if (hops == 0) {
                    ctx.lineTo(x, y);
                }
                else {
                    ctx.strokeStyle = borderColor;
                    ctx.stroke();
                    ctx.beginPath();

                    if (addPoint(i, x, y)) {
                        var cx = gpos.left + xDisplacement - radius + 1 + x;
                        var cy = gpos.top + yDisplacement - radius + 1 + y;
                        $('<span></span>')
                            .addClass('circle')
                            .html(++point)
                            .data('pos', { 'x': cx, 'y': cy })
                            .css({ 'top': 0, 'left': 0 })
                            .insertAfter($graph);
                    }
                }
            }

            if (hops > maxTotalHops) {
                hops = 0;
            }
            else if (hops > 0) {
                hops++;
            }
        }

        ctx.strokeStyle = borderColor;
        ctx.stroke();




        //Create and initialize hotspots...
        var passed = 0;
        $('.circle').each(function() {
            var pos = $(this).data('pos');
            $(this).animate({
                left: pos.x,
                top: pos.y
            }, 700);
        }).mousemove(function() {  // <====================== this part
            var index = parseInt($(this).text());
            if (passed != index - 1) {
                return;
            }

            $(this).css({
                'color': '#c00',
                'font-weight': 'bold'
            }).animate({
                left: 0,
                top: 0,
                opacity: 0
            }, 1000);

            ctx.beginPath();

            var start, end, done = passed + 1 == points.length;
            if (done) /*The entire hotspots are detected...*/{
                start = 0;
                end = dots.length - 2;
                clearInterval(tid);

                $timer.html('Well done, it took ' + $timer.html() + ' seconds!').animate({
                    left: gpos.left + $graph.width() - $timer.width() - 20
                }, 1000);
            }
            else {
                start = passed == 0 ? points[passed].index - 4 : points[passed - 1].index;
                end = points[passed].index;
            }

            for (var i = start; i <= end; i += 2) {
                var newLine = dots[i] == -1;
                if (newLine) {
                    i += 2;
                }

                var x = ratio * dots[i], y = ratio * dots[i + 1];
                if (newLine || i == start) {
                    ctx.moveTo(x, y);
                }
                else {
                    ctx.lineTo(x, y);
                }
            }

            ctx.lineWidth = lineWidth;
            ctx.strokeStyle = borderColor;
            ctx.stroke();

            if (done) {
                $('.filled').css({
                    left: gpos.left + xDisplacement + 10,
                    top: gpos.top + yDisplacement + 150
                }).fadeIn('slow');
            }

            passed++;
        });

        //Initialize timer...
        $timer.css({
            top: gpos.top + 10,
            left: gpos.left + 10
        });
        var timer = 0, tid = setInterval(function() {
            timer += 30 / 1000;
            $timer.html(timer.toFixed(2));
        }, 30);
    });



</script>

<style type="text/css">
    .circle {
        background: url('start.png');
        width: 24px;
        height: 24px;
        text-align: center;
        font-size: .8em;
        line-height: 24px;
        display: block;
        position: absolute;
        cursor: pointer;
        color: #333;
        z-index: 100;
    }
    .filled {
        background: url('train.gif');
        position: absolute;
        width: 172px;
        height: 251px;
        display: none;
    }
    #timer {
        position: absolute;
        font-family: Arial;
        font-weight: bold;
        font-size: 1em;
        background: #c00;
        color: #fff;
        padding: 5px;
        text-align: center;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        font-variant: small-caps;
    }
    #graph {
        background: url('vlinesbackground.jpg');
        left: 5px;
        top: 20px;
        position: relative;
        border: 1px dotted #ddd;
    }

</style>

Но япытаюсь заменить перемещение мыши, чтобы приложение можно было использовать на iphone.Я разработал все остальное, кроме вызова «точек», и хотя я посмотрел всю информацию о Touchstart / TouchMove, которую я могу погуглить, похоже, ничего не работает.Предложения?Спасибо!