Test drag

by BeNdErR

HTML

<button id="start">Start</button>
<button id="end">End</button>
<br />
<canvas id="canvas" width="600" height="600"></canvas>
<br />
<label for="x-speed">X Speed:</label>
<input id="x-speed" type="text" value="0" />
<br />
<label for="y-speed">Y Speed:</label>
<input id="y-speed" type="text" value="0" />
<br />
<label for="green-mass">Green Mass:</label>
<input id="green-mass" type="text" value="1" />
<br />
<label for="yellow-mass">Yellow Mass:</label>
<input id="yellow-mass" type="text" value="1" />
<br />
<button id="launch">Launch!</button>
<button id="stop">Stop!</button>

JavaScript

(function () {
    function init() {
        var interval;
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        var friction = 0.1;


        var container = {
            x: 0,
            y: 0,
            width: canvas.width,
            height: canvas.height,
            background: "#666699"
        };
        var ball = {
            x: 300,
            y: 300,
            vx: 0,
            vy: 0,
            r: 50,
            color: "#FFFF00",
            border: "#663300",
            mass: 1
        };
        var circle = {
            x: 100,
            y: 100,
            vx: 0,
            vy: 0,
            r: 50,
            color: "#00CC99",
            border: "#00664C",
            mass: 1,
            isClick: false,
            isHold: false,
            isDrag: false,
            prevX: -1,
            prevY: -1,
            stopMove: function () {
                this.prevX = -1;
                this.prevY = -1;
            },
            getSpeed: function (currX, currY) {
                var speed = {
                    x: -1,
                    y: -1
                }
                if (this.prevX > -1 && this.prevY > -1) {
                    speed.x = this.prevX - currX;
                    speed.y = this.prevY - currY;
                    this.prevX = currX;
                    this.prevY = currY;
                } else {
                    this.prevX = currX;
                    this.prevY = currY;
                }
                return speed;
            }
        };

        function drawContainer() {
            context.fillStyle = container.background;
            context.fillRect(container.x, container.y, container.width, container.height);
        }

        function draw() {
            drawContainer();

            //--- drawCircle
            context.fillStyle = circle.color;
            context.strokeStyle = circle.border;
            context.beginPath();
   ...