いつもプログラミングのことを教えてくださっているCTOから、
こんな課題をいただき、ゲームを作成してみました。
CSSはつくっていないのでごく簡素なもので、
仕組みづくりのJavaScriptの部分を頑張った感じです。
お題
徳川さんはプログラミングの練習をしています。
練習で下記のような動作をするhtmlとJSでできたプログラムを作成してみることにしました。
画面(html)：
1. 数字が入力できるテキストボックスとスタートボタン、決定ボタンを用意する
2. 下記のプログラムが記述されたJavaScriptファイルを読み込む
プログラム
1. スタートボタンが呼ばれると0 < x < 1000となるようなxをランダムに選ぶ
2. ユーザがテキストボックスに数字を入力して決定ボタンを押すと、下記の例のようにテキストをアラートボックスで表示し、正解がでたら終了する。
3. スタートボタンを押すと1に戻り再スタートできる
例1) x = 777 のとき
ステップ1:
ユーザ入力: 500
表示: 正解の数字は500 < x < 1000 です。
ステップ2:
ユーザ入力: 800
表示: 正解の数字は500 < x < 800 です。
ステップ3:
ユーザ入力: 750
表示: 正解の数字は750 < x < 800 です。
ステップ4:
ユーザ入力: 900
表示: 正解の数字は750 < x < 800 です。
ステップ5:
ユーザ入力: 777
表示: 正解です！
JavaScript
var x = 0;
var userNumber;
var maxInSmallerArea;
var minInGreaterArea;
var result;
function startFunction(){
document.quiz.usertext.value = "";
maxInSmallerArea = 0;
minInGreaterArea = 1000;
x = 1 + Math.floor( Math.random() * 1000 );
console.log(x);
};
function executeFunction(){
function getTextInput(){
userNumber = Number(document.quiz.usertext.value);
}
getTextInput();
function alertFunction(){
if(x === userNumber){
alert('正解です！');
}else{
if(userNumber < x && userNumber > maxInSmallerArea){
maxInSmallerArea = userNumber;
}else if(userNumber > x && userNumber < minInGreaterArea){
minInGreaterArea = userNumber
};
alert(maxInSmallerArea + '< x < ' + minInGreaterArea + 'です！');
};
}
alertFunction();
};
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>tokugawa finite</title>
</head>
<body>
<div class="container">
<h1>数字あてクイズ！</h1>
<p>コンピュータがランダムに選ぶ数字をあててみて。 ヒント：0より大きく1000より小さいよ。</p>
<form name="quiz">
<p><input type="button" value="スタート" onclick = 'startFunction()'></p>
<input class="box" type="text" id="inputbox" name='usertext'>
<p><input type="button" value="決定" onclick = 'executeFunction()'></p>
</form>
</div>
<script type="text/javascript" src="tokugawa functionまとめた.js"></script>
</body>
</html>
