じゃんけんゲームを作りました。
昔、友人の学校の課題で作った記憶があります。
今回利用したのはWordPressのカスタムHTMLブロック、カスタムJavaScript、カスタムCSSです。
出力部分（じゃんけんの勝敗結果部分）をもう少しカッコよくしたかったけど、もう少し勉強してからにします。
じゃんけんゲーム
ボタンを押すとじゃんけんの結果が下（変色部分）に表示されるよ。
プログラム部分
HTML、JavaScriptを使ってじゃんけんゲームを作ったのは初めてでした。
出力部分が文字だけの出力になってしまったのが悔しい所。画像を入れたり、色などを変えてみたい。
HTMLはこんな感じ。
<div class="flex">
<!-- じゃんけんのボタン。関数を呼び出し、それぞれ異なる引数を渡しています。 -->
<!-- グー：０ チョキ：１ パー：２ として扱い、JavaScriptでも同じ意味合いで扱います。 -->
<div class="is-style-btn_normal">
<button type="button" onclick="buttonClick(0)" >グー</button>
</div>
<div class="is-style-btn_normal">
<button type="button" onclick="buttonClick(1)">チョキ</button>
</div>
<div class="is-style-btn_normal">
<button type="button" onclick="buttonClick(2)">パー</button>
</div>
</div>
<output id="result">
勝敗は...
</output>buttonタグをそのまま使うと立て並びになるので、「div class=”flex”」の中に入れてcssで「display: flex;」を使って横並びにしています。
divタグで囲ってclass（swell-～）はSWELLに使われていた物を利用しています。
buttonタグではonclick属性でJavaScriptを呼び出しています。
ここでそれぞれ（グー、チョキ、パー）に対応した引数（０、１、２）を渡しています。
CSSはこんな感じ。
button {
color: #fff;
font-weight: 700;
transition: box-shadow .25s;
box-shadow: var(--swl-btn_shadow);
background: var(--the-btn-bg);
border-radius: var(--the-btn-radius, 0);
display: inline-block;
letter-spacing: var(--swl-letter_spacing, 1px);
line-height: 1.5;
margin: 0;
min-width: var(--the-min-width);
padding: var(--the-padding);
position: relative;
text-decoration: none;
width: var(--the-width);
}
.flex{
display: flex;
}
output{
background:aqua;
}「button{}」の部分はSWELLのボタンブロックに使われているCSSを取ってきました。
「.flex{}」の「display: flex;」は横並びにするためです。
「output{}」の「background:aqua;」は背景色をアクア色にして強調しました。
JavaScriptはこんな感じ
/*
じゃんけんゲームのプログラム
整数を使って判定するため、手と数値は下記に示す。
グー：０ チョキ：１ パー：２
*/
// 乱数生成関数
// 引数：整数
// 戻り値：0以上、引数未満のランダムな整数を戻す。
function getRandomInt(num) {
return Math.floor(Math.random() * num);
}
// じゃんけんの判定
// 引数：hand1,hand2(値：0,1,2)
// 戻り値：hand1から見て あいこ＝０ 負け＝１ 勝ち＝２
function getJudgement(hand1,hand2){
return ( hand1 - hand2 + 3 ) % 3;
}
// 表示関数
// 引数：hand1,hand2 (値：0,1,2)
// 戻り値：なし
function print(hand1,hand2){
const hand = new Array("グー","チョキ","パー");
const winOrLose = new Array("あいこ","負け","勝ち");
const ans = getJudgement(hand1,hand2);
const elem = document.getElementById("result");
elem.value= "あなたは" + hand[hand1] + " わたしは" + hand[hand2] + " 勝敗は" + winOrLose[ans] ;
}
// ボタンクリック時に動く関数
// 引数：you （値：0,1,2）
// 戻り値：なし
function buttonClick(you){
const me = getRandomInt(3);
print(you,me);
}・function buttonClick()関数の説明
getRandomInt()関数でランダムな整数を取得。３を引数にすることで（０、１、２）の値が返ってくる。
print()関数で引数に相手の手（buttonタグを押すとHTML側で入力される値you）と私の手(コンピューターの乱数me)を入力します。
print()関数内で勝敗の結果を計算し、HTMLのoutputタグへ結果を出力します。
・function print()関数の説明
const（定数）を４つ定義している。hand配列、winOrLose配列、定数ansと定数elemです。
それぞれ見ていきましょう。
hand配列とwinOrLose配列を定義し、グーチョキパー、あいこ負け勝ち、と数値（０，１，２）を紐づけている。
定数ansにgetJudgement()関数を使いじゃんけんの判定結果を格納。
定数elemにdocument.getElementById(“result”)でid属性「result」のHTML要素を取得する。
取得したHTML要素に相手の手、コンピューターの手、勝敗結果を入力する。
これによってHTML側のoutputタグ（id=”result”）に表示される。
・function getJudgement()関数の説明
計算式によって第一引数から見た勝敗を数値で返す。
０：引き分け、１：負け、２：勝ち
・function getRandomInt()関数の説明
０以上、引数未満のランダムな整数を返す。
まとめ
じゃんけんの判定に初めて数式を使った。（getJudgement()の処理）
if文や多次元配列を使ってやる方法は知っていたが、数式は初めて知りました。
数式は「じゃんけん勝敗判定アルゴリズムの思い出」を参考にしました。
この事はググって分かった事だったけど、改めてプログラムの奥深さを知りました。
プログラムの内部処理で言えば、数式より多次元配列の方が計算もなく値の参照のみになるので、処理は早いかも。
if文の方が明示的でわかりやすいかも知れない。
しかし、私にとっては目新しい処理方法だったので、今回使ってみました。
HTML、CSSやJavaScript、まだまだ初心者ですが、今後も何か作って少しでも学べればと思います。
下記は参考にしたサイト。
etc…
コメント