我的碰撞检测不起作用 [英] My collision detection isn't working
本文介绍了我的碰撞检测不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试制作一个简单的游戏，在这个游戏中，您是吃豆子，需要收集樱桃，同时避开鬼魂.我似乎无法弄清楚如何检查碰撞，并且我尝试搜索其他问题，但这些问题均无济于事.这是我的代码:
I'm trying to make a simple game where you are pacman and need to collect cherries while avoiding the ghosts. I can't seem to figure out how to check for collision and i've tried searching through other questions but none of them work. Here is my code:
<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>
推荐答案
在碰撞检测中，我看不到代码中的任何异常，但是特别是在2D模式中，它非常简单.
i dont see any atempt in your code at collision detection but it is very simple especally in 2D.
让我们说您有2个对象-A(吃豆人)和B(樱桃)
lets say you have 2 objects - A (pacman) and B (cherry)
如果您想知道它们是否发生碰撞，则需要进行点对点计算.
if you want to know if they have collided then you need to do a point to point calculation.
想象一下，画一个既适合的圆，又获得圆的半径，然后检查圆的两个中心点之间的距离是否小于圆的半径.像这样:-
Imagine drawing a circle round both that just fits, get the radius of the circle and then checking if distance between the two centre points of the circles is less than the circle radius. like so:-
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…
}
就这么简单
这篇关于我的碰撞检测不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
