Removing mousemove

I'm developing an app to help autistic children prepare to learn to write. It's very straight forward. They just need to draw a line straight down. I have it working very similar to "connect the dots" where they start at a green light, progress to yellow and then to red. However, on my webpage using a mouse everything works great because the "dots" are "touched" using the mouseover, like so:

<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 + yD开发者_如何转开发isplacement + 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>

But I'm trying to replace the mousemove so the app can be used on the iphone. I've worked out everything else but triggering the "dots" and although I've looked at all the touchstart/touchmove info I can google, nothing appears to be working. Suggestions? Thanks!