![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回は星座占いをつくるッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
星座占い??
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今日の星座ランキング~
というアレっぴ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
何気に毎日の占いは楽しみだったりするッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
機械なのにヘンなの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
信じる信じないも確率論ッピ!
占いは科学ッピ!
今日の星座ランキング・サンプル
全体のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//4グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調!何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも!",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも!",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも?",
"今日はなんだか気分が良くない日。忘れ物には気をつけて!",
"今日は何もせずゆっくりしているのが良いかも・・・",
]
let i = 0;//繰り返し用プログラム
let n = 0;//繰り返し用プログラム
let rank= [];//ランキングのための変数
let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
document.write("<p>今日の星座ランキング</p>");
for (i=0 ;i < seiza.length;){
n = 0;//変数をリセットします
un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
while(n < seiza.length){
if (seiza[un_r] != rank[n]){n++;}
else {break;}
}
if (n >= seiza.length){
i++;//iにプラス1を追加する
if (i >= 0 && i <= 2) {un = 0;}
else if (i >= 3 && i <= 5) {un = 1;}
else if (i >= 6 && i <= 8) {un = 2;}
else if (i >= 9 && i <= 10) {un = 3;}
else if (i >= 11 && i <= 12) {un = 4;}
//書き出しのプログラム
document.write("<ul>");
document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
document.write("<li>今日のアナタの運勢は"+ un0[un] + "です</li>");
document.write("<li>"+ un1[un] +"</li>");
document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
document.write("</ul>");
rank.push(seiza[un_r]);//リストに記憶
}
}
</script>
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
今回はこのコードを1からじっくり解説するッピよ~!
12星座占いの作り方
必要なもの
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
![メモ帳](https://janken.asotetu.work/wp-content/uploads/2021/05/2020-07-01_611.jpg)
- メモ帳
- ブラウザ
が必要ッピ!
元になるコード
<!-- 見えない部分 -->
<html>
<head></head>
<!-- ↓ここから見える部分↓ -->
<body>
<!-- ↓この下に入力してね!↓ -->
<script>
</script>
<!-- ここまで! -->
</body>
</html>
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
このコードをもとに作って行くッピ!
リストで12星座とラッキーカラーをつくる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずはリストで星座と色を登録するッピ!
<script></script>の間に
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
と入力するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
リストは
let リスト名 = [“中身1”,”中身2”];
で作ることができるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
確認として
document.write( seiza );
document.write("<br/>");
document.write( color );
と入力し、ブラウザで見てみるッピ!
document.write( seiza );
document.write(“<br/>“);
document.write( color );
という意味ッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/08/2021-08-03_1.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
お、星座と色が出てきた!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さらに運勢リストを追加するッピ!
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];
let un1 = [
"今日のアナタは絶好調!何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも!",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも!",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも?",
"今日はなんだか気分が良くない日。忘れ物には気をつけて!",
"今日は何もせずゆっくりしているのが良いかも・・・",
];
と入力して見るッピ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
確認として、
document.write("<br/>");
document.write( un0 );
document.write("<br/>");
document.write( un1[2] );
と入力して見るッピよ~
![](https://janken.asotetu.work/wp-content/uploads/2021/08/2021-08-03_2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑強.png)
できた~!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];
let un1 = [
"今日のアナタは絶好調!何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも!",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも!",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも?",
"今日はなんだか気分が良くない日。忘れ物には気をつけて!",
"今日は何もせずゆっくりしているのが良いかも・・・",
];
document.write( seiza );
document.write("<br/>");
document.write( color );
document.write("<br/>");
document.write( un0 );
document.write("<br/>");
document.write( un1[2] );
</script>
</body>
</html>
ランキング付けやラッキーカラー決める乱数をつくる
let rank= [];//ランキングのための変数
let un = 0;//運勢を判別するための変数
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングを選ぶ
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
document.write("<p>今日の星座ランキング</p>");
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はこれらの【乱数】や変数を付け加えて、
ランキング付けをしたりラッキーカラーを決める方法を紹介するッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_無.png)
乱数って?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
乱数というのは、行動するごとに変化する数 のことッピ!
サイコロや今日の運勢みたいに毎日変わる数字を【乱数】や【ランダムな数】というッピ!
ランキングづけをするための乱数
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ランキングを決めるにはこの変数をつかうッピ!
let un_r = Math.floor( Math.random() * seiza.length);
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
let un_r = Math.floor( Math.random() * seiza.length);
という意味ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これを星座リストと組み合わせて
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let un_r = Math.floor( Math.random() * seiza.length);
un_r = Math.floor( Math.random() * seiza.length);
document.write("第1位" + seiza[un_r]);
document.write("<br/>");
un_r = Math.floor( Math.random() * seiza.length);
document.write("第2位" + seiza[un_r]);
とすることで、ランキングをつくることができるッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/08/2021-08-04_1.jpg)
ラッキーカラーを決めるための乱数
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次はラッキーカラーを決める変数ッピ!
let color_r = Math.floor( Math.random() * color.length);
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
let color_r = Math.floor( Math.random() * color.length);
という意味ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最初の色リストと組み合わせて
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let color_r = Math.floor( Math.random() * color.length);
document.write("あなたのラッキーカラーは" + color[color_r] + "です");
とラッキーカラーを決めることができるッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/08/2021-08-04_2.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
ランキングやラッキーカラーってこうやってつくるんだな~!
繰り返し処理で12星座ぶんのランキングをつくる
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
次は繰り返し処理をして12星座ぶんのランキングをつくるッピよ~
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_困.png)
なんだか難しそうだなぁ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
大丈夫ッピ!
わかりやすいように少しずつ説明するッピ~♪
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
星座の運勢を12回ぶん書き出すには、for文を使うッピ!
for (i=0 ;i < 繰り返したい数; i++){ 繰り返したいプログラム }
で繰り返すことができるッピ!
<script></script>の間に↓の文章を入力するッピよ~!
for (i=0 ;i < seiza.length;){
//ランキング付けのための変数
un_r = Math.floor( Math.random() * seiza.length);
color_r = Math.floor( Math.random() * color.length);
//書き出しのプログラム
document.write("<ul>");
document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
document.write("</ul>");
i++;
}
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは、
for (i=0; i < seiza.length;)
{ 繰り返したいプログラムとi++; }
という意味で、12回分書き出すことができているッピ!
![](https://janken.asotetu.work/wp-content/uploads/2021/08/2021-08-04_3.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
おおお! なんかたくさん出た!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//4グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調!何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも!",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも!",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも?",
"今日はなんだか気分が良くない日。忘れ物には気をつけて!",
"今日は何もせずゆっくりしているのが良いかも・・・",
]
;
let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングを選ぶ
document.write("<p>今日の星座ランキング</p>");
for (i=0 ;i < seiza.length;){
//ランキング付けのための変数
un_r = Math.floor( Math.random() * seiza.length);
color_r = Math.floor( Math.random() * color.length);
//書き出しのプログラム
document.write("<ul>");
document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
document.write("</ul>");
i++;
}
</script>
</body>
</html>
すでにランキング入りした星座をはじく
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_謎.png)
だけどさ、うさタブ。
これランキングの中に同じ星座が2~3回入ってない?
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
ラッキーカラーはともかく、同じ星座が2回も3回もあるのはダメじゃないか?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
任せるッピ!
すでに登録した星座をはじくプログラムをつくるッピよ~
if分岐.pushで判定ポイントをつくり、while文で12回ぶんの判定を繰り返す
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
登録した星座をはじくには、
新しくリストをつくって、登録したものを記録しないプログラムが必要になるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
一気にコードを公開するッピよ~!
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//4グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調!何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも!",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも!",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも?",
"今日はなんだか気分が良くない日。忘れ物には気をつけて!",
"今日は何もせずゆっくりしているのが良いかも・・・",
];
let i = 0;//繰り返し用プログラム
let n = 0;//繰り返し用プログラム
let rank= [];//ランキングのための変数
let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
document.write("<p>今日の星座ランキング</p>");
for (i=0 ;i < seiza.length;){
n = 0;//変数をリセットします
un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
while(n < seiza.length){
if (seiza[un_r] != rank[n]){n++;}
else {break;}
}
if (n >= seiza.length){
i++;//iにプラス1を追加する
//書き出しのプログラム
document.write("<ul>");
document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
document.write("</ul>");
rank.push(seiza[un_r]);//リストに記憶
}
}
</script>
</body>
</html>
![](https://janken.asotetu.work/wp-content/uploads/2021/08/2021-08-04_5.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_驚き_強.png)
おお! ぜんぜんかぶらない!
どうやったんだよ! うさタブ!?
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
ふふふ、どうやったかこれから説明するッピ!
新しくリストをつくり .push で追加する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは新しいリストと変数づくりッピ!
let rank= [];//ランキングのためのリスト変数
rank.push(seiza[un_r]);//リストに記憶
で最初にリストをつくり、
ランキング1位・2位などの<ul><li></li></ul>グループを書き出したあと
rank.push(seiza[un_r]);
で rank= [] ;にランキング入りした星座を記録するッピ!
whileとif文で登録しているか判別する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さらにif文ですでにこの星座がランキングに登録しているかを判別するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
まずは i に代わる繰り返し用の変数 n を用意するッピ!
n = 0;//変数をリセットします
さらに↓のプログラムで登録するか判別するッピよ~
while(n < seiza.length){
if (seiza[un_r] != rank[n]){n++;}
else {break;}
}
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
while(n < seiza.length){
if (seiza[un_r] != rank[n]){n++;}
else {break;}
}
という意味ッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さらに
if (n >= seiza.length){
i++;//iにプラス1を追加する
//書き出しのプログラム
document.write("<ul>");
document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
document.write("</ul>");
rank.push(seiza[un_r]);//リストに記憶
}
と書き出しのコードを変更することで、今まで登録していない星座を記録することができるッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
if ( n >= seiza.length ) {
i++;
rank.push(seiza[un_r]);
}
という意味ッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_ため息.png)
なんだか複雑だなぁ
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
いくつものプログラムの応用ッピ!
混乱するのも意味ないッピよ~
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
流れとしては
for (i=0 ;i < seiza.length;){//12星座ぶんのランキング
while(n < seiza.length){//すでに登録しているかを判別
if (seiza[un_r] != rank[n]){n++;}
else {break;}//登録しているなら中断
}
if (n >= seiza.length){//登録していないなら動作
i++;//ランキングの順位を増やす
rank.push(seiza[un_r]);//リストに登録する
}
}
という感じッピ!
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_汗.png)
うーん
わかったような・・・わからないよ~な?
ランキングの順位から運勢を決定する
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後にランキングの順位から運勢を決定するプログラムを作るッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
運勢を決定するにはif文を作るッピよ~
//運勢を決めるためのif文
if (i >= 0 && i <= 2) {un = 0;}
else if (i >= 3 && i <= 5) {un = 1;}
else if (i >= 6 && i <= 8) {un = 2;}
else if (i >= 9 && i <= 10) {un = 3;}
else if (i >= 11 && i <= 12) {un = 4;}
これを書き出しプログラムの前に追加するッピ!
さらに書き出しプログラムに運勢を書き出すコードを書き加えるッピ~
document.write("<li>今日のアナタの運勢は"+ un0[un] + "です</li>");
document.write("<li>"+ un1[un] +"</li>");
if (n >= seiza.length){
i++;//iにプラス1を追加する
if (i >= 0 && i <= 2) {un = 0;}
else if (i >= 3 && i <= 5) {un = 1;}
else if (i >= 6 && i <= 8) {un = 2;}
else if (i >= 9 && i <= 10) {un = 3;}
else if (i >= 11 && i <= 12) {un = 4;}
//書き出しのプログラム
document.write("<ul>");
document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
document.write("<li>今日のアナタの運勢は"+ un0[un] + "です</li>");
document.write("<li>"+ un1[un] +"</li>");
document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
document.write("</ul>");
rank.push(seiza[un_r]);//リストに記憶
}
![](https://janken.asotetu.work/wp-content/uploads/2021/08/2021-08-04_6.jpg)
![ユウキ](https://janken.asotetu.work/wp-content/uploads/2021/05/ユウキくん_笑.png)
おおお! 運勢が追加されてる!
リストとランキングの順位で運勢を決める
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
運勢を決めるには、あらかじめ運勢コメントをリストつくっている必要があるッピ!
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//4グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調!何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも!",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも!",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも?",
"今日はなんだか気分が良くない日。忘れ物には気をつけて!",
"今日は何もせずゆっくりしているのが良いかも・・・",
];
let un = 0;//運勢を決める変数
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
さらにランキングを順位づけに必要な変数 i これを使って運勢コメントを判別するッピ!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
これは
if (i >= 0 && i <= 2) {un = 0;}
else if (i >= 3 && i <= 5) {un = 1;}
else if (i >= 6 && i <= 8) {un = 2;}
else if (i >= 9 && i <= 10) {un = 3;}
else if (i >= 11 && i <= 12) {un = 4;}
という意味ッピよ~!
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
最後に
un0[un] //ざっくりとした運勢
un1[un] //運勢コメント
で運勢を呼び出せば完成ッピ!
全体のコードの確認
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
//事前の設定プログラム
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","黒",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];//4グループに分けて、ちょっと悪いとちょっと良いの間にふつうを作る
let un1 = [
"今日のアナタは絶好調!何をやってもうまくいきます。苦手なことに再チャレンジしたら案外うまくいくかも!",
"今日は調子が良い日。久しぶりに昔の友だちに連絡してもるのもいいかも!",
"今日はとてもいつもどおりな日。気を抜きすぎて寝坊をしやすくなるかも?",
"今日はなんだか気分が良くない日。忘れ物には気をつけて!",
"今日は何もせずゆっくりしているのが良いかも・・・",
];
let i = 0;//繰り返し用プログラム
let n = 0;//繰り返し用プログラム
let rank= [];//ランキングのための変数
let un = 0;//運勢を判別するための変数
let color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
let un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
document.write("<p>今日の星座ランキング</p>");
for (i=0 ;i < seiza.length;){
n = 0;//変数をリセットします
un_r = Math.floor( Math.random() * seiza.length);//運勢をランキングづけ
color_r = Math.floor( Math.random() * color.length);//ラッキーカラー
while(n < seiza.length){
if (seiza[un_r] != rank[n]){n++;}
else {break;}
}
if (n >= seiza.length){
i++;//iにプラス1を追加する
if (i >= 0 && i <= 2) {un = 0;}
else if (i >= 3 && i <= 5) {un = 1;}
else if (i >= 6 && i <= 8) {un = 2;}
else if (i >= 9 && i <= 10) {un = 3;}
else if (i >= 11 && i <= 12) {un = 4;}
//書き出しのプログラム
document.write("<ul>");
document.write("<li>第"+ i +"位"+ seiza[un_r] +"</li>");
document.write("<li>今日のアナタの運勢は"+ un0[un] + "です</li>");
document.write("<li>"+ un1[un] +"</li>");
document.write("<li>今日のラッキーカラーは"+ color[color_r] +"です</li>");
document.write("</ul>");
rank.push(seiza[un_r]);//リストに記憶
}
}
</script>
</body>
</html>
- リスト配列で星座をつくる
- ラッキーカラーをつくる
- 乱数で運勢を決める
- if / for / while文でランキングづけする
![うさタブ](https://janken.asotetu.work/wp-content/uploads/2021/05/うさタブ4.png)
上手くできたッピか?
これからも色んなゲーム作りやプログラムの解説をしていくッピ!
次回も楽しみにしているッピよ~~!