Help in efficient rewriting part of JS code

[Kuzyo]

Hi everyone.

I start to write a little game http://jsbin.com/ibufux/7.My ball in game moves with setInterval (when ball change direction I clearInterval and setInterval again). I think part of code for moving ball can be rewrited more efficient, but I don’t know how. Can somebody to look in my code and give some advice. Thanks.

[Kuzyo]

Thanks, @CrocoDillon. Need time to properly understand what you said.

[Kuzyo]

Where I have problem – I made function for every direction moveDr() (ball goes down right), moveUr() ( up right), moveDl() (down left), moveUl() (up left). Here is code:

ballCondact: function() {
function moveDr() {
var timer = setInterval(function() {
$ball.css({top: (ball.t ++) + “px”,
left: (ball.l ++) + “px”})
if (ball.t == platform.t && ((ball.l >= platform.l)&&(ball.l <= platform.l + platform.width))) {
clearInterval(timer);
moveUr();
} else if ( ball.t == field.b – ball.height ) {
clearInterval(timer);
moveUr();
} else if (ball.l > field.width – ball.width) {
clearInterval(timer);
moveDl();
}
},1);
}
moveDr();
function moveUr() {
var timer = setInterval(function() {
$ball.css({top: (ball.t –) + “px”,
left: (ball.l ++) + “px”})
if (ball.t == field.t) {
clearInterval(timer);
moveDr();
} else if (ball.l > field.width – ball.width) {
clearInterval(timer);
moveUl();
}
},1);
}
function moveDl() {
var timer = setInterval(function() {
$ball.css({top: (ball.t ++) + “px”,
left: (ball.l –) + “px”})

if (ball.t == platform.t && ((ball.l >= platform.l)&&(ball.l <= platform.l + platform.width))) {
clearInterval(timer);
moveUl();
} else if (ball.t == field.b – ball.height) {
clearInterval(timer);
moveUl();
} else if (ball.l <= 0) {
clearInterval(timer);
moveDr();
}
},1);
}
function moveUl() {
var timer = setInterval(function() {
$ball.css({top: (ball.t –) + “px”,
left: (ball.l –) + “px”})
if (ball.t == field.t) {
clearInterval(timer);
moveDl();
}else if (ball.l <= 0) {
clearInterval(timer);
moveUr();
}
},1);
}
}

Can somebody give advice how can I rewrite it in one or two functions?

[Kuzyo]

I don’t think I will replicate it on my own ))) but ball update method I think I understood.

Question #1
what mean this part ?

initBall: function() {
$ball.click(function() {
ball.ballCondact.call(ball)
});
}

question#2

var time; // in this part var time undefined
setInterval(function() {
var newTime = new Date().getTime() / 1000,// count real time
deltaTime = newTime – (time || newTime); // in this part var time undefined too, as a result you subtract real time from real time
time = newTime; // here only var time become defined
ball.update(deltaTime);
}, 1000/60);
// How it all can work)

Thanks for help.

[Kuzyo]

Ok, understood. Thanks.
I think I will be have problem with collision detection(ball with bricks), I will ask in this theme if you find time, please, answer.
Can you recommend any forum where the main specialisation is JS?

[Kuzyo]

didn’t change move ball function yet, I started to look some info about collision detection, here is interim result (happy it works at all :P) http://jsbin.com/ibufux/12

[Kuzyo]

found this book http://www.amazon.com/The-Essential-Guide-HTML5-JavaScript/dp/1430233834 think it will help me to understand main concept

[Author]

Posts