Jump to content

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

 

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

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...