javascript - Convert this function from childhood times to something better? -

i needed show simple code example friend, example moving button along edge of screen clockwise. sure simple, no, simplest. found myself spending 30 minutes on that. embarased, because professional programmer 20+ years, , needed start program many times before button flying right ways. , thinking, why? speculated kind of code difficult right immediately, because old style, each case typed separately, each check must entered manually, need go through each iteration , make sure numbers , checks precisely correct, , hard because of nature of code style, is, eehh, spaghetti, messy?

so like, there way convert "modern" way, use loop instead of cases, use templates or other meta-programming, use functional approach or @ least use arrays. , seems cannot find way this.

var mx = screen.width - b.w, = screen.height - b.h  setinterval(function() {     var step = 3     if (state == 1) {         b.x += step         if (b.x >= mx) b.x = mx, state++     } else if (state == 2) {         b.y += step         if (b.y >= my) b.y = my, state++     } else if (state == 3) {         b.x -= step         if (b.x <= 0) b.x = 0, state++     } else if (state == 4) {         b.y -= step         if (b.y <= 0) b.y = 0, state = 1     }     b.apply() }, 1) 

this javascript, in c more difficult right fast, because need think types.

here come myself... maybe demonstrating trying achieve. not talking choosing different algorithm. rather abotu exploring language(s) features, , programming techniques.

var d = 3, name = ['x','y'], delta = [d,d,-d,-d],      limit = [screen.width - b.w, screen.height - b.h,0,0]  setinterval(function() {     b[name[0]] += delta[0]     if (delta[0] > 0 && b[name[0]] > limit[0] || b[name[0]] <= 0)         b[name[0]] = limit[0],         [name,delta,limit].some(function(x){ x.push(x.shift()) })     b.apply() },1) 

this 1 @ least separates data code, making simpler right. worked me first attempt. still not satisfied completely)

the average american newspaper article written @ 6th grade reading level. isn't because person writing never went beyond 6th grade; rather, they've learned it's better write in manner can understand. bring because you're calling code childish or unsophisticated, yet it's clear , concise code there task had, , therefore best.

if want go around square, you're not going have choice besides did - have 4 different directions go, , keep track of you're at. code shows off basics of state machine, because that's need go around in 4 different straight lines.

if you're willing fake different movement, can remove states , go around in ellipse using trigonometry. (it should circle, since screen rectangular, you'll ellipse, different speeds on long , short sides of screen.)

here's basics. may need tweaking make sure have edges hitting right spot. truthfully, think time work out special cases on version, you'll find solution more elegant.

// find center x , y var centerx = screen.width / 2; var centery = screen.height / 2; // first, find radius.  if want cover everything, need half diagonal var radius = math.sqrt(centerx * centerx + centery * centery); var increment = 0.01; // higher values, of course, move faster var theta = 0; setinterval(function() {     b.x = math.min(math.max(centerx + radius * math.cos(x), screen.width), 0);     b.y = math.min(math.max(centery + radius * math.sin(y), screen.height), 0);     theta -= increment;     b.apply(); }, 1); 

as mentioned, need tweaking come anywhere close looking code made. code may less childish, it's less easy understand - , less @ accomplishing task.

don't worry how fancy code was. works well, , clear understand, , that's matters.

edit

i realized later on forgot base center, , code had posted circle top left. i've added in center stuff above. see? adding complexity doesn't @ imply code better... :-)

also, did figure out 1 change recommend original algorithm: name states! make them strings, , have state "top", "right", "bottom" , "left", , actively set them rather using state++. make code more readable.