Hum. On a first read through your code looks correct and matches the tutorial. We may have to do some debugging.
Please add a console log in the if statement, like this

if(pos.x-size.x < -halfWidth || pos.x +size.y > halfWidth)
{
    console.log("flip x direction");
    this.setVelocity({x:this.getVelocity().x*-1, y:this.getVelocity().y});
}

This will tell us if we are ever triggering the flip x direction code.

You should see the message flip x direction in the console. You can see the console by either pressing F12 in your browser and navigating to the console tab, or double clicking the bar at the bottom in the wade editor. This is the bar that mentions reserving 200MB for file system when first opening the editor.

If the message does not show up, it means our if statement condition is never true (something that should be impossible when the ball gets to the edge) or for some weird reason the onUpdate function is not running. This could potentially happen if you accidentally disabled auto listen in the scene object properties for the ball (Select the ball object, then open properties tab, auto listen should be selected)

See how you get on with that. Hopefully we can gleam some information from this and figure out how to solve the problem.

Good luck

Thanks for your help Foxcode, "flip x direction" does show in the console log. I have also made sure that "auto listen" is on but i have noticed that i can't add a behavior on my account, is this normal? 

How many times does "flip x direction" show up?

I haven't really followed that tutorial, but foxcode don't you want to check the sign of velocity before flipping it, in case the ball has gone too far beyond the border? Something along the lines of:

var velocity = this.getVelocity();
if ((velocity.x < 0 && pos.x-size.x < -halfWidth)||(velocity.x > 0 && pos.x + size.x > halfWidth))
{
    console.log("flip x direction");
    this.setVelocity({x: velocity.x*-1, y: velocity.y});
}

Also note that technically it should be size.x, not .y (although it won't make any difference as size.x is going to be the same value as size.y)

So flip x direction gets shown once in console each time the ball hits the wall, but the direction doesn't flip? Might have to get Gio in on this one. More debugging I think, and this will get to the heart of the issue
 

if(pos.x-size.x < -halfWidth || pos.x +size.y > halfWidth)
{
    console.log("flip x direction");
    console.log("velocity before ",this.getVelocity().x);
    this.setVelocity({x:this.getVelocity().x*-1, y:this.getVelocity().y});
    console.log("velocity after ",this.getVelocity().x);
}

If the 2 values for velocity are the same, then set velocity is somehow broken, though I hightly doubt that is the case, it's supposed to be impossible :)

If the velocity does get flipped but the ball doesn't change direction, then I suspect you are changing the velocity again elsewhere. My initial instinct was that the if statement is getting triggered twice when you get to the edge, this would cause the velocity to flip correctly but then flip straight back again.

I'm really not sure what the issue could be, it is such a simple piece of code. Sorry I can't be of more help.

Final thought, you could also add this at the end of the if statement.

var b = this;
setTimeout(function()
{
    console.log("timeout vel ", b.getVelocity().x);
},250);

This would tell you if the x velocity is still the same quarter of a second later, which it should be unless the ball had hit something else or you are changing it elsewhere
 

Gio  "flip x direction" shows up every 5 to 6 seconds, if i leave the game running it looks like it's just going to keep repeating until i stop the program. 

Foxcode i tried what you suggest and i thought i will show you what the console logs is displaying.  Pic 1 and every now and then it save the screen, check it out in this pic. Pic 2

I messed up on the second pic above, here it is.

Based on that my best guess is that it is counting the collision twice and thus not doing anything.

This wasn't part of the tutorial as it didn't appear necessary for me at the time. The correct way to resolve these collisions involves an extra step. You move the ball until it is no longer colliding and then flip it's direction. This ensures it does not collide 2 frames in a row which what might be happening here. So once again, and probably the last time tonight because I'm almost completely out of ideas. Try this :)

 

if(pos.x-size.x < -halfWidth || pos.x +size.y > halfWidth)
{
    // By finding the current x position and subtracting the current x velocity,
    // we can set a new x position, which moves the ball out of the collision zone.
    // This wont be pixel perfect but should ensure colliding with the same edge
    // twice frame after frame cannot happen
    var newX = this.getPosition().x - this.getVelocity().x;
    this.setPosition(newX, this.getPosition().y);
    this.setVelocity({x:this.getVelocity().x*-1, y:this.getVelocity().y});

}

I'm very sorry for the difficulty you are having. Hopefully this will solve it. I notice you host these pictures on amazon s3. If this solution doesn't work either, please download your code from the editor, there is an option to download source, 4th tab from the left I think, download package. Please upload that. If I have access to that I can figure out what's going on. This has become a challenge now :)

 

It's okay, i tried the new code and it's pretty much doing the same so i will upload the source here. I hope this is the right code, this is my apps Wade.js file, if you need the entire game folder then i am not sure how would i upload that here. I hope this helps and thank you for all of your help.

Hi

To clarify, wade.js is just the source for the engine, but if you can send us the whole project that's how we can help you.

This forum software is very new and home-made, we haven't sorted out attachments just yet. So please for the time being, zip it and email it to me at gio@clockworkchilli.com

Thanks

Okay, sorry about that Gio. 

You will be happy to know I managed to fix the problem in just a few minutes on my computer.

This is what my if statement now looks like
 

if(pos.x-size.x < -halfWidth || pos.x +size.x > halfWidth)
{
    this.setVelocity({x:this.getVelocity().x*-1, y:this.getVelocity().y});
}

Please copy and paste the above as there were some other minor mistakes in your if statement, y's that should have been s's etc

The problem you have with your code is your use of wade.getScreenWidth() and wade.getScreenHeight()
I did this in the tutorial, but the size of my background and my screen matched. Your's do not.

Your background image is 320px by 480px. This simplest fix is to change the min and max resolution, see this part of the video where I do this
https://www.youtube.com/watch?v=u_DWMR_34QE&t=1m38s

In your case change both min and max to 320 by 480. I tested this and it fixed the problem.

So your collisions were working perfectly, they were just happening way outside of the image so you couldn't see them. Thanks for sending the code, it really helps to solve problems like this


 

I did everything and it's still not working. In the console logs i am getting this error "file system error: file not found. " How can i find out what file is it talking about? Or what steps should i take to sole this issue, sorry for all these issues. :(

Hi again. I have sent my fixed version of your code to Gio, he will email it to you. The only fix I made is the one I described in my previous post and it ran fine here, hopefully it works fine there too :)

Okay, thanks a million Foxcode. :)