Перетащите движущийся шар вокруг холста - PullRequest
Новая
       21

Перетащите движущийся шар вокруг холста

0 голосов
/ 13 ноября 2018

У меня есть красный шар, который движется по определенному пути, и 2 кнопки, чтобы начать и остановить его движение. Я хочу когда-нибудь остановить шар, затем переместить его в другое положение траектории и снова начать движение. Вот что я делал до сих пор, но мне не удалось это сделать. Мой код работает, и никаких ошибок не появляется, но я не могу перетащить свой мяч в нужную мне позицию. Кто-нибудь знает, что я делаю неправильно или почему это происходит ?? Заранее спасибо !!! 

<!DOCTYPE html>
<html> 
 <head>
    <title> example </title> 

</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <button type='button' id='start'>START</button>
    <button type='button'  id='stop'>STOP</button>
    <br>
    <canvas id="myCanvas" width="1515" height="950" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

</body>
</html>

Сценарий 

<script>
    var canvas = document.getElementById("myCanvas");
    var ctx = canvas.getContext("2d");

    window.requestAnimFrame = (function (callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
        };
    })();

    var dragok = false;

    function MouseDown(e){
        x = e.pageX - canvas.offsetLeft;
        y = e.pageY - canvas.offsetTop;
        dragok = true;
        canvas.onmousemove = MouseMove;
    }

    function MouseUp(e){
        dragok = false;
        canvas.onmousemove = null;
    }

    function MouseMove(e){
        if (dragok){
            x = e.pageX - canvas.offsetLeft;
            y = e.pageY - canvas.offsetTop;
        }
    }

    canvas.onmousedown = MouseDown;
    canvas.onmouseup = MouseUp;

    var pathArray = [];
    pathArray.push({
      x: 140,
      y: 100
    });
    pathArray.push({
      x: 1375,
      y: 100
    });
    pathArray.push({
      x: 1375,
      y: 230
    });
    pathArray.push({
      x: 140,
      y: 230
    });
    pathArray.push({
    x: 140,
    y: 320
    });
    pathArray.push({
      x: 1375,
      y: 320
    });
    pathArray.push({
      x: 1375,
      y: 450
    });
    pathArray.push({
      x: 140,
      y: 450
   });
   pathArray.push({
      x: 140,
      y: 540
   });
   pathArray.push({
      x: 1375,
      y: 540
   });
   pathArray.push({
      x: 1375,
      y: 670
   });
   pathArray.push({
      x: 140,
      y: 670
   });

    var polypoints = makePolyPoints(pathArray, 5);  
    var width = 15;
    var height = 30;
    var speed = 1/2;
    var stopAnimation = true;
    var position = 0; 


    function drawBall(){
        ctx.beginPath();
        ctx.arc(150, 85, 12, 0, 2*Math.PI);
        ctx.fillStyle = "#B22222";
        ctx.fill();
    }

    drawBall();

    // start animation 
    $('#start').on('click',function(){
        stopAnimation = false;
        requestAnimFrame(animate);
    });

    // stop animation 
    $('#stop').on('click',function(){
        stopAnimation = true;
    });

    animate();

    function animate(){
        if(stopAnimation){return;}
        setTimeout(function () {
            requestAnimFrame(animate);
            position += speed;
            if (position> polypoints.length - 1) {
                return;
            }
            var pt = polypoints[position];
            if(pt){
                ctx.save();
                ctx.beginPath();
                ctx.translate(pt.x, pt.y);
                ctx.arc(-width / 2, -height / 2, 12, 0, 2*Math.PI);
                ctx.fillStyle = "#B22222";
                ctx.fill();
                ctx.restore();
            }
        }, 1000 / 60);
    }

    function makePolyPoints(pathArray, speedFactor) {
        var points = [];
        for (var i = 1; i < pathArray.length; i++) {
            var startPt = pathArray[i - 1];
            var endPt = pathArray[i];
            var dx = endPt.x - startPt.x;
            var dy = endPt.y - startPt.y;
            var distance = Math.sqrt(dx*dx+dy*dy)
            var steps = distance/speedFactor
            for (var n = 0; n <= steps; n++) {
                var x = startPt.x + dx * n / steps;
                var y = startPt.y + dy * n / steps;
                points.push({
                x: x,
                y: y
                });
            }
        }
        return (points);
    }


</script>
...