javascript - 需要碰撞检测的 Javascript 和 Canvas "engine"

Question

所以，我有一个小的“四处移动和东西”引擎，目前非常原始。

每隔一段时间(基于计时器)另一个像素 (5x5) 将出现在屏幕上 - 如果您与该像素相交，我想触发一个事件。 (公平地说，该像素 (5x5) 需要大得多 :/)。

所以，这是我的 JSFiddle(给 fiddler 们): http://jsfiddle.net/neuroflux/q9APG/

这是我的 Canvas 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/

Canvas 代码:

    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;
            }
        }

Answer 1

等等，所以您只需要一个函数来查看两个矩形是否相交？

这里有一个防弹函数:

// 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;
}