I have a simple collision detection working that lets you jump off of blocks, and yet if I call a function that has the same code block in it. It will break.
call without the function:
for(let i = 0; i < blocks.length; i++){
if(blockCollision(sprite, blocks[i])){
sprite.vy = 0;
// sprite.vy += gravity;
if(blockCollisionLeft(sprite, blocks[i])){
sprite.vx = 0;
sprite.x = blocks[i].x - sprite.w - offset;
}
if(blockCollisionRight(sprite, blocks[i])){
sprite.vx = 0;
sprite.x = blocks[i].x + blocks[i].w + offset;
}
if(blockCollisionTop(sprite, blocks[i])){
sprite.y = blocks[i].y - sprite.h - offset;
sprite.canJump = true;
}else{
// sprite.vy = 0;
sprite.y = blocks[i].y + blocks[i].h + offset;
sprite.vy += gravity;
}
}
}
and the call with the function:
for(let i = 0; i < blocks.length; i++){
if(blockCollision(sprite, blocks[i])){
checkCollisions(sprite, blocks[i]);
break;
}
}
I'm not sure what to do at this point, the sprite block keeps jumping out of control, can't quite understand why a function call would do this.
const PI = Math.PI;
const offset = 1;
const gravity = .33;
function inCanvas(obj){
if(obj.x - offset < 0 && obj.x + obj.w + offset > w
&& obj.y - offset < 0 && obj.y + obj.h + offset > h){
return true;
}
return false;
}
function groundCollision(obj){
if(obj.y + obj.h + offset == h){
return true;
}
return false;
}
function blockCollision(obj, block){
if(obj.x - offset < block.x + block.w && obj.x + obj.w + offset > block.x
&& obj.y - offset < block.y + block.h && obj.y + obj.h + offset > block.y){
return true;
}
return false;
}
function blockCollisionTop(obj, block){
if(obj.y + obj.h + offset > block.y && obj.y + obj.h + offset < block.y + block.h){
return true;
}
return false;
}
function blockCollisionLeft(obj, block){
if(obj.x + obj.w + offset > block.x && obj.x + obj.w < block.x){
return true;
}
return false;
}
function blockCollisionRight(obj, block){
if(obj.x - offset < block.x + block.w && obj.x > block.x + block.w){
return true;
}
return false;
}
function Sprite(_x, _y, _w, _h){
this.x = _x;
this.y = _y;
this.w = _w;
this.h = _h;
this.vx = 0;
this.vy = 0;
this.jv = -11;
this.canJump = false;
// this.maxv = 3;
};
Sprite.prototype.draw = function(){
ctx.fillRect(this.x, this.y, this.w, this.h);
};
Sprite.prototype.update = function(){
this.x += this.vx;
this.y += this.vy;
this.vy += gravity;
// this.yv -= gravity;
// this.xv -= gravity;
// this.xv += gravity;
if(this.y + this.h + offset > h){
this.y = h - this.h - offset;
}
if(this.y - offset < 0){
this.y = offset;
}
if(this.x - offset < 0){
this.x = offset;
}
if(this.x + this.w + offset > w){
this.x = w - this.w - offset;
}
};
Sprite.prototype.jump = function(){
this.vy = this.jv;
};
function Block(_x, _y, _w, _h){
this.x = _x;
this.y = _y;
this.w = _w;
this.h = _h;
this.steppedOn = false;
};
Block.prototype.draw = function(){
ctx.fillRect(this.x, this.y, this.w, this.h);
};
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const w = canvas.width = 600;
const h = canvas.height = 600;
var right = false,
left = false,
up = false;
var sprite = new Sprite(100, 200, 20, 40);
var box1 = new Block(w - 300, h - 80, 300, 10);
var blocks = [];
for(let i = 1; i <= 10; i++){
blocks.push(new Block(Math.round(Math.random() * w), Math.round(Math.random() * h), w/4 + Math.round(Math.random() * (w)), 15));
}
//console.log(blocks);
(function update(){
ctx.clearRect(0, 0, w, h);
sprite.draw();
for(let i = 0; i < blocks.length; i++){
blocks[i].draw();
}
box1.draw();
sprite.update();
// pOne.xv = left ? -2 : right ? 2 : 0;
if(left && right){
sprite.vx = 0;
}
else if(left){
sprite.vx = -2;
}
else if(right){
sprite.vx = 2;
}
else{
sprite.vx = 0;
}
if(up && sprite.canJump){
sprite.jump();
sprite.canJump = false;
}
if(groundCollision(sprite)){
sprite.canJump = true;
}
checkCollisions(sprite, box1);
for(let i = 0; i < blocks.length; i++){
if(blockCollision(sprite, blocks[i])){
checkCollisions(sprite, blocks[i]);
break;
}
}
// if(blockCollision(sprite, box1)){
// // checkCollisions(sprite, box1);
// sprite.vy = 0;
// // sprite.vy += gravity;
// if(blockCollisionLeft(sprite, box1)){
// sprite.vx = 0;
// sprite.x = box1.x - sprite.w - offset;
// }
// if(blockCollisionRight(sprite, box1)){
// sprite.vx = 0;
// sprite.x = box1.x + box1.w + offset;
// }
// if(box1.steppedOn = blockCollisionTop(sprite, box1)){
// sprite.y = box1.y - sprite.h - offset;
// sprite.canJump = true;
// }else{
// // sprite.vy = 0;
// sprite.y = box1.y + box1.h + offset;
// sprite.vy += gravity;
// }
// }
window.addEventListener("keydown", (e)=>{
// console.log(e.key);
if(e.key == "a" || e.key == "ArrowLeft"){
left = true;
}
if(e.key == "d" || e.key == "ArrowRight"){
right = true;
}
if(e.key == " " || e.key == "ArrowUp"){
up = true;
}
});
window.addEventListener("keyup", (e)=>{
if(e.key == "a" || e.key == "ArrowLeft"){
left = false;
}
if(e.key == "d" || e.key == "ArrowRight"){
right = false;
}
if(e.key == " " || e.key == "ArrowUp"){
up = false;
}
});
window.requestAnimationFrame(update);
}());
function checkCollisions(obj, block){
if(blockCollision(obj, block)){
obj.vy = 0;
// obj.vy += gravity;
if(blockCollisionLeft(obj, block)){
obj.vx = 0;
obj.x = block.x - obj.w - offset;
}
if(blockCollisionRight(obj, block)){
obj.vx = 0;
obj.x = block.x + block.w + offset;
}
if(block.steppedOn = blockCollisionTop(obj, block)){
obj.y = obj.y - obj.h - offset;
obj.canJump = true;
}else{
// obj.vy = 0;
obj.y = block.y + block.h + offset;
obj.vy += gravity;
}
}
}<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Jump</title>
<style>
*{margin:0; padding: 0;}
#game{
display:inherit;
margin:30px auto;
border:thin solid black;
}
</style>
</head>
<body>
<canvas id="game"></canvas>
<script src="JS/main.js"></script>
</body>Your first two code snippets are not equivalent, you seem to have added a break statement in your example with a function. This will have the effect of terminating the for loop prematurely when blockCollision(sprite, blocks[i]) is true, which might be why you are seeing a difference between the two.
edit: You also seem to have changed the third if-block slightly in your function. In your first code snippet that if-block is defined as:
if(blockCollisionTop(sprite, blocks[i])){
sprite.y = blocks[i].y - sprite.h - offset;
sprite.canJump = true;
}
but in your function is defined as:
if(block.steppedOn = blockCollisionTop(obj, block)){
obj.y = obj.y - obj.h - offset;
obj.canJump = true;
}
which is not equivalent because you have replaced blocks[i] with obj, but it should be block.