From 3c377c8ac9555704b3c316b77157b7a5d0d87cbd Mon Sep 17 00:00:00 2001 From: Noel King Date: Sat, 9 Mar 2013 10:37:34 +0000 Subject: [PATCH] Updated teaching material --- .../006 Save the shoot/penaltyshootout.js | 39 ++-- penaltyshootout/006 Save the shoot/readme.md | 189 +++++++++++++++++- 2 files changed, 215 insertions(+), 13 deletions(-) diff --git a/penaltyshootout/006 Save the shoot/penaltyshootout.js b/penaltyshootout/006 Save the shoot/penaltyshootout.js index 0f9637b..7ab585d 100755 --- a/penaltyshootout/006 Save the shoot/penaltyshootout.js +++ b/penaltyshootout/006 Save the shoot/penaltyshootout.js @@ -202,26 +202,41 @@ function save() { var ballRight = parseInt(ballLeft)+ballWidth; var ballTop = parseInt(ball.css('top')); var ballBottom = ballTop + ballWidth; - - console.log('ballLeft ' + ballLeft); - console.log('ballRight ' + ballRight); - console.log('keeperLeft ' + keeperLeft); - console.log('keeperRight ' + keeperRight); - console.log('ballTop ' + ballTop); - console.log('keeperTop ' + keeperTop); - console.log('keeperBottom ' + keeperBottom); - console.log('ballBottom ' + ballBottom); - + if(isScore(ballLeft, ballRight, keeperLeft, keeperRight, ballTop, keeperTop, keeperBottom, ballBottom)) { - alert('Score ............... '); + + if(isGoal()) { + alert('Goal ............... '); + } + else if(isPoint()){ + alert('Point ..........'); + } } else { alert('Saved'); } } +function isGoal() { + + if(topStopPoint == goalTop) { + return true; + } else { + return false; + } +} + +function isPoint() { + if(topStopPoint == pointTop) { + return true; + } else { + return false; + } +} + function isScore(ballLeft, ballRight, keeperLeft, keeperRight, ballTop, keeperTop, - keeperBottom, ballBottom) { + keeperBottom, ballBottom) { + if((isBallOutsideLeft(ballRight, keeperLeft) || isBallOutsideRight(ballLeft, keeperRight)) && (isBallOutsideTop(ballBottom, keeperTop) diff --git a/penaltyshootout/006 Save the shoot/readme.md b/penaltyshootout/006 Save the shoot/readme.md index a387560..66dddd0 100644 --- a/penaltyshootout/006 Save the shoot/readme.md +++ b/penaltyshootout/006 Save the shoot/readme.md @@ -537,7 +537,7 @@ function save() { } ```` -Is it a point or goal +But you can score points or goals? --------- Ok can you tell me if we have saved a point or a goal? Have we written the code to handle this? I don't think so @@ -563,6 +563,36 @@ Lets think how we need them * If ball top is less than keeper bottom * If ball bottom is greater than keeper top + +#### Get more ball and keeper positions + +Before we were just checking the __ball__ left and right and the __keeper__ left and right, however this is a +gaelic game and we need to know whether is a point to goal so we need to create 4 more variables in the __save__ +function? We just discussed them above, can you think of what they are? + +* keeperTop +* keeperBottom +* ballTop +* ballBottom + +So lets add them to the __save__ function + +````javascript +function save() { + + var keeperLeft = parseInt(keeper.css('left')); + var keeperRight = keeperLeft+keeperWidth; + var keeperTop = parseInt(keeper.css('top')); + var keeperBottom = keeperTop + keeperWidth; + + var ballLeft = parseInt(ball.css('left')); + var ballRight = parseInt(ballLeft)+ballWidth; + var ballTop = parseInt(ball.css('top')); + var ballBottom = ballTop + ballWidth; + +} +```` + Do you think we should create a function for each of these? Well its a great idea, so lets go function writing #### If ball right is less than keeper left @@ -655,6 +685,163 @@ __AND__ __OR__ * If ball bottom is greater than keeper top + +Now we can update our isScore function for each of these __if__ conditions + + +````javascript +function isScore(ballLeft, ballRight, keeperLeft, keeperRight, ballTop, keeperTop, + keeperBottom, ballBottom) { + + if((isBallOutsideLeft(ballRight, keeperLeft) || isBallOutsideRight(ballLeft, keeperRight)) + && (isBallOutsideTop(ballBottom, keeperTop) || isBallOutsideBottom(ballTop, keeperBottom))) { + + } +} +```` + +Great we have created the if condition, would you all agree its easier to understand now we have created +a function for each check? So lets code inside our our __if__ condition. + +This function is returning a __boolean__ so it can only be __true__ or __false__, if the ball is outside +what should we __return__? Yes you are right __true__ + + +````javascript +function isScore(ballLeft, ballRight, keeperLeft, keeperRight, ballTop, keeperTop, + keeperBottom, ballBottom) { + + if((isBallOutsideLeft(ballRight, keeperLeft)|| isBallOutsideRight(ballLeft, keeperRight)) + && (isBallOutsideTop(ballBottom, keeperTop) || isBallOutsideBottom(ballTop, keeperBottom))) { + return true; + } +} +```` + +Remember we said this function is __boolean__ and will return either __true__ or __false__ would you agree +then that we should also put in an __else__ statement to return __false__. Well lets go ahead an add one. + +````javascript +function isScore(ballLeft, ballRight, keeperLeft, keeperRight, ballTop, keeperTop, + keeperBottom, ballBottom) { + + if((isBallOutsideLeft(ballRight, keeperLeft)|| isBallOutsideRight(ballLeft, keeperRight)) + && (isBallOutsideTop(ballBottom, keeperTop) || isBallOutsideBottom(ballTop, keeperBottom))) { + return true; + } + else { + return false; + } +} +```` + +Refresh your browsers and we can see our new function in action. Great our isScore function is looking +really good however we need to update the __save__ function to give us a more useful piece of information. + + +````javascript +function save() { + + var keeperLeft = parseInt(keeper.css('left')); + var keeperRight = keeperLeft+keeperWidth; + var keeperTop = parseInt(keeper.css('top')); + var keeperBottom = keeperTop + keeperWidth; + + var ballLeft = parseInt(ball.css('left')); + var ballRight = parseInt(ballLeft)+ballWidth; + var ballTop = parseInt(ball.css('top')); + var ballBottom = ballTop + ballWidth; + + if(isScore(ballLeft, ballRight, keeperLeft, keeperRight, ballTop, + keeperTop, keeperBottom, ballBottom)) { + alert('Score ...............'); + } else { + alert('Saved'); + } +} +```` + +Lets refresh your browser and see if you can score + +#### Add point or goal functionality + +Can you tell me how we know whether we have scored a goal or point, what variables are we using for that? Yes you are +right +* goalTop +* pointTop +* topStopPoint + +Can you tell me the conditions using these variables that mean we scored a goal or a point? + +__GOAL__ +* If __goalTop__ equals __topStopPoint__ + +Let's create a function for this returning a __boolean__, see can you write the function for +using the __if__ condition we just discussed. + +````javascript + +function isGoal() { + + if(topStopPoint == goalTop) { + return true; + } else { + return false; + } +} + +```` + +__POINT__ +* If __pointTop__ equals __topStopPoint__ + +Lets create a function for this returning a __boolean__, see can you write the function for +using the __if__ condition we just discussed. + +````javascript +function isPoint() { + if(topStopPoint == pointTop) { + return true; + } else { + return false; + } +} +```` + +We can now use these great new function in our __save__ function and alert a message telling us if we +scored a point or a goal. + +This will be added inside the __isScore__ __if__ condition? As these is the code used to handle when we score. + +````javascript +function save() { + + var keeperLeft = parseInt(keeper.css('left')); + var keeperRight = keeperLeft+keeperWidth; + var keeperTop = parseInt(keeper.css('top')); + var keeperBottom = keeperTop + keeperWidth; + + var ballLeft = parseInt(ball.css('left')); + var ballRight = parseInt(ballLeft)+ballWidth; + var ballTop = parseInt(ball.css('top')); + var ballBottom = ballTop + ballWidth; + + if(isScore(ballLeft, ballRight, keeperLeft, keeperRight, ballTop, + keeperTop, keeperBottom, ballBottom)) { + + if(isGoal()) { + alert('Goal ............... '); + } + else if(isPoint()){ + alert('Point ..........'); + } + } else { + alert('Saved'); + } +} +```` + + Add some scores --------