Я создаю игру, в которой спрайт Тардис должен уклоняться от метеорного спрайта, чтобы добраться до платформы в нижней части холста.Для этого я создал класс столкновений, который отлично работает для обнаружения столкновения Тардис с платформой, однако при использовании, чтобы попытаться обнаружить столкновение метеора и Тардис, иногда он срабатывает, даже если метеор не находится рядом с Тардис.
Index.html
// Function to handle the keyboard controls
function KeyboardEventHandler(event) {
// Up arrow is triggered
if (event.keyCode == 38) {
tardis.Y -= 5;
//tardisacceleration.VerticalThrust(0.1);
console.log("Go Up");
}
// Right arrow is triggered
if (event.keyCode == 39) {
tardis.X += 5;
console.log("Go Right");
//tardisacceleration.HorizontalThrust(-0.1);
}
// Left arrow is triggered
if (event.keyCode == 37) {
tardis.X -= 5;
console.log("Go Left");
//tardisacceleration.HorizontalThrust(0.1);
}
// Down arrow is triggered
if (event.keyCode == 40) {
tardis.Y += 5;
console.log("Go Down");
//tardisacceleration.VerticalThrust(-0.1);
}
}
// Listener for the keydown event
window.addEventListener('keydown', KeyboardEventHandler, false);
(function drawFrame() {
// Clear the canvas for every new frame
context.clearRect(0, 0, canvas.width, canvas.height);
// Draw the sprite
tardis.draw(context);
// Apply the acceleration to the tardis
tardis.acceleration(tardisacceleration);
// Call on tardis move function
tardis.move();
// Call DrawMeteor Function
if (tardis.Y != 0 && tardis.X != 0) {
// Call the function that draws the meteor
DrawMeteor();
}
// If the y coordinates of the meteor is greater than 300 or less than 0
if (meteor1.Y + meteor1.SIZE/2 > 300 || meteor1.Y - meteor1.SIZE/2 < 0) {
// Increment the bounceY variable by one
bounceY++;
}
// If the x cooirdinates of the meteor are greater than 300 or less than 0
if (meteor1.X + meteor1.SIZE > 300 || meteor1.X < 0) {
// Increment the bounceX variable by one
bounceX++;
}
// If the bounceX value is even
if (IsEven(bounceX) == false) {
// Reverse the vector value
vector.VX = -vector.VX;
}
// If the bounceY value is even
if (IsEven(bounceY) == false) {
// reverse the vector value
vector.VY = -vector.VY;
}
// Draw the platform
platform.draw(context);
// if statement to check when tardis and platform come into contact
if (collision.overlap(tardis, platform)) {
NextLevel();
}
// If statement to trigger boom when tardis
// and meteor collide
if (collision.overlap(tardis, meteor1)) {
// Write boom in console
console.log("Boom");
//Produce boom image to show user the sprite has been destroyed
tardis.BOOM = true;
// Halt the Tardis
tardis.halt();
// Halt meteor 1
meteor1.halt();
// Change the text
plevel.innerHTML = "COLLISION! failed at level" + " " + level;
// Show restart button
restart.style.display = "block";
}
// Get the next animation frame
window.requestAnimationFrame(drawFrame);
})();
Collision class
function Collision() {
Collision.prototype.overlap = function(ItemA, ItemB) {
// Private variables to store the types of overlap
var overlapLeft,
overlapRight,
overlapTop,
overlapBottom;
// Left overlap
overlapLeft = (ItemA.Left >= ItemB.Left) & (ItemA.Left <= ItemB.Right);
// Right overlap
overlapRight = (ItemA.Right >= ItemB.Left) & (ItemA.Right <= ItemB.Right);
// Top overlap
overlapTop = (ItemA.Top >= ItemB.Top) & (ItemA.Top <= ItemB.Bottom);
// Bottom overlap
overlapBottom = (ItemA.Bottom >= ItemB.Top) & (ItemA.Top <= ItemB.Top);
// If left or Right and Top or Bottom are overlapping
if ((overlapLeft || overlapRight) && (overlapTop || overlapBottom)) {
// Return true as there is a overlapping
return true;
} else {
// Otherwise return false;
return false;
}
}
}
Meteor class
Object.defineProperty(this, 'Left',
{
// Getter
get: function() {
//return the valiue of x minus the width
return x;
}
}
)
Object.defineProperty(this, "Right",
{
// Getter
get: function() {
// Return the value of x plus the width
return x + size;
}
}
)
Object.defineProperty(this, "Top",
{
// Getter
get: function() {
// Return the value of y minus the height
return y - size/2;
}
}
)
Object.defineProperty(this, "Bottom",
{
// Getter
get: function() {
// Return the value of y plus the height
return y + size/2;
}
}