I am trying to develop a maze game in canvas. I have drawn the maze manually such as
context.moveTo(100,700);
context.lineTo(100,600);
context.lineTo(200,600);
context.lineTo(200,500);
and there are many more. I want to move the object through these lines without moving beyond those border.
For this I have tried the following code :
function right() {
context.clearRect(0, 0, canvas.width, canvas.height);
art();
myImage11.src = "Point.png";
x += 20;
if ((x + 20 < 50)) {
context.clearRect(0, 0, canvas.width, canvas.height);
checkcollision();
if (collision == 1) {
x -= 20;
collision = 0;
}
context.drawImage(myImage11, x, y, 50, 50);
}
my checkcollision function does
function checkcollision() {
var myImage11 = context.getImageData(x, y, 10, 10);
var pix = myImage11.data;
for (var i = 0; n = pix.length, i < n; i += 4) {
if (pix[i] == 0) {
collision = 1;
}
}
}
But it doesn't work. Please help to solve this!!! Thanks in advance
It's difficult to extrapolate the exact workings of the current scenario, like the collision only checked when x + 20 < 50
, but the problem probably is in the area from which the getImageData is obtained: the x and y positions of the 'avatar' with a width of 10 ( context.getImageData(x, y, 10, 10);
) This would check if the left side of the newavatar position has a collision, but not the right side in which direction the move was made. For that something like x + avatarWidth- XMovement and a width of XMovement should be checked.
Perhaps not entirely corresponding with your current setup, but made a fiddle that emulates the movement. In it the entire avatar target position is checked for a quicker setup, but could be optimized to use the new overlaps if needed.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var x = 100, y = 200;
var imgWidth = 50, imgHeight = 50;
var checkcollision = function(){ //checks collision of the entire 'avatar' rectangle. This can be done more efficiently by only checking the moved to area, but that would require different parameters per direction.
var data = context.getImageData(x , y, imgWidth, imgHeight).data;
return data.some(function(p){ return p != 0;});
}
function right() {
context.clearRect(0,0, canvas.width, canvas.height);
art(); //draw maze
//myImage11.src = "Point.png";
var curx= x;
x+=20;
while(checkcollision() && x > curx){ //while collision decrease x (note, this could be more efficient by just checking the new position overlap)
x--;
}
drawAvatar();
}
function art(){
context.moveTo(100,400); //decreased y a bit to keep it easier viewable while testing
context.lineTo(100,300);
context.lineTo(200,300);
context.lineTo(200,200);
context.stroke();
}
function drawAvatar(){
//context.drawImage(myImage11, x, y, imgWidth, imgHeight);
context.fillRect(x,y,imgWidth,imgHeight);
}
art();drawAvatar();
Image data does do some weird stuff Sometimes the color you draw is off a little. Check the diffrence between y=98,99,100 http://jsfiddle.net/15wsszw4/
the formula gets the RED value of a pixel at x,y
console.log('R:'+imgData.data[y*4*c.width+x*4])
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.