JeZxLee

Thinking Ahead: Need Help With Code Optimization...

Recommended Posts

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);
}

 

Share this post


Link to post
Share on other sites

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.