JavaScript 勝手に学び舎 開校 第2回 なんと・・・・ おみくじ ^-^ です。
こんにちは。どうもです。
学び舎の第二回は、ま～つかい古された、おみくじをやりたいと思います。
完成形URL
http://tokotoko6667777.hippy.jp/omikuzi-blog/
今回の大事な要点は、
自分で、確率を決める。
これは、改めて自分でコーディングしてみて、奥が深いと思いました。
確立を自分であらかじめ、ある程度決めて、出力を選択できる。色々な応用ができますし、組み合わせもできると思います。
例えば、出会いアプリのようなもので、課金されている方と、そうではない方との確立を変えたり（どこを変えるかがセンスが問われると思います。）
ゲームでしたら、一番わかりやすいのが、ドラクエのはぐれメタルだと思います。
ただ、二番煎じは面白くないですし、他に色々なものと組み合わせたり、引いたりしたら面白いアイディアが出てくると思います。
最初にJavaScriptのコードを載せたいと思います。
貼り付けで申し訳ないのですが、よろしくお願いします。
※JavaScript のソースに PHPの管理画面を作ろうと思っています。
cssは、コピペしている部分がありますので、そこはご勘弁ください。
できるだけ、コメントアウトで分かりやすいようにできるよう頑張ります。
/*---------- JavaScript ---------------*/
完成図 (デザインしょぼいですけど、これが完成形です。)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS おみくじ</title>
<style>
#container {}
#content {width:80%; margin:0 auto;}
/*---------- コピペ-------------*/
.btn-vertical-border {
position: relative;
display: inline-block;
font-weight: bold;
padding: 5px 11px 5px 15px;
text-decoration: none;
color: #67c5ff;
transition: .4s;
border-style: none;
}
.btn-vertical-border:before {
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top: 0;
left: 0;
background:#67c5ff;
}
.btn-vertical-border:after {
position: absolute;
display: inline-block;
content: '';
width: 4px;
height: 100%;
top:0;
left: 100%;
background:#67c5ff;
}
.btn-vertical-border:hover:before, .btn-vertical-border:hover:after {
transform: rotate(10deg);
}
/*---------- コピペ END-------------*/
#text-box { width: 28%;height: 2em;}
#kaisuu {border: 1px solid #dedede;padding: 0 20px;margin-left: 20px;}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>おみくじを引いた回数<span id="kaisuu"> :0</span></p> <!-- .innerHTML で取得する場所 -->
<form name="form" action="index.html">
<input name="textbox" type="text" placeholder="（1）を押しすと おみくじ終了します。" id="text-box">
</form>
</div>
</div>
var val = 0; // カウント用変数
function add() { // 回数カウント処理
kaisuu = document.getElementById('kaisuu');
val++;
kaisuu.innerHTML =" :" + val; // おみくじの引いた回数表示
}
function agein() {
if(result == 1) { // テキストボックスに 1 を入力して サブミットを押したら終了。
alert("おみくじ終了");
location.reload();
}
}
function omikuzi() { // おみくじ部分の処理
var randNum = Math.floor(Math.random()*(100-0)+0); // 0 ～ 100 の乱数を作成
if(randNum <= 30) {
alert("運勢は・・・ *大吉* です");
add();
} else if(randNum > 30 && randNum <= 50) {
alert("運勢は・・・ 中吉 です");
add();
} else if(randNum > 50 && randNum <= 70) {
alert("運勢は・・・ 小吉 です");
add();
} else if(randNum > 70 && randNum <= 90) {
alert("運勢は・・・ 吉 です");
add();
} else {
alert("運勢は・・・ 凶 です");
add();
}
agein();
}
</script>
</body>
</html>
※コードの肝は、100の乱数を、どう割り振るかです。
それによって、割り振られた出力の出現率が変わってきます。
ウィイニングイレブンのガチャみたいなものです。
あれには、だいぶ絞られました。。。涙
JavaScriptの細かいコードの説明も追記致します。
※このコードが正解ではなく、何通りも同じ処理を可能にするコードはありますし、もっと良い処理もあると思います。
あくまでも、僕が個人的に導き出した今現在の答えですので、それに縛られずに自由に発想してください。
後に、C言語のコードも載せますので、C言語と比べてみましょう。
今回使った、パーツだけ細かく追記させて頂きます。
/*------------- パーツの追記と、考え方 ---------------*/
・まず、追記させて頂く今回のプログラムの考え方、応用、を考えてみましょう。
-- 機能 --
１：今回のプログラムは、100でも、1,000でも、10,000でも乱数の元が多ければ多いほど、細かく確立を設定できる。
２：ユーザーの入力値を取得して、処理を判別できる。
３：ユーザーの入力値を or ボタンを押した回数を保存できる。
こんなもんですかね・・・
-- 応用例 --
ビジネス系：今から記載するサービスはとっくにありまが、機能３：で、スマホアプリや、webサイトなどで、どのボタンが良く押されるのか、画像がクリックされるのかを数値で残しておける。
↑
これはもうあるので、例えば「応用」で、社内での多数決を取る際のwebアプリ & 新商品を開発、または何かの意思決定の人数が多ければ多いほどいい場面などに使うとか・・・実際に使えるは関係なく、僕は何かを作ったら「ハイ。完了」っていう流れ作業的なことはしないようにしています。どんなにつまらないアイディアでも、派生させて考えるように心がけています。
本当に、なんでも良いと思います。
ひとつ、具体的なメモはノートに書くのが良いと思います。プログラマーを目指されている方や、プログラマーの方であればおおよそ検討はつくと思いますが・・・
ネット上では、単語と単語程度のメモにした方がいいかなって・・・ま～そこは人それぞれで・・・
申し訳ないです、応用例が思いつきません。
（応用例）
思いつきました。
・例えば、スポーツジムにある、ランニングマシンのランダム設定を、いるかどうかは別として、無限に作れますね。
・音楽のランダム機能も、色々遊べそうですね。
・座標無限 PK みたいなゲームも作れますね。PKって、大体９個の座標でやってるの思うので、無限のリアル PK ができますね。
「結論」
こんな感じで、考えるの、想像するのを楽しんだ方が、プログラミングは楽しいと思います。有難うございました。
