Javascript 当区域被触摸时，循环动画

我尝试创建一个动画，其中一个圆被触摸事件移动：

function initi() {
    console.log('init');
    // Get a reference to our touch-sensitive element
    var touchzone = document.getElementById("myCanvas");
    // Add an event handler for the touchstart event
    touchzone.addEventListener("mousedown", startTouch, false);
    // You need mouseup to capture the stop event                           
    touchzone.addEventListener("mouseup", stopTouch, false);
}

function startTouch(event) {
    // You can access the event here too..
    // But for demo I will only get the current Time

    startTime = new Date().getTime();
}

function stopTouch(event) {
    // Get a reference to our coordinates div
    var can = document.getElementById("myCanvas");
    // Write the coordinates of the touch to the div



    if (event.pageX < x * 100 && event.pageY > y * 10) {
        // Calculate the duration, only if needed
        var duration = new Date().getTime() - startTime;

        bally -= 0.005 * duration; // use duration

        }
    else if ( event.pageX > x * 100)    {

    }


    // I hope bally if defined in the outer scope somewhere ;)                     
    console.log(event, x, bally);
    draw();
}

函数initi（）{
console.log（'init'）；
//参考我们的触控元件
var touchzone=document.getElementById（“myCanvas”）；
//为touchstart事件添加事件处理程序
touchzone.addEventListener（“mousedown”，startTouch，false）；
//您需要鼠标悬停来捕获停止事件
touchzone.addEventListener（“mouseup”，stopTouch，false）；
}
功能启动触摸（事件）{
//您也可以在此处访问该活动。。
//但对于演示，我将只获取当前时间
startTime=新日期（）.getTime（）；
}
功能停止触摸（事件）{
//获取坐标div的引用
var can=document.getElementById（“myCanvas”）；
//将触摸的坐标写入div
如果（event.pageXy*10）{
//仅在需要时计算持续时间
var duration=new Date（）.getTime（）-startTime；
bally-=0.005*持续时间；//使用持续时间
}
否则如果（event.pageX>x*100）{
}
//我希望巴利，如果在某个外部范围内定义；）
console.log（事件，x，bally）；
draw（）；
}

所以我的问题是当这个区域：

event.pageXy*10

在

bally-=0.005*持续时间后被触摸时，我如何使bally变小执行？我尝试用数组来保存它，如果它被触动了，然后给它更新功能，我知道本地存储和cookies也可以工作，但我认为这不是最好的解决方案。有什么提示可以让你意识到这一点吗

看