Javascript и Canvas "движок", который нуждается в обнаружении столкновений - PullRequest
Новая
       18

Javascript и Canvas "движок", который нуждается в обнаружении столкновений

1 голос
/ 21 мая 2011

Итак, у меня есть небольшой движок "двигаться и набивать", который на данный момент очень примитивен.

Время от времени (на основе таймера) на экране появляется другой пиксель (5x5) - если вы пересекаете этот пиксель, я бы хотел запустить событие. (Чтобы быть справедливым, этот пиксель (5x5) должен быть намного больше: /).

Итак, вот мой JSFiddle (для вас, скрипачи): http://jsfiddle.net/neuroflux/q9APG/

А вот мой javascript для холста: 

var canvas, ctx;
var pixX = 0; //positions
var pixY = 0;
var endX = 0;
var endY = 0;
var youX = 5; //sizes
var youY = 5;
var dis = 1; //timings
var p = 0;

window.onload = function() {
    init();
}

function init() {
    canvas = document.getElementById('main');
    ctx = canvas.getContext('2d');
    setInterval(loop,40);
    var pixTimer = Math.floor((Math.random() * 1000) * 10) + 1;
    setInterval(addPixel, pixTimer);
    document.addEventListener('keydown',function(e) {
        runMove(e);
    });
}

function addPixel() {
    pX = Math.floor(Math.random() * 800) + 1;
    pY = Math.floor(Math.random() * 600) + 1;
    p++;
}

function loop() {
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillRect(pixX,pixY,youX,youY);
    ctx.fillText(pixX + ':' + pixY, 5, 500);
    if (p > 0) {
        for (var a = 0; a <= p; a++) {
            ctx.fillRect(pX,pY,5,5);
        }
    }
}

function runMove(e) {
    var canvas = document.getElementById('main');
    ky = e.keyCode;
    switch(ky) {
        case 37:
            endX = endX - dis;
            if (pixX == endX) {

            } else {
                if (pixX >= 0 && pixX < canvas.width) {
                    moveleft = setInterval(ml,10);
                    function ml() { pixX--; }
                } else {
                    pixX = 0;
                }
            }
            return false;
        case 38:
            endY = endY - dis;
            if (pixY == endY) {

            } else {
                if (pixY >= 0 && pixY < canvas.height) {
                    moveup = setInterval(mu,10);
                    function mu() { pixY--; }
                }
            }
            return false;
        case 39:
            endX = endX + dis;
            if (pixX == endX) {

            } else {
                if (pixX >= 0 && pixX < canvas.width) {
                    moveright = setInterval(mr,10);
                    function mr() { pixX++; }
                }
            }
            return false;
        case 40:
            endY = endY + dis;
            if (pixY == endY) {

            } else {
                if (pixY >= 0 && pixY < canvas.height) {
                    movedown = setInterval(md,10);
                    function md() { pixY++; }
                }
            }
            return false;
        case 80:
            growing = setInterval(grow,100);
            clearInterval(shrinking);
            function grow() {
                youX = youX + dis;
                youY = youY + dis;
            }
            return false;
        case 73:
            clearInterval(shrinking);
            clearInterval(growing);
            return false;
        case 79:
            shrinking = setInterval(shrink,100);
            clearInterval(growing);
            function shrink() {
                youX = youX - dis;
                youY = youY - dis;
            }
            return false;
        default:
            return false;
    }
}

Я уже пробовал это, но получил проблемы :( (ничего не будет срабатывать): JSFiddle: http://jsfiddle.net/neuroflux/uF5kj/

код холста: 

    var canvas, ctx;
        var pixX = 0; //positions
        var pixY = 0;
        var endX = 0;
        var endY = 0;
        var youX = 5; //sizes
        var youY = 5;
        var dis = 1; //timings
        var p = 0;
        var pixel = new Array();

        window.onload = function() {
            init();
        }

        function init() {
            canvas = document.getElementById('main');
            ctx = canvas.getContext('2d');
            setInterval(loop,40);
            var pixTimer = Math.floor((Math.random() * 1000) * 10) + 1;
            setInterval(addPixel, pixTimer);
            document.addEventListener('keydown',function(e) {
                runMove(e);
            });
        }

        function addPixel() {
            pX = Math.floor(Math.random() * 800) + 1;
            pY = Math.floor(Math.random() * 600) + 1;
            p++;
        }

        function loop() {
            ctx.clearRect(0,0,canvas.width,canvas.height);
            var bgImg = new Image();
            bgImg.src = 'bg.png';
                ctx.drawImage(bgImg,0,0,800,600);
            ctx.fillRect(pixX,pixY,youX,youY);
            ctx.fillText(pixX + ':' + pixY, 5, 500);
            if (p > 0) {
                for (var a = 0; a <= p; a++) {
                    pixel[a] = ctx.fillRect(pX,pY,5,5);
                }
            }
        }

        function checkIntersections() {
            for (var x = 0; x < pixel.length; x++) {
                    if (pixX == pixel[x].x) { alert(0) }
            }
        }

        function runMove(e) {
            var canvas = document.getElementById('main');
            ky = e.keyCode;
            switch(ky) {
                case 37:
                    endX = endX - dis;
                    if (pixX == endX) {

                    } else {
                        if (pixX >= 0 && pixX < canvas.width) {
                            moveleft = setInterval(ml,10);
                            function ml() { pixX--; }
                        } else {
                            pixX = 0;
                        }
                    }
                    return false;
                case 38:
                    endY = endY - dis;
                    if (pixY == endY) {

                    } else {
                        if (pixY >= 0 && pixY < canvas.height) {
                            moveup = setInterval(mu,10);
                            function mu() { pixY--; }
                        }
                    }
                    checkIntersections();
                    return false;
                case 39:
                    endX = endX + dis;
                    if (pixX == endX) {

                    } else {
                        if (pixX >= 0 && pixX < canvas.width) {
                            moveright = setInterval(mr,10);
                            function mr() { pixX++; }
                        }
                    }
                    checkIntersections();
                    return false;
                case 40:
                    endY = endY + dis;
                    if (pixY == endY) {

                    } else {
                        if (pixY >= 0 && pixY < canvas.height) {
                            movedown = setInterval(md,10);
                            function md() { pixY++; }
                        }
                    }
                    checkIntersections();
                    return false;
                case 80:
                    growing = setInterval(grow,100);
                    clearInterval(shrinking);
                    function grow() {
                        youX = youX + dis;
                        youY = youY + dis;
                    }
                    checkIntersections();
                    return false;
                case 73:
                    clearInterval(shrinking);
                    clearInterval(growing);
                    return false;
                case 79:
                    shrinking = setInterval(shrink,100);
                    clearInterval(growing);
                    function shrink() {
                        youX = youX - dis;
                        youY = youY - dis;
                    }
                    return false;
                default:
                    return false;
            }
        }

Ответы [ 2 ]

5 голосов
/ 22 мая 2011

Подождите, так что все, что вам нужно, это функция, чтобы увидеть, пересекаются ли два прямоугольника?

Вот пуленепробиваемая функция для вас: 

// returns true if there is any overlap
// params: x,y,w,h of two rectangles
function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
  if (w2 !== Infinity && w1 !== Infinity) {
    w2 += x2;
    w1 += x1;
    if (isNaN(w1) || isNaN(w2) || x2 > w1 || x1 > w2) return false;
  }
  if (y2 !== Infinity && h1 !== Infinity) {
    h2 += y2;
    h1 += y1;
    if (isNaN(h1) || isNaN(y2) || y2 > h1 || y1 > h2) return false;
  }
  return true;
}
2 голосов
/ 22 мая 2011

Вам будет лучше с кругами, так как расстояние легче вычислить (фиксированный радиус). Скажем, вы установили радиус на 10, тогда, если distance < 20 они находятся внутри друг друга, то есть происходит столкновение. 

// Pythagoras theorem to calculate distance between 2 points
function does_collide(x1, y1, x2, y2) {
    return Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1)) < 20;
}

Каждый раз вычислять расстояние между пользователем / объектом: 

if(does_collide(pixX, pixY, pX, pY)) {
    ctx.fillText('collison!@', 0, 10);
    collison = true;
} else {
    collison = false;
}

В любое время переменная collison может использоваться для проверки наличия столкновения.

Вы можете нарисовать круг, используя: 

ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();

http://jsfiddle.net/q9APG/4/

...