Обнаружение столкновений не работает на холсте

-2

Я пытался сделать игру, но есть препятствия. У меня есть игрок (мяч) и квадрат (препятствие), и я не могу понять, как заставить детектирование столкновения работать. Вот мой код:Обнаружение столкновений не работает на холсте

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Ball Race</title> 
    </head> 

    <body> 

     <script src="https://code.jquery.com/jquery-2.1.0.js"></script> 
<canvas id="canvas" width="800" height="200"></canvas> 
     <script> 

var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 
var width = canvas.width; 
var height = canvas.height; 

var circle = function (x, y, radius, fillCircle) { 
    ctx.beginPath(); 
    ctx.arc(x, y, radius, 0, Math.PI * 2, false); 
    if (fillCircle) { 
    ctx.fill(); 
    } else { 
    ctx.stroke(); 
    } 
}; 

var drawRect = function (x, y) { 
ctx.fillRect(x, y, 20, 20) 
} 

var Object = function() { 
this.x = width/4; 
this.y = height/4; 
} 
// The Ball constructor 
var Ball = function() { 
    this.x = width/2; 
    this.y = height/2; 
    this.xSpeed = 5; 
    this.ySpeed = 0; 
}; 

// Update the ball's position based on its speed 
Ball.prototype.move = function() { 
    this.x += this.xSpeed; 
    this.y += this.ySpeed; 

    if (this.x < 11) { 
    this.x = 11; 
    } else if (this.x > width - 11) { 
    this.x = width - 11; 
    } else if (this.y < 11) { 
    this.y = 11; 
    } else if (this.y > height - 11) { 
    this.y = height - 11; 
    } 
}; 

// Draw the ball at its current position 
Ball.prototype.draw = function() { 
    circle(this.x, this.y, 10, true); 
}; 

Object.prototype.draw = function() { 
    drawRect(this.x, this.y) 
} 

//collision types 



Object.prototype.checkCollision = function() { 
var col1 = this.x == ball.x && this.y == ball.y; 
var col2 = this.x + 1 == ball.x && this.y == ball.y; 
var col3 = this.x + 2 == ball.x && this.y == ball.y; 
var col4 = this.x + 3 == ball.x && this.y == ball.y; 
if (col1 || col2 || col3 || col4) { 
alert("COLLISION!"); 
} 
} 
// Set the ball's direction based on a string 
Ball.prototype.setDirection = function (direction) { 
    if (direction === "up") { 
    this.xSpeed = 0; 
    this.ySpeed = -5; 
    } else if (direction === "down") { 
    this.xSpeed = 0; 
    this.ySpeed = 5; 
    } else if (direction === "left") { 
    this.xSpeed = -5; 
    this.ySpeed = 0; 
    } else if (direction === "right") { 
    this.xSpeed = 5; 
    this.ySpeed = 0; 
    } else if (direction === "stop") { 
    this.xSpeed = 0; 
    this.ySpeed = 0; 
    } 
}; 

// Create the ball object 
var ball = new Ball(); 
var object = new Object(); 
// An object to convert keycodes into action names 
var keyActions = { 
    32: "stop", 
    37: "left", 
    38: "up", 
    39: "right", 
    40: "down" 
}; 

// The keydown handler that will be called for every keypress 
$("body").keydown(function (event) { 
    var direction = keyActions[event.keyCode]; 
    ball.setDirection(direction); 
}); 

// The animation function, called every 30 ms 
setInterval(function() { 
    ctx.clearRect(0, 0, width, height); 

    ball.draw(); 
    ball.move(); 

    object.draw(); 

    ctx.strokeRect(0, 0, width, height); 
}, 30); 

setInterval(function() { 
    object.checkCollision(); 
}, 1) 
     </script> 
    </body> 
    </html>

Как бы вы это обозначили? Приведите пример, похожий на мой.

источник

2015-12-11 Cool123

первым, настоятельная обычно означает, у вас есть домашнее задание из-за. во-вторых, вы просите нас сделать это за вас. Если у вас есть конкретные вопросы о том, почему что-то не работает или как приблизиться к вашему желаемому результату, вы можете получить более полезные ответы. – thedarklord47

Так что ты собираешься делать? поговорите о том, как я сосать? – Cool123

нет. Я собираюсь объяснить, что это не очень хороший вопрос, и никто не собирается делать это за вас. что не работает с вашим текущим кодом? что вы хотите, чтобы этого не произошло? Что ты не можешь сделать сам? Без этой информации кто-то должен был бы начать все с нуля и полностью написать для вас. И, как я уже говорил, это не так, как это работает. – thedarklord47

Кажется, что большая часть функциональности есть, вы просто пропустили правильную логику в checkCollision. Я хотел бы изменить его на что-то вроде:

Object.prototype.checkCollision = function() { 
    var colx = (ball.x-ball.radius<this.x&&ball.x+ball.radius>this.x)||(ball.x-ball.radius<this.x+20&&ball.x+ball.radius>this.x+20); 
    var coly = (ball.y-ball.radius<this.y&&ball.y+ball.radius>this.y)||(ball.y-ball.radius<this.y+20&&ball.y+ball.radius>this.y+20); 

    if(colx&&coly){ 
    console.log('collision'); 
    } 
}

colx проверок х столкновений, чтобы увидеть, если мяч находится между положением объектов. coly делает то же самое, что и для переменной y. Если оба истины, то происходит столкновение.

radius Я добавил переменную в Ball

var Ball = function() { 
    this.x = width/2; 
    this.y = height/2; 
    this.xSpeed = 5; 
    this.ySpeed = 0; 
    this.radius = 10; 
};

Вот fiddle

источник

2015-12-11 23:53:08 depperm

как бы вы остановились? xspeed и yspeed будут установлены в 0 правильно? но затем он автоматически обновится. – Cool123

заставить мяч остановиться? Игнорировать ввод тоже? – depperm

Обнаружение столкновений не работает на холсте

ответ

Смежные вопросы