Thinking Ahead: Need Help With Code Optimization...

[JeZxLee]

Hi,

Can someone tell me how to optimize the following source code?:
I ask because I am doing the new high score name input soon,
and it would have 50+ on-screen character buttons, thanks!

JeZxLee

	if (index == 0)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftZero );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightZero );
	}
	else if (index == 1)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftOne );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightOne );
	}
	else if (index == 2)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftTwo );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightTwo );
	}
	else if (index == 3)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftThree );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightThree );
	}
	else if (index == 4)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftFour );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightFour );
	}
	else if (index == 5)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftFive );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightFive );
	}
	else if (index == 6)
	{
		ArrowLeft[index].on( 'pointerdown', onClickArrowLeftSix );
		ArrowRight[index].on( 'pointerdown', onClickArrowRightSix );
	}

function onClickArrowLeftZero()
{
	if (ArrowLeft[0].scale.x < 1 && ArrowLeft[0].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 0;
	
	ArrowLeft[0].scale.x *= .80;
	ArrowLeft[0].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightZero()
{
	if (ArrowRight[0].scale.x < 1 && ArrowRight[0].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 0;
	
	ArrowRight[0].scale.x *= .80;
	ArrowRight[0].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftOne()
{
	if (ArrowLeft[1].scale.x < 1 && ArrowLeft[1].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 1;
	
	ArrowLeft[1].scale.x *= .80;
	ArrowLeft[1].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightOne()
{
	if (ArrowRight[1].scale.x < 1 && ArrowRight[1].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 1;
	
	ArrowRight[1].scale.x *= .80;
	ArrowRight[1].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftTwo()
{
	if (ArrowLeft[2].scale.x < 1 && ArrowLeft[2].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 2;
	
	ArrowLeft[2].scale.x *= .80;
	ArrowLeft[2].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightTwo()
{
	if (ArrowRight[2].scale.x < 1 && ArrowRight[2].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 2;
	
	ArrowRight[2].scale.x *= .80;
	ArrowRight[2].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftThree()
{
	if (ArrowLeft[3].scale.x < 1 && ArrowLeft[3].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 3;
	
	ArrowLeft[3].scale.x *= .80;
	ArrowLeft[3].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightThree()
{
	if (ArrowRight[3].scale.x < 1 && ArrowRight[3].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 3;
	
	ArrowRight[3].scale.x *= .80;
	ArrowRight[3].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftFour()
{
	if (ArrowLeft[4].scale.x < 1 && ArrowLeft[4].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 4;
	
	ArrowLeft[4].scale.x *= .80;
	ArrowLeft[4].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightFour()
{
	if (ArrowRight[4].scale.x < 1 && ArrowRight[4].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 4;
	
	ArrowRight[4].scale.x *= .80;
	ArrowRight[4].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftFive()
{
	if (ArrowLeft[5].scale.x < 1 && ArrowLeft[5].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 5;
	
	ArrowLeft[5].scale.x *= .80;
	ArrowLeft[5].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightFive()
{
	if (ArrowRight[5].scale.x < 1 && ArrowRight[5].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 5;
	
	ArrowRight[5].scale.x *= .80;
	ArrowRight[5].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowLeftSix()
{
	if (ArrowLeft[6].scale.x < 1 && ArrowLeft[6].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 6;
	
	ArrowLeft[6].scale.x *= .80;
	ArrowLeft[6].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

//--------------------------------------------------------------------------------------------------------------
function onClickArrowRightSix()
{
	if (ArrowRight[6].scale.x < 1 && ArrowRight[6].scale.y < 1)  return;

	ArrowSetSelectedByKeyboard = 6;
	
	ArrowRight[6].scale.x *= .80;
	ArrowRight[6].scale.y *= .80;
	
	PlayEffect(EffectMenuClick);
}

 

[mattstyles]

Property keys in JS are dynamic and can be calculated at runtime i.e.

let obj = {
  foo: 'bar'
}

let i = 10
while (--i) {
  foo['prop' + i] = i * 2
}

console.log(foo)

// {
//   foo: 'bar',
//   prop10: 20,
//   prop9: 18
//   ...
// }

So, in your case, you could eliminate awkward branching logic (which is always a good thing) and do something like:

// Warning, anti-pattern ahead

const handlers = {
  onClickArrow1: () => {...},
  onClickArrow2: () => {...}
}

function init () {
  let i = 3
  while (--i) {
    arrow[i].on('click', handlers['onClickArrow' + i]) 
  }
}

But, this is kinda rubbish as (at least in your example) all your handlers are the same. In the name of creating code that can be reused, is reliable, single source of truth etc etc I'd suggest doing something like passing in the context your handler is working with:

function checkScale (arrow) {
  return arrow.scale.x < 1 && arrow.scale.y < 1
}

function prepClick (arrow) {
  return function onClick (event) {
    if (checkScale(arrow)) {
      return
    }

    ...
  }
}

let i = 10
while (--i) {
  arrows[i].on('click', prepClick(arrows[i]))
}

There are lots of good esnext syntax to do this sort of stuff, but thats a separate issue

Notice the `prepClick` function, this returns a function, this is sometimes called a thunk, but it uses closure to make arguments available later, in this case we trap an `arrow` object in the closure so that the actual event handler (onClick) can reference the specific instance it wants to work with when it is invoked later.

If you're on an OOP track then this stuff becomes easier to specify but JS handles context really weirdly so you'll have to deal with `this` issues. This way is more functional, but either way will get you where you want to be without writing the same stuff over and over.

http://wiki.c2.com/?DontRepeatYourself