Nerd For Tech
Published in

Nerd For Tech

Ten Pin Bowling Challenge II

A JavaScript Challenge Continued

Photo by Pavel Danilyuk from Pexels

Welcome back everyone for part II of our ten pin bowling challenge. If you remember in part I, we created a decent base version of our bowling score function. Yet it was still missing something, well actually a few something’s but well get to that. While it was able to pass all the supplied tests at the time, in its current state it will not be able to process every score thrown its way. I will be starting with the same code that we finished with in part I except for one caveat. I have created a whole new list of tests that will, in this case, all fail should we execute the function currently. If you would like to copy down the new starter repo you can find it here. Let’s jump right in!

The Problem

Our current problem is that our bowling score function is only half finished. But what was it we were missing again? Oh yeah, our first main issue we have left to tackle is being able to score multiple strikes and/or spares in a row. Secondly and tied with the first, is being able to score a strike or spare on the ninth frame. While it may not seem like much, we still need to consider that strikes and spares still have their bonuses applied in this frame. While this may seem like somewhat of a short list, we will be making quite a few alterations and additions to our code. This is also where we will be introducing numbers in front of our spares, as this is an integral part when applying our bonuses. So, without further ado, let’s get into our code.

The Solution

If you take a look at the ternary conditionals that we currently have in place, they will only execute should the following frame be a number. This is great and all but really limits us should our players be pretty good and also looks bad on us since were leaving a pretty big hole in our conditions. So, let’s make those conditions strong and able to handle all frames thrown its way. Before we do get started, one small change I am going to make to my current code is changing the frame from including X to strictly equating to X, that’s three equals. Also, everything that we will be doing will be mostly within our inner most else statement, the one within our frames loop.

With the current conditionals we have in place, we are able to make an addition to handle two spares in a row as some of our previous logic applies. By using our current spare conditional, we can add on or if the next frame is also a spare to still do the same thing. We will only be using a one bar or, this will mean if a spare is followed by a number or if a spare is followed by another spare. Take a look at our small addition.


While we made a simple addition to an existing conditional statement, our function is now, for the most part is able to handle scoring multiple spares in a row. Pretty cool, right? Well, what if we had to score a strike followed by a spare or a spare followed by a strike? Here we will create a new conditional statement to do just that, and since they both share similar logic, we will be using or again, but the logical or. That is a double bar or. Take a look at the added statement below.

Our conditional simply says, if we currently have a strike and our next frame is a spare then add 20 to our score. OR, if our current frame is a spare and our next frame is a strike then we will add 20 to our score. Since our score needs to increment the 20 in both cases, we can save time from having to write an additional conditional by using our JavaScript’s logical or. Remember that a strike, 10, will look for the next two scores. If it’s a spare both equate to ten. On the other hand, a spare is equal to 10 but only looking for the next single score, being a strike is equal to ten.

This brings us to a good point though, because a strike is looking for the next two scores to evaluate its own score, what are we going to do when there are multiple strikes in a row. Well since we know that each one is worth 10 points and we need the next two scores which will both be 10 each, we will end up with 30. So, let’s write a conditional to do just that.

Simple and very to the point. Should the current frame be a strike, and the next two strikes as well. We just need to add 30 to our current score. But what if there two strikes followed by a spare or a number? Well since we know two strikes equal 20, we can automatically add that to our current store. Since we still need to grab an additional score, since it is either a number or a spare, we will just need to grab the first index of that score. This is where the importance of having a number included with your spares, as strikes and spares will need to read this number. Let’s take a look at how we can write that out.

As you can see, we start off checking if the current frame and the next frame are both strikes. Then we also check if the frame after next if a spare or a number. In either case we will need to pull the first number from that and add it to our current score as well as our two strikes, 20.

Believe it or not we have just accomplished our first mission. Our function is now able to process the scores or multiple strikes and/or spares in a row. Although we have made this great breakthrough, we still have one more hurdle in our path and that is how to process strikes or spares in the last frame. What if our second to last frame is a spare? Since we have our spare covered in every case but one, we only need to make a case should we roll a strike on our first roll in our last frame. So, let’s create a case for that below.

As you can see right off the bat, we have added it before any of our other conditionals. This is because we want this to execute first should it meet our conditions. We simply add 20 to our current score should we roll a spare on our second to last frame and a strike on the first roll of our last frame. But what about a strike on the last frame?

This actually exposed another issue with our code that was not seen before we started taking on this endeavor. A strike does not know how to score itself properly on the third to last frame should a strike have been the first roll of the last frame. This is because as you are aware of now, that a strike looks for the next two values to evaluate itself. When a strike is scored in the third to last frame it will be looking for its second value within a possible three score frame. Similarly, if our second to last frame is rolled the same way it will not know how to interpret the last frame. Let’s take a look below at how we can again know out two birds with one stone on the same line.

As you can see, if the 8th , 9th, and first roll of last frame are all strikes or if the 9th, first and second roll of the last frame are all strikes. We simply need to add 30 to our current score. We are almost there and only need to take one more thing into consideration to complete our function. What if we roll a strike on our second to last frame and then get a strike on our first roll but then a spare or worse on our last two? Well we really just need to account for the number that will be in that place holder and we’ll do just that. Take a look at the addition to the code below.

By checking the 9th and first roll of the 10th frame for both strikes, we then also check that the second roll of the 10th frame is a number. Should our player roll a spare or worse for their two remaining roles, we will be present with a number that needs to be added to our current score as well as the two strikes.

If you have been following along closely and running tests as we move along, you will see that we have now completed our function! Because we have made our function so strong with all of our conditionals, we can actually remove our outer most if statement in turn leaving us no need for an else statement. Be sure to keep everything we have written within the else statement though as this is all of our logic. Your final function should look as such.

I would like to thank you for reading along and hope that you have learned something new! Keep an eye out for more articles the future!

If you would like to view a copy of these examples to play around with for yourself or just for reference, you can find the link for the GitHub Repo here.



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kevin Glasgow

Kevin Glasgow


Full Stack Software Engineer | Passion for Frontend and Design | Dirt Rider & Snow Glider |