JavaScript-mechanics — различия между версиями

function MainMech(canvas) {
    var context = canvas.getContext("2d");
    var w = canvas.width;
    var h = canvas.height;

    const g0 = 1;                     // масштаб ускорения
    const r0 = h;                     // масштаб длины - высота окна
    const t0 = Math.sqrt(2*r0/g0);    // масштаб времени - за сколько времени шар пролетит весь экран по вертикали
    const v0 = g0*t0;                 // масштаб скорости - скорость в нижней точке экрана

    const r = r0  / 40;               // радиус шара
    const g = g0;                     // 9.8 px, а не метров
    const dt = t0* 0.08;              // шаг интегрирования

    var count = true;                 // проводить ли расчет системы

    // создаем объект, связанный с элементом canvas на html странице
    var ocanvas = oCanvas.create({
        canvas: "#canvasMech",        // canvasMech - id объекта canvas на html странице
        fps: 60                       // сколько кадров в секунду
    });

    // создаем шар
    var arc = ocanvas.display.arc({
        x: 4*r,
        y: r0/2,
        radius: r,
        end: 360,                     // круг 360 градусов
        fill: "rgba(0, 0, 255, 1)"    // цвет
    }).add();

    // захват шара мышью
    var m0x = 0;    var m0y = 0;      // предыдущая позиция мыши
    var mx = 0;     var my = 0;       // актуальная позиция мыши
    arc.dragAndDrop({
        changeZindex: true,           // если много шариков - захваченный будет нарисован спереди
        start: function ()  {
            count = false;            // на время захвата - отключить расчет
            this.fill = "rgba(0, 0, 255, 0.5)";     // пока держим шарик - он полупрозрачен
            m0x = 0;    m0y = 0;
            mx = 0;     my = 0;
        },
        move: function ()  {
            m0x = mx;   m0y = my;
            mx = ocanvas.mouse.x;
            my = ocanvas.mouse.y;
        },
        end: function ()    {
            count = true;
            this.fill = "rgba(0, 0, 255, 1)";       // отпускаем шарик - полупрозрачность убирается
            // толкаем шарик по направлению движения мыши
            vx = (mx-m0x)*2/dt;
            vy = (my-m0y)*2/dt;
        }
    });
    ocanvas.bind("mousedown", function () {count = false;});    // заморозить фигуру при клике на поле

    var wx = 0;            var wy = g;              // ускорение
    var vx = 0;             var vy = 0;             // скорость
    function physics(){                             // то, что происходит каждый шаг времени
        if (!count) return;

        vx += wx*dt;       vy += wy*dt;
        var dx = vx*dt;     var dy = vy*dt;
        arc.x += dx;        arc.y += dy;

        // проверка граничных условий
        if (arc.y + r > r0) {           // нижняя граница (ось "y" направлена вниз)
            arc.y = r0-r;
            vy = -vy;
        }
        if (arc.y - r < 0) {            // верхняя граница
            arc.y = r;
            vy = -vy;
        }

        if (arc.x + r > w) {            // правая граница
            arc.x = w-r;
            vx = -vx;
        }
        if (arc.x - r + dx < 0) {       // левая граница
            arc.x = r;
            vx = -vx;
        }
    }
    ocanvas.setLoop(physics).start();   // функция, выполняющаяся на каждом шаге
}