1.14 Skill-builder: Defuse the bomb!

A critical matter of choices

Let's say that you want to create a bomb defuser simulator, modelled after what happens in cheesy TV shows.

So there are four wires, but:

Like this:

Oh my gosh! You have to defuse the bomb!

Which wire do you cut? Enter 1, 2, 3, or 4:

Organizing the problem

In order to make this work, you need to split it into several parts

  1. Input: Create the interface, and get the wire number
  2. Process: Decide the results depending on which wire is cut
  3. Output: Show the results, again depending on which wire is cut, for example:
    • defusing wire: replace the bomb picture with a defused bomb
    • trigger wire: replace the picture with an explosion
    • dud wires: replace the picture with one with more ticking

Different results for different things

The key to making this program work is in the processing: you need to change the code that runs under different circumstances. In other words, we need to use IF statements.

If statements look like this:

if (something == true) {
	/* do something */
} else {
	/* do something else */
}

IF statement example

Let's use the example of calculating overtime hours. If the number of hours worked in week is more than 48, the calculation is different:


if (numberHoursWorked > 48) { // if there are overtime hours
	totalGrossPay	=(48 * hourlyWage) + (numberHoursWorked-48) * hourlyWage * 1.5;
} else { // if there is no overtime
	totalGrossPay	=numberHoursWorked * hourlyWage;
}

Let's apply IF statements to our bomb defuser:

Saving your work

Download the template and rename it to your last name, such as "1.14S-DefuseTheBomb-LastName.html".

You will also need to grab the following images and save them to the same directory as your HTML document:

  1. nicePictureOfABomb.png
  2. defusedBomb.png
  3. explodedBomb.png
  4. stillActiveBomb.png

The assignment

Get it running, and then feel free to modify it. I would attack your code in stages:

  1. Get the if ( statements working correctly
  2. Get the image changes working in the show... functions
  3. Get the instructions to display if you type in something besides 1-4.
  4. Use alert("In here!"); to help you debug

Extend and expand

Can you use Math.random to randomly change the nature of each wire?