爆弾解除マニュアルの一部をコードに変換してみる
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>On The Subject of Memory</h1>
<div id="on_the_subject_of_memory">
<div class="components">
<div class="component">
<h2>Stage <span>1</span></h2>
<p>
display number: <input type="text" class="display_number">
</p>
<p>
buttons number: <input id="" type="text" name="" class="buttons_number">
</p>
<p>
pressed button: <input class="pressed_button">
</p>
<p>
instruction: <div class="instruction"></div>
</p>
</div>
</div>
<div class="control">
<input type="button" value="+">
</div>
</div>
</body>
</html>
'use strict';
function components() {
return $('#on_the_subject_of_memory .components').children();
}
function currentComponent() {
return components().last();
}
function currentStageNumber() {
return parseInt(currentComponent().find('span').html());
}
function currentPressedButtonNumber() {
return parseInt(currentComponent().find('.pressed_button').val());
}
function currentStage() {
return currentComponent();
}
var pressedButton = {};
var displayNumber = {};
var stageInstructions = {
1: function() {
/*
If the display is 1, press the button in the second position.
If the display is 2, press the button in the second position.
If the display is 3, press the button in the third position.
If the display is 4, press the button in the fourth position.
*/
var instructions = 'Press the button in the ';
switch (displayNumber['1']) {
case 1:
case 2:
instructions += 'second';
break;
case 3:
instructions += 'third';
break;
case 4:
instructions += 'fourth';
break;
}
instructions += ' position';
return instructions;
},
2: function() {
/*
If the display is 1, press the button labeled "4".
If the display is 2, press the button in the same position as you pressed in stage 1.
If the display is 3, press the button in the first position.
If the display is 4, press the button in the same position as you pressed in stage 1.
*/
var instructions = 'Press the button ';
switch (displayNumber['2']) {
case 1:
instructions += 'labeled "4"';
break;
case 2:
case 4:
instructions += 'labeled "' + pressedButton['1'] + '"';
break;
case 3:
instructions += 'in the first position';
break;
}
return instructions;
},
3: function() {
/*
If the display is 1, press the button with the same label you pressed in stage 2.
If the display is 2, press the button with the same label you pressed in stage 1.
If the display is 3, press the button in the third position.
If the display is 4, press the button labeled "4"
*/
var instructions = 'Press the button ';
switch (displayNumber['3']) {
case 1:
instructions += 'labeled "' + pressedButton['2'] + '"';
break;
case 2:
instructions += 'labeled "' + pressedButton['1'] + '"';
break;
case 3:
instructions += 'in the third position';
break;
case 4:
instructions += 'labeled "4"';
break;
}
return instructions;
},
4: function () {
/*
If the display is 1, press the button in the same position as you pressed in stage 1.
If the display is 2, press the button in the first position.
If the display is 3, press the button in the same position as you pressed in stage 2.
If the display is 4, press the button in the same position as you pressed in stage 2
*/
var getPositionOfPressedButtonStageIn = function (n) {
var stage = $('#on_the_subject_of_memory .components').children()[n - 1];
var buttonsNumber = currentStage().find('.buttons_number').first().val().split('');
// String typed number does not match indexOf(numeric).
buttonsNumber = buttonsNumber.map(function (i) { return parseInt(i); });
var _pressedButton = parseInt($(stage).find('.pressed_button').first().val());
return buttonsNumber.indexOf(_pressedButton) + 1;
};
var instructions = 'Press the button ';
switch (displayNumber['4']) {
case 1:
instructions += 'labeled "' + getPositionOfPressedButtonStageIn(1) + '"';
break;
case 2:
instructions += 'first position';
break;
case 3:
case 4:
instructions += 'labeled "' + getPositionOfPressedButtonStageIn(2) + '"';
break;
}
return instructions;
},
5: function() {
/*
If the display is 1, press the button with the same label you pressed in stage 1.
If the display is 2, press the button with the same label you pressed in stage 2.
If the display is 3, press the button with the same label you pressed in stage 4.
If the display is 4, press the button with the same label you pressed in stage 3
*/
var instructions = 'Press the button labeled "';
switch (displayNumber['5']) {
case 1:
instructions += pressedButton['1'];
break;
case 2:
instructions += pressedButton['2'];
break;
case 3:
instructions += pressedButton['4'];
break;
case 4:
instructions += pressedButton['3'];
break;
}
instructions += '"';
return instructions;
}
};
// Main
$(function () {
$('#on_the_subject_of_memory').on('change keyup', '.display_number', function () {
var val = parseInt($(this).val());
var n = currentStageNumber();
displayNumber[n] = val;
var instruction = $('.instruction').last();
instruction.html(stageInstructions[n]());
});
$('#on_the_subject_of_memory').on('click', '.control > input', function () {
var component = currentComponent().clone();
var count = parseInt(component.find('span').html());
component.find('span').html(count + 1);
pressedButton[currentStageNumber()] = currentPressedButtonNumber();
$('#on_the_subject_of_memory > .components').append(component);
});
});