##はじめに
こんにちは！@70days_jsです。
じゃんけんゲームを作りました。
例のごとく何も参考にせずに作りました。
ので、もっといいじゃんけんのアルゴリズムがあれば教えて欲しいです。
今日は54日目。(2019/12/11)
よろしくお願いします。
##サイトURL
https://sin2cos21.github.io/day54.html
##やったこと
こんな感じのじゃんけんゲームを作りました（gif)↓
勝ちは赤、
負けは青、
引き分けは黄色で表現しています。
###ソース全文
html↓
<body>
<section>
<div id="jankenWord">勝負の刻!</div>
</section>
<section>
<div id="MyjankenImage"></div>
<div id="jankenImage"></div>
</section>
<section>
<div id="rock" class="jankenButton">グー</div>
<div id="scissors" class="jankenButton">チョキ</div>
<div id="paper" class="jankenButton">パー</div>
</section>
</body>
css↓
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
section {
display: flex;
}
div {
width: 100px;
height: 100px;
border: solid 1px black;
margin: 50px 0 0 50px;
display: flex;
justify-content: center;
align-items: center;
}
#jankenImage {
background-size: cover;
}
#MyjankenImage {
background-size: cover;
}
#jankenImage::before {
content: "敵";
margin-top: 130px;
}
#MyjankenImage::before {
content: "Me";
margin-top: 130px;
}
.jankenButton {
border-radius: 50%;
cursor: pointer;
}
.click-none {
pointer-events: none;
}
JavaScript↓
let janken = {
0: "rock",
1: "paper",
2: "scissors"
};
let img = {
rock: "day54/rock.png",
scissors: "day54/scissors.png",
paper: "day54/paper.png"
};
let jankenImage = document.getElementById("jankenImage");
let MyjankenImage = document.getElementById("MyjankenImage");
let jankenWord = document.getElementById("jankenWord");
let jankenButton = document.getElementsByClassName("jankenButton");
for (var i = 0; i < jankenButton.length; i++) {
let jankenChoice = jankenButton[i];
jankenChoice.addEventListener("click", function() {
let random = Math.floor(Math.random() * 3);
jankenImage.style.backgroundImage = "url(" + img[janken[random]] + ")";
MyjankenImage.style.backgroundImage = "url(" + img[jankenChoice.id] + ")";
judge(random, jankenChoice.id);
});
}
//引数はtekidaは乱数、meは選択した要素のid
function judge(tekida, me) {
let teki = janken[tekida];
if (teki === me) {
jankenWord.innerHTML = "ヒキワケ";
jankenWord.style.backgroundColor = "rgba(255,250,50, .5)";
} else if (me === "rock" && teki === "scissors") {
jankenWord.innerHTML = "カチ";
jankenWord.style.backgroundColor = "rgba(255,50,50, .5)";
} else if (teki === "rock" && me === "scissors") {
jankenWord.innerHTML = "マケ";
jankenWord.style.backgroundColor = "rgba(55,50,250, .5)";
} else if (me.length > teki.length) {
jankenWord.innerHTML = "カチ";
jankenWord.style.backgroundColor = "rgba(255,50,50, .5)";
} else {
jankenWord.innerHTML = "マケ";
jankenWord.style.backgroundColor = "rgba(55,50,250, .5)";
}
}
###じゃんけんのアルゴリズム
重要なのはここですよね。
今回、僕はグーチョキパーをhashにしました。
let janken = {
0: "rock",
1: "paper",
2: "scissors"
};
その時、文字数に着目しました。
すると、rock以外は文字数が大きいほど強い法則を見つけました。
scissors > paper
paper > rock
なので、以下のように書きました。
if (teki === me) {
ヒキワケ
} else if (me === "rock" && teki === "scissors") {
カチ
}else if (teki === "rock" && me === "scissors") {
マケ
} else if (me.length > teki.length) {
カチ
} else {
マケ
}
文字数じゃなく、数字を使っても良かっても良かったかもしれませんね。
ただ、まあ、これでじゃんけんは一応成立します。
##感想
ロジックを考えてちゃんと動いてくれると楽しかったりします。
ただ、あまり正確すぎたり最適を求めたりしすぎたりするのは自分の性に合わないということも分かりました。
これからもゆるく楽しく作れればいいな。