<!DOCTYPE html>
<html lang="ja">
<head><title>Game</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet">
<script type="text/javascript" src="../game/game.js"></script>
<style>
body{
margin: 0;
height: 100%;
font-family: 'Noto Sans JP', sans-serif;
}
body:after{
margin: 0;
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
content: "";
background: pink;
/* background: -moz-linear-gradient(top, #afeeee 0%,#FFF 100%); */
/* background: -webkit-linear-gradient(top, #afeeee 0%,#FFF 100%); */
background: linear-gradient(to bottom, pink 0%, #fff 100%);
z-index: -1;
}
h1{
text-align: center;
}
p{
margin: 0 auto;
text-align: center;
}
button{
margin: 0 auto;
text-align: center;
}
h2{
text-align: center;
}
h3{
text-align: center;
}
.un{
color: red;
}
</style>
</head>
<body>
<div class="inner">
<h1>~本日の星座ランキング~<h1>
<h2>あなたの順位は....?</h2>
<p><button id="btn" onclick="Omikuji();"> ランキング結果を見てみる </button></p>
<ul>
<li id="seiza"></li>
<li id="color"></li>
<li id="un0"></li>
<li id="un1"></li>
</ul>
</div>
<script>
let seiza = ["おひつじ座","おうし座","ふたご座","かに座","しし座","おとめ座","てんびん座","さそり座","いて座","やぎ座","みずがめ座","うお座",];
let color = ["赤","青","緑","黄色","紫","ピンク","茶","白","虹色",];
let un0 = ["最高","良い","ふつう","ちょっと悪い","サイアク",];
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);
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
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++
document.getElementById("s").innerHTML = seiza[un_r]
document.getElementById("c").innerHTML = seiza[un_r]
;}
else {break;}
}
if (n >= seiza.length){
i++;
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.getElementById("seiza").innerHTML = "第"+ i +"位"+ seiza[un_r]
document.getElementById("un0").innerHTML = "今日のアナタの運勢は"+ un0[un] + "です"
document.getElementById("un1").innerHTML = un1[un]
document.getElementById("color").innerHTML = "<li>今日のラッキーカラーは"+ color[color_r] +"です</li>"
rank.push(seiza[un_r]);
}
}
}, false);
</script>
</body>
</html>
