Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 10.07.2016, 19:36   #1
JohnBigHead
Пользователь
 
Регистрация: 01.09.2015
Сообщений: 11
По умолчанию не получается задать движение второму кругу canvas

не получается перемещать второй круг
<canvas id="canvas" width="400" height="300"></canvas>
Код:
var Point = function (x, y) {
        this.x = x;
        this.y = y;
        return this;
    }
    var Circle = function (point, radius) {
        this.point = point;
        this.radius = radius;
        this.isInside = function (pt) {
            return Math.pow(pt.x - point.x, 2) + Math.pow(pt.y - point.y, 2) < Math.pow(radius, 2); 
        };
        return this;
    }

    var element;
    var circle = new Circle(new Point(15, 15), 10);
    var circle2 = new Circle(new Point(25, 25), 10);
    var deltaCenter = null

    var drawCollection = [circle, circle2];
    function Draw(){
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawCollection.forEach(function(item){
            drawCircle(item);
        });
    }
    
    window.onload = function() {
        Draw();
        element = document.getElementById('canvas');
        element.addEventListener('mousedown', startDragging, false);
        element.addEventListener('mousemove', drag, false);
        element.addEventListener('mouseup', stopDragging, false);
        element.addEventListener('mouseout', stopDragging, false);
    }
    
    function startDragging(e) {
        var p = new Point(mouseX(e), mouseY(e));
        if(circle.isInside(p)) {
            deltaCenter = new Point(p.x - circle.point.x, p.y - circle.point.y);
        }
    }
    
    function drag(e) {
        if(deltaCenter != null) {
            circle.point.x = (mouseX(e) - deltaCenter.x);
            circle.point.y = (mouseY(e) - deltaCenter.y);   
            Draw();
        }
    }
    cnt=0
    function stopDragging(e) {
        deltaCenter = null;
    }
    
    function mouseX(e) {
        return e.clientX - element.offsetLeft;
    }
    
    function mouseY(e) {
        return e.clientY - element.offsetTop;
    }
    
    function drawCircle(circle) {
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
    	ctx.fillStyle = "red";
        ctx.arc(circle.point.x, circle.point.y, circle.radius, 0, Math.PI*2, true);
        ctx.fill();
    	ctx.fillStyle = "green";
        ctx.arc(circle2.point.x, circle2.point.y, circle2.radius, 0, Math.PI*2, true);
        ctx.fill();
    }
JohnBigHead вне форума Ответить с цитированием
Старый 10.07.2016, 21:19   #2
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Потому что ты в функции все время перемещаеш circle.point.x

а circle2.point.x нет

Код:
    function drag(e) {
        if(deltaCenter != null) {
            circle.point.x = (mouseX(e) - deltaCenter.x);
            circle.point.y = (mouseY(e) - deltaCenter.y);   
            Draw();
        }
    }
Вот попробуй так. И еще, нет смыслка каждый раз делать так в каждом методе:
Одного раза хватает, если переменная была объявлена все функции/метода.

Код:
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
Вот полный пример
Код:
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title></title>
    <meta charset="utf-8">

    <script type="text/javascript">
    var canvas;
    var ctx;
    var CURRENT_CIRCLE = null;

    window.addEventListener("load", function() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        
        canvas.addEventListener('mousedown', startDragging, false);
        canvas.addEventListener('mousemove', drag, false);
        canvas.addEventListener('mouseup', stopDragging, false);
        canvas.addEventListener('mouseout', stopDragging, false);

        Draw();
    });
    
    var Point = function (x, y) {
        this.x = x;
        this.y = y;
        return this;
    }

    var Circle = function (point, radius) {
        this.point = point;
        this.radius = radius;
        this.isInside = function (pt) {
            return Math.pow(pt.x - point.x, 2) + Math.pow(pt.y - point.y, 2) < Math.pow(radius, 2); 
        };

        return this;
    }

    var circle_1 = new Circle(new Point(50, 50), 10);
    var circle_2 = new Circle(new Point(100, 100), 10);

    var deltaCenter = null

    var drawCollection = [ circle_1, circle_2];

    function Draw(){
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawCollection.forEach(function(item){
            drawCircle(item);
        });
    }

    function startDragging(e) {
        var p = new Point(mouseX(e), mouseY(e));
        if(circle_1.isInside(p)) {
            deltaCenter = new Point(p.x - circle_1.point.x, p.y - circle_1.point.y);
            CURRENT_CIRCLE = circle_1;

        }else if(circle_2.isInside(p)){
            deltaCenter = new Point(p.x - circle_2.point.x, p.y - circle_2.point.y);
            CURRENT_CIRCLE = circle_2;

        }else{
            CURRENT_CIRCLE = null;
        }

    }

    function drag(e) {
        if(deltaCenter != null && CURRENT_CIRCLE != null) {
            CURRENT_CIRCLE.point.x = (mouseX(e) - deltaCenter.x);
            CURRENT_CIRCLE.point.y = (mouseY(e) - deltaCenter.y);   
            Draw();
        }
    }

    function stopDragging(e) {
        deltaCenter = null;
    }

    function mouseX(e) {
        return e.clientX - canvas.offsetLeft;
    }

    function mouseY(e) {
        return e.clientY - canvas.offsetTop;
    }

    function drawCircle(circle) {

        ctx.beginPath();

        ctx.fillStyle = "red";
        ctx.arc( circle_1.point.x, circle_1.point.y, circle_1.radius, 0, Math.PI*2, true);
        ctx.fill();

        ctx.fillStyle = "green";
        ctx.arc( circle_2.point.x, circle_2.point.y, circle_2.radius, 0, Math.PI*2, true);
        ctx.fill();

    }

</script>

</head>
<body>

<canvas id="canvas" width="400" height="300" style="border: solid 2px #000;"></canvas>

</body>
</html>
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/

Последний раз редактировалось pompiduskus; 10.07.2016 в 21:22.
pompiduskus вне форума Ответить с цитированием
Старый 10.07.2016, 23:40   #3
JohnBigHead
Пользователь
 
Регистрация: 01.09.2015
Сообщений: 11
По умолчанию

Цитата:
pompiduskus
неподскажите как поправить?
http://codepen.io/JohnBigHead/pen/WxkKov?editors=1010

Последний раз редактировалось JohnBigHead; 11.07.2016 в 12:14.
JohnBigHead вне форума Ответить с цитированием
Старый 11.07.2016, 01:42   #4
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Сделатьто можно, но тут уже совершенно другой подход нужен.

Получается уже смысл как у простой игрушки.

Нужен главный цикл, который будет выполняться, 30 раз в секунду, к примеру.

И если позиция круга + его диаметр больше чем отступ у этого блока, то принудительно раканчивать drag&drop и запускать мат. просчет подения этого круга.

Я могу написать простой пример. Но все я писать не буду.
Идет ? А дальше если что не понятно просто, сюда пишите
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Старый 11.07.2016, 09:57   #5
JohnBigHead
Пользователь
 
Регистрация: 01.09.2015
Сообщений: 11
По умолчанию

идёт)оформите пример)

Последний раз редактировалось JohnBigHead; 11.07.2016 в 10:30.
JohnBigHead вне форума Ответить с цитированием
Старый 11.07.2016, 11:30   #6
pompiduskus
юзер как все
Участник клуба
 
Аватар для pompiduskus
 
Регистрация: 10.01.2012
Сообщений: 1,586
По умолчанию

Вот тут можно живой пример глянть. Но ка кя сказал, это просто пример.
Так писать не нужно.
У меня вообще нет порядка в коде, много не нужных тклодвижений.

http://ch3ll0v3k.0fees.us/public/js/...collision.html


Код:
<!DOCTYPE html>
<html lang="en-US">
<head>
    <title></title>
    <meta charset="utf-8">

    <script type="text/javascript">

    // ================================================================
    var CURRENT_CIRCLE = null;
    var deltaCenter = null;
    var canvas, ctx;
    var circle_1, circle_2;
    var drawCollection;
    var SIZE = { "W": 700, "H": 400 };
    var rect = {};

    var OBJECT_COLLIDET = false;


    // ================================================================
    var MAIN_LOOP_TIMER;
    var MAIN_LOOP_FPS = 1000/30; // 30 FPS
    var MAIN_LOOP_ALLOW_RUN = true;

    function MAIN_LOOP(){

        // -----------------------------------
        clearTimeout(MAIN_LOOP_TIMER);
        // -----------------------------------
        try{

            if( OBJECT_COLLIDET ){
                
                if ( (CURRENT_CIRCLE.point.y + CURRENT_CIRCLE.radius) < SIZE.H){

                    CURRENT_CIRCLE.point.y *=1.06;
                    CURRENT_CIRCLE.point.x /=1.02;

                }else{
                    CURRENT_CIRCLE.point.y = SIZE.H - CURRENT_CIRCLE.radius/2
                    OBJECT_COLLIDET = false;
                }

            }

        }catch(e){
            console.log(e)
        }

        Draw();
        // -----------------------------------
        if(MAIN_LOOP_ALLOW_RUN){ 
            // можно юзать setInterval();
            MAIN_LOOP_TIMER = setTimeout( function(){ 
                MAIN_LOOP(); 

            }, MAIN_LOOP_FPS );
        }

        // -----------------------------------
    }

    // ================================================================
    var Point = function (x, y) {
        this.x = x;
        this.y = y;
        return this;
    }

    // ================================================================
    var Circle = function (point, radius) {
        this.point = point;
        this.radius = radius;
        this.isInside = function (pt) {
            return Math.pow(pt.x - point.x, 2) + Math.pow(pt.y - point.y, 2) < Math.pow(radius, 2); 
        };

        return this;
    }

    // ================================================================
    circle_1 = new Circle(new Point(50, 50), 10);
    circle_2 = new Circle(new Point(100, 100), 10);

    rect = { 
        "ML" : 450, "MT" : 0, "W" : 50, "H" : 400
    };

    drawCollection = [ circle_1, circle_2];

    function Draw(){

        ctx.clearRect(0, 0, canvas.width, canvas.height);

        
        // layer 0
        ctx.beginPath();
        ctx.lineWidth="4";
        ctx.strokeStyle="#000";
        ctx.rect( rect.ML, rect.MT, rect.W, rect.H );
        ctx.stroke();
        
        // layer 1
        drawCollection.forEach(function(item){
            drawCircle(item);
        });

    }
    
    // ================================================================
    function startDragging(e) {
        var p = new Point(mouseX(e), mouseY(e));
        if(circle_1.isInside(p)) {
            deltaCenter = new Point(p.x - circle_1.point.x, p.y - circle_1.point.y);
            
            if( CURRENT_CIRCLE == circle_1 ) OBJECT_COLLIDET = false;
            CURRENT_CIRCLE = circle_1;

        }else if(circle_2.isInside(p)){
            deltaCenter = new Point(p.x - circle_2.point.x, p.y - circle_2.point.y);

            if( CURRENT_CIRCLE == circle_2 ) OBJECT_COLLIDET = false;

            CURRENT_CIRCLE = circle_2;

        }else{
            CURRENT_CIRCLE = null;
        }

    }

    // ================================================================
    function drawCircle(circle) {

        ctx.beginPath();
        ctx.lineWidth="2";
        ctx.strokeStyle="#F00";
        ctx.arc( circle_1.point.x, circle_1.point.y, circle_1.radius, 0, Math.PI*2, true);
        ctx.stroke();

        ctx.beginPath();
        ctx.lineWidth="2";
        ctx.strokeStyle="#0F0";
        ctx.arc( circle_2.point.x, circle_2.point.y, circle_2.radius, 0, Math.PI*2, true);
        ctx.stroke();

    }

    // ================================================================
    function drag(e) {
        if(deltaCenter != null && CURRENT_CIRCLE != null) {

            CURRENT_CIRCLE.point.x = (mouseX(e) - deltaCenter.x);
            CURRENT_CIRCLE.point.y = (mouseY(e) - deltaCenter.y);   
            Draw();

            if( CURRENT_CIRCLE.point.x > rect.ML ){
                deltaCenter = null;
                OBJECT_COLLIDET = true;
            }
        }
    }

    function stopDragging(e) { deltaCenter = null; }
    function mouseX(e) { return e.clientX - canvas.offsetLeft; }
    function mouseY(e) { return e.clientY - canvas.offsetTop; }

    // ================================================================
    window.addEventListener("load", function() {
        canvas = document.getElementById('canvas');
        ctx = canvas.getContext('2d');
        
        canvas.addEventListener('mousedown', startDragging, false);
        canvas.addEventListener('mousemove', drag, false);
        canvas.addEventListener('mouseup', stopDragging, false);
        canvas.addEventListener('mouseout', stopDragging, false);

        Draw();
        MAIN_LOOP();
    });

    // ================================================================

</script>

</head>
<body>

    <canvas id="canvas" width="700" height="400" style="border: solid 1px #000;"></canvas>

</body>
</html>
<Дзен - Вся вселенная в тебе > | Резюме: https://ch3ll0v3k.github.io/CV/
pompiduskus вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
паскаль, движение по кругу. sergiyparis Паскаль, Turbo Pascal, PascalABC.NET 4 23.10.2013 20:12
Движение по кругу Максим 116 C# (си шарп) 6 17.10.2013 17:50
движение по кругу SAMOUCHKA Gamedev - cоздание игр: Unity, OpenGL, DirectX 4 10.11.2011 10:25
Движение объекта по кругу Roberto Помощь студентам 2 06.05.2008 15:44