我的碰撞检测不起作用

Question

我正在尝试制作一个简单的游戏，你是pacman，需要收集樱桃，同时避免鬼魂。我似乎无法弄清楚如何检查碰撞，我已经尝试搜索其他问题，但没有一个工作。这是我的代码：

<script language="javascript" src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script language="javascript">

var pacman = {
    speed: 256,
    x: 0,
    y: 0,
    height: 50,
    width: 50
};
var blinky = {
    x: 0,
    y: 0
};
var inky = {
    x: 0,
    y: 0
};
var pinky = {
    x: 0,
    y: 0
};
var clyde = {
    x: 0,
    y: 0
};
var cherry = {
    x: 100,
    y: 100,
    height: 56,
    width: 56
};
var score = 0;
var y = $(window).width() - 50;
var lives = 3;


/*
var reset = function () {
    cherry.x = 56 + (Math.random() * (window.width - 112));
    cherry.y = 56 + (Math.random() * (window.height - 112));
    $('#cherry').animate({left: cherry.x, top: cherry.y},0);
};



var update = function (modifier) {
    if (
        ((pacman.y + pacman.height) < (cherry.y)) ||
        (pacman.y > (cherry.y + cherry.height)) ||
        ((pacman.x + pacman.width) < cherry.x) ||
        (pacman.x > (cherry.x + cherry.width))
    ) {
        reset();
    }
};*/


if (pacman.x < cherry.x + cherry.width &&
   pacman.x + pacman.width > cherry.x &&
   pacman.y < cherry.y + cherry.height &&
   pacman.height + pacman.y > cherry.y) {
    console.log(hi);
}



$(document).ready(function(){
    $('#cherry').animate({left: cherry.x, top: cherry.y},0);
});
$(document).ready(function(){
    $('#pacman').animate({left: '' + y + '', top: "0"},0);
});



$(document).ready(function(){
    animateDiv();
    
});

function makeNewPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 30;
    var w = $(window).width() - 30;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDiv(){
    var newq = makeNewPosition();
    var oldq = $('#blinky').offset();
    var speed = calcSpeed([oldq.top, oldq.left], newq);
    
    $('#blinky').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDiv();        
    });
    
};

function calcSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}

$(document).ready(function(){
    animateDivv();
    
});

function makeNewPositionn(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 30;
    var w = $(window).width() - 30;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDivv(){
    var newq = makeNewPositionn();
    var oldq = $('#inky').offset();
    var speed = calcSpeedd([oldq.top, oldq.left], newq);
    
    $('#inky').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDivv();        
    });
    
};

function calcSpeedd(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}

$(document).ready(function(){
    animateDivvv();
    
});

function makeNewPositionnn(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 30;
    var w = $(window).width() - 30;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateDivvv(){
    var newq = makeNewPositionnn();
    var oldq = $('#pinky').offset();
    var speed = calcSpeeddd([oldq.top, oldq.left], newq);
    
    $('#pinky').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateDivvv();        
    });
    
};

function calcSpeeddd(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}

$(document).ready(function(){
    animateeDiv();
    
});

function makeNewwPosition(){
    
    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 30;
    var w = $(window).width() - 30;
    
    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);
    
    return [nh,nw];    
    
}

function animateeDiv(){
    var newq = makeNewwPosition();
    var oldq = $('#clyde').offset();
    var speed = calccSpeed([oldq.top, oldq.left], newq);
    
    $('#clyde').animate({ top: newq[0], left: newq[1] }, speed, function(){
      animateeDiv();        
    });
    
};

function calccSpeed(prev, next) {
    
    var x = Math.abs(prev[1] - next[1]);
    var y = Math.abs(prev[0] - next[0]);
    
    var greatest = x > y ? x : y;
    
    var speedModifier = 0.1;

    var speed = Math.ceil(greatest/speedModifier);

    return speed;

}



var pressed = false;
$(document).keydown(function(e) {
    if(!pressed){
        width = $(this).width();
        height = $(this).height();
        switch (e.which) {
            case 37:
                $('p').css({'background-image': 'url(pacman-left.png)'})
                $('p').stop().animate({
                    left: '-=' + width * 50
                }, 15000); //left arrow key
                break;
            case 38:
                $('p').css({'background-image': 'url(pacman-up.png)'})
                $('p').stop().animate({
                    top: '-=' + height * 50
                }, 15000); //up arrow key
                break;
            case 39:
                $('p').css({'background-image': 'url(pacman-right.png)'})
                $('p').stop().animate({
                    left: '+=' + width * 50
                }, 15000); //right arrow key
                break;
            case 40:
                $('p').css({'background-image': 'url(pacman-down.png)'})
                $('p').stop().animate({
                    top: '+=' + height * 50
                }, 15000); //bottom arrow key
                break;
        }
    }
    pressed = true;
}).keyup(function(){
    $('p').stop();
    pressed = false;
});

</script>

<style>
body {
    background-color: black;
}
div#life1 {
    width: 25px;
    height: 25px;
    background-image: url("life.png");
}
div#life2 {
    width: 25px;
    height: 25px;
    background-image: url("life.png");
}
div#life3 {
    width: 25px;
    height: 25px;
    background-image: url("life.png");
}
p#pacman {
	width: 50px;
	height: 50px;
	position: absolute;
    background-image: url("pacman-left.png");
}
div#blinky {
    width:30px;
    height:30px;
    position:fixed;
    background-image: url("blinky.jpg");
}
div#inky {
    width:30px;
    height:30px;
    position:fixed;
    background-image: url("inky.jpg");
}
div#pinky {
    width:30px;
    height:30px;
    position:fixed;
    background-image: url("pinky.jpg");
}
div#clyde {
    width:30px;
    height:30px;
    position:fixed;
    background-image: url("clyde.jpg");
}
div#cherry {
    width:56px;
    height:56px;
    position:fixed;
    background-image: url("cherry.png");
}
</style>

<body>
<table style='color: white'>
    <tr>
        <td><div id="life1"></div></td>
        <td><div id="life2"></div></td>
        <td><div id="life3"></div></td>
    </tr>
</table>
	<div id='blinky'></div>
    <div id='inky'></div>
    <div id='pinky'></div>
    <div id='clyde'></div>
	<p id="pacman"></p>
    <div id='cherry'></div>

</body>

Answer 1

我在碰撞检测中没有看到代码中的任何尝试，但它非常简单，特别是在2D中。

假设您有2个对象 - A（pacman）和B（樱桃）

如果你想知道他们是否发生了碰撞，那么你需要进行点对点计算。

想象一下，绘制一个圆形圆形，恰好适合圆形半径，然后检查圆形的两个中心点之间的距离是否小于圆形半径。像这样： -

float x, y;
float CircleRadius = 2.0f;
x = SmallModel->GetX() - LargeModel->GetX();    
y = SmallModel->GetY() - LargeModel->GetY();    


float collisionDist = sqrt( x*x + y*y);  

if (collisionDist < sphereRadius)
{
// Collision occurred…
}

就像那样简单

Answer 2

您的代码中有一个if条件，其中您正在执行 console.log（＆＃39; hi＆＃39;），我认为这是您的碰撞检测尝试，尽管它是＆＃39;不清楚。这是一个用于半径检测的JavaScript解决方案，类似于Rob85的方法：

function isColliding(pacman, bonusItem) {
    var dx = pacman.x - bonusItem.x;
    var dy = pacman.y - bonusItem.y;
    var rr = pacman.radius + bonusItem.radius;
    if (dx * dx + dy * dy < rr * rr)
        return true;
    else
        return false;
}

这假设您提供了一个＆＃39; hitbox＆＃39;除了x和y坐标属性之外，还有你的pacman和bonusItem对象。这个想法是你测试两个圆圈碰撞。

var pacman = {
    speed: 256,
    x: 0,
    y: 0,
    height: 50,
    width: 50,
    radius: (height + width) / 4 //roughly half the average hw
};

var cherry = {
    x: 100,
    y: 100,
    height: 56,
    width: 56,
    radius: (height + width) / 4; //roughly half the average hw
};

我认为圆圈碰撞是最简单的，所以这是一个好的起点，对于Pacman及其复杂性来说当然是足够的。

在这篇文章中对圆形方块碰撞进行了全面的报道：Circle-Rectangle collision detection (intersection)

此外，您可以考虑检查精灵中的每个像素。我从未尝试过，但这篇文章看起来很有帮助：Can someone explain per-pixel collision detection?

您也可以考虑使用方形碰撞检测。一般来说，这是Mozilla开发者网络的一篇很棒的文章：2d collision detection