I have specific problem where I need to use a javascript array with string keys in order for collision detection to work in my game. There is a delay in movement; for example, when you press the left arrow key and 'd' simultaneously, moving both different objects left and then switch to moving one left and one right. The lag flat out wrecks the gameplay. How do I fix this? This is a sample of the code I used.
var imgData
var hittingWall = false;
// Crucial Code for collision detection
var ball={posX:canvasW/2, posY:0, diameter: 10};
var wall={posX:ball.posX-50, posY:canvasH/2, width: 100, height:20};
//
/* the line below gets the pixel data for the canvas right below the ball using
context.getImageData(x,y,width,height) where x is the x position of the ball
y is the y position of the ball + the diameter of the ball, the width is the width of the
ball and the height is 1px. This effectivly looks at all the pixels directly below the ball
*/
imgData=context.getImageData(ball.posX,ball.posY+ball.diameter,ball.diameter,1);
/* the for loop below goes through each pixel of the image data collected above (5 px total)
for each pixel it checks the alpha value to see if something is drawn there
(imgData.data[i+3]) is the alpha value of the pixel and if it ===255 that means it is fully
opaque and something is drawn there
*/
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
hittingWall = true;
break;
} else {
hittingWall = false;
}
}
window.requestAnimationFrame(redraw);
};
window.requestAnimationFrame(redraw);
var dx = 10;
var WIDTH = 600
var HEIGHT = 600
var keys = [];
window.addEventListener("keydown",
function(e){
keys[e.keyCode] = e.keyCode;
var keysArray = getNumberArray(keys);
//test if something is below
imgData=context.getImageData(rect1.x,rect1.y+rect1.h,rect1.w,1);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect1.hittingWallBelow = true;
break;
} else {
rect1.hittingWallBelow = false;
}
}
//test if something is above
imgData=context.getImageData(rect1.x,rect1.y-1,rect1.w,1);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect1.hittingWallAbove = true;
break;
} else {
rect1.hittingWallAbove = false;
}
}
//test if something is to the left
imgData=context.getImageData(rect1.x-1,rect1.y,1,rect1.h);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect1.hittingWallLeft = true;
break;
} else {
rect1.hittingWallLeft = false;
}
}
//test if something is to the right
imgData=context.getImageData(rect1.x+rect1.w,rect1.y,1,rect1.h);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect1.hittingWallRight = true;
break;
} else {
rect1.hittingWallRight = false;
}
}
//
//test if something is below
imgData=context.getImageData(rect2.x,rect2.y+rect2.h,rect2.w,1);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect2.hittingWallBelow = true;
break;
} else {
rect2.hittingWallBelow = false;
}
}
//test if something is above
imgData=context.getImageData(rect2.x,rect2.y-1,rect2.w,1);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect2.hittingWallAbove = true;
break;
} else {
rect2.hittingWallAbove = false;
}
}
//test if something is to the left
imgData=context.getImageData(rect2.x-1,rect2.y,1,rect2.h);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect2.hittingWallLeft = true;
break;
} else {
rect2.hittingWallLeft = false;
}
}
//test if something is to the right
imgData=context.getImageData(rect2.x+rect2.w,rect2.y,1,rect2.h);
for (var i=0;i<imgData.data.length;i+=4)
{
if (imgData.data[i+3]===255){
rect2.hittingWallRight = true;
break;
} else {
rect2.hittingWallRight = false;
}
}
// rect1
if(keysArray.toString() == "38" && rect1.hittingWallAbove === false){
(rect1.y - dx > 0)
rect1.y -= dx;
}
else if (keysArray.toString() == "40" && rect1.hittingWallBelow === false){
(rect1.y + dx < HEIGHT)
rect1.y += dx;
}
else if (keysArray.toString() == "37" && rect1.hittingWallLeft === false){
(rect1.x - dx > 0)
rect1.x -= dx;
}
else if (keysArray.toString() == "39" && rect1.hittingWallRight === false){
(rect1.x + dx < WIDTH)
rect1.x += dx;
}
// Rect2
else if (keysArray.toString() == "87" && rect2.hittingWallAbove === false){
(rect2.y - dx > 0)
rect2.y -= dx;
}
else if (keysArray.toString() == "83" && rect2.hittingWallBelow === false){
(rect2.y + dx < HEIGHT)
rect2.y += dx;
}
else if (keysArray.toString() == "65" && rect2.hittingWallLeft === false){
(rect2.x - dx > 0)
rect2.x -= dx;
}
else if (keysArray.toString() == "68" && rect2.hittingWallRight === false){
(rect2.x + dx < WIDTH)
rect2.x += dx;
}
// If both rectangles are not hittingwalls
else if (keysArray.toString() == "38,87" && rect1.hittingWallAbove === false && rect2.hittingWallAbove === false){
(rect1.y - dx > 0)
rect1.y -= dx,
(rect2.y - dx > 0)
rect2.y -= dx
;
}
else if (keysArray.toString() == "38,83" && rect1.hittingWallAbove === false && rect2.hittingWallBelow === false){
(rect1.y - dx > 0)
rect1.y -= dx,
(rect2.y + dx < HEIGHT)
rect2.y += dx;
;
}
else if (keysArray.toString() == "38,65" && rect1.hittingWallAbove === false && rect2.hittingWallLeft === false){
(rect1.y - dx > 0)
rect1.y -= dx,
(rect2.x - dx > 0)
rect2.x -= dx;
;
}
else if (keysArray.toString() == "38,68" && rect1.hittingWallAbove === false && rect2.hittingWallRight === false){
(rect1.y - dx > 0)
rect1.y -= dx,
(rect2.x + dx < WIDTH)
rect2.x += dx;
;
}
else if (keysArray.toString() == "40,87" && rect1.hittingWallBelow === false && rect2.hittingWallAbove === false){
(rect1.y + dx < HEIGHT)
rect1.y += dx;
(rect2.y - dx > 0)
rect2.y -= dx
;
}
else if (keysArray.toString() == "40,83" && rect1.hittingWallBelow === false && rect2.hittingWallBelow === false){
(rect1.y + dx < HEIGHT)
rect1.y += dx;
(rect2.y + dx < HEIGHT)
rect2.y += dx;
}
else if (keysArray.toString() == "40,65" && rect1.hittingWallBelow === false && rect2.hittingWallLeft === false){
(rect1.y + dx < HEIGHT)
rect1.y += dx;
(rect2.x - dx > 0)
rect2.x -= dx;
}
else if (keysArray.toString() == "40,68" && rect1.hittingWallBelow === false && rect2.hittingWallRight === false){
(rect1.y + dx < HEIGHT)
rect1.y += dx;
(rect2.x + dx < WIDTH)
rect2.x += dx;
}
else if (keysArray.toString() == "37,87" && rect1.hittingWallLeft === false && rect2.hittingWallAbove === false){
(rect1.x - dx > 0)
rect1.x -= dx;
(rect2.y - dx > 0)
rect2.y -= dx;
}
else if (keysArray.toString() == "37,83" && rect1.hittingWallLeft === false && rect2.hittingWallBelow === false){
(rect1.x - dx > 0)
rect1.x -= dx;
(rect2.y + dx < HEIGHT)
rect2.y += dx;
}
else if (keysArray.toString() == "37,65" && rect1.hittingWallLeft === false && rect2.hittingWallLeft === false){
(rect1.x - dx > 0)
rect1.x -= dx;
(rect2.x - dx > 0)
rect2.x -= dx;
}
else if (keysArray.toString() == "37,68" && rect1.hittingWallLeft === false && rect2.hittingWallRight === false){
(rect1.x - dx > 0)
rect1.x -= dx;
(rect2.x + dx < WIDTH)
rect2.x += dx;
}
else if (keysArray.toString() == "39,87" && rect1.hittingWallRight === false && rect2.hittingWallAbove === false){
(rect1.x + dx < WIDTH)
rect1.x += dx;
(rect2.y - dx > 0)
rect2.y -= dx;
}
else if (keysArray.toString() == "39,83" && rect1.hittingWallRight === false && rect2.hittingWallBelow === false ){
(rect1.x + dx < WIDTH)
rect1.x += dx;
(rect2.y + dx < HEIGHT)
rect2.y += dx;
}
else if (keysArray.toString() == "39,65" && rect1.hittingWallRight === false && rect2.hittingWallLeft === false){
(rect1.x + dx < WIDTH)
rect1.x += dx;
(rect2.x - dx > 0)
rect2.x -= dx;
}
else if (keysArray.toString() == "39,68" && rect1.hittingWallRight === false && rect2.hittingWallRight === false){
(rect1.x + dx < WIDTH)
rect1.x += dx;
(rect2.x + dx < WIDTH)
rect2.x += dx;
}
}, false);
window.addEventListener('keyup',
function(e){
keys[e.keyCode] = false;
},
false);
function getNumberArray(arr){
var newArr = new Array();
for(var i = 0; i < arr.length; i++){
if(typeof arr[i] == "number"){
newArr[newArr.length] = arr[i];
}
}
return newArr;
}
Aucun commentaire:
Enregistrer un commentaire