-1
Я пытаюсь написать getImageData, поэтому всякий раз, когда мой автомобиль попадает в черную часть трека, появляется предупреждение. Однако он не работает, так как автомобиль продолжает двигаться.getImageData для обнаружения цвета-столкновения не работает
Может кто-нибудь, пожалуйста, помогите мне выяснить массив getImageData и, возможно, исправить мой код?
//Setting the canvas and context
var canvas = document.getElementById('gameCanvas');
var context = canvas.getContext('2d');
//Uploading car
var car = new Image();
car.src = "file:///H:/Desktop/Game/img/car.png";
//Setting properties of car
var x = 450;
var y = 730;
var speed = 10;
var angle = 990;
var mod = 0;
//Event listeners for keys
window.addEventListener("keydown", keypress_handler, false);
window.addEventListener("keyup", keyup_handler, false);
//Interval for animation
var moveInterval = setInterval(function() {
draw();
}, 30);
//Drawing the car turning and changing speed
function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
x += (speed * mod) * Math.cos(Math.PI/180 * angle);
y += (speed * mod) * Math.sin(Math.PI/180 * angle);
context.save();
context.translate(x, y);
context.rotate(Math.PI/180 * angle);
context.drawImage(car, -(car.width/2), -(car.height/2));
context.restore();
}
//Setting the keys
function keyup_handler(event) {
console.log('a');
if (event.keyCode == 38 || event.keyCode == 40) {
mod = 0;
}
}
//Setting all of the keys
function keypress_handler(event) {
console.log(event.keyCode);
if (event.keyCode == 38) {
mod = 1;
}
if (event.keyCode == 40) {
mod = -1;
}
if (event.keyCode == 37) {
angle -= 5;
}
if (event.keyCode == 39) {
angle += 5;
}
}
//INSERT COLOUR DETECTION CODE TEST
(function() {
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
function collideTest(){
var stopColour = context.getImageData(x - 5, y - 5,60,60);
for (var i = 0; i < stopColour.data.length; i += 4) {
if (stopColour.data[i] == 190707) {
alert("black");
}
}
}
function render(){
var canvas = document.getElementById('gameCanvas');
var context = canvas.getContext('2d');
var car = new Image();
car.src = "file:///H:/Desktop/Game/img/car.png";
requestAnimationFrame(render);
}
Вы могли бы создать прямоугольники самостоятельно, а затем связать с Element.getBoundingClientRect? – SasukeRinnegan
@SasukeRinnegan Нет, я бы определил прямоугольник для каждого объекта в игре, а затем проверил на наличие столкновений, проверив их координаты. – Philipp
Хорошо спасибо! – SasukeRinnegan